Browse Source

Add ldap badge on input

satof3 2 years ago
parent
commit
6dd59ec2f4

+ 18 - 0
apps/app/src/components/Layout/NoLoginLayout.module.scss

@@ -48,6 +48,24 @@
     }
   }
 
+  .input-container {
+    width: 89%;
+    @include bs.media-breakpoint-down(sm) {
+      width: 86%;
+    }
+  }
+
+  .ldap-space {
+    padding-right: 76px;
+  }
+
+  .input-ldap {
+    position: absolute;
+    top: 45%;
+    right: 2%;
+    transform: translateY(-50%);
+  }
+
   $btn-fill-colors: (
     'login': (
       rgba(#204986, 0.6),

+ 16 - 13
apps/app/src/components/LoginForm.tsx

@@ -198,19 +198,22 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             <span className="p-2 text-white opacity-75">
               <span className="material-symbols-outlined">person</span>
             </span>
-            <input
-              type="text"
-              className="form-control rounded"
-              data-testid="tiUsernameForLogin"
-              placeholder="Username or E-mail"
-              onChange={(e) => { setUsernameForLogin(e.target.value) }}
-              name="usernameForLogin"
-            />
-            {isLdapStrategySetup && (
-              <small className="text-success">
-                <span className="material-symbols-outlined">select_check_box</span>LDAP
-              </small>
-            )}
+            <div className="input-container">
+              <input
+                type="text"
+                className={`form-control rounded ${isLdapStrategySetup ? 'ldap-space' : ''}`}
+                data-testid="tiUsernameForLogin"
+                placeholder="Username or E-mail"
+                onChange={(e) => { setUsernameForLogin(e.target.value) }}
+                name="usernameForLogin"
+              />
+              {isLdapStrategySetup && (
+                <small className="badge text-bg-success input-ldap d-flex align-items-center">
+                  <span className="material-symbols-outlined">network_node</span>
+                  <span className="">LDAP</span>
+                </small>
+              )}
+            </div>
           </div>
 
           <div className="input-group">