mgr/dashboard: redesign the login screen

fixes: https://tracker.ceph.com/issues/35689
Signed-off-by: Ishan Rai <ishanrai05@gmail.com>
(cherry picked from commit 6b35508ef87cf5c94f6290e5752e36af3acab9bf)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
index b8a0a629a63b9c3b7bccd1cb7f4c8ce04c17e636..bb28c240e797f6d66f31c13ae141f5fae319655d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
@@ -1,50 +1,61 @@
 <div *ngIf="isLoginActive">
-  <h1 i18n="The welcome message on the login page">Welcome to Ceph!</h1>
   <form name="loginForm"
         (ngSubmit)="login()"
         #loginForm="ngForm"
         novalidate>
 
     <!-- Username -->
-    <div class="form-group has-feedback">
-      <input name="username"
+    <div class="form-group has-feedback d-flex flex-column py-3">
+      <label class="placeholder pl-4"
+             for="username"
+             i18n>Username</label>
+      <input id="username"
+             name="username"
              [(ngModel)]="model.username"
              #username="ngModel"
              type="text"
-             placeholder="Enter your username..."
-             class="form-control"
+             [attr.aria-invalid]="username.invalid"
+             aria-labelledby="username"
+             class="form-control pl-4"
              required
              autofocus>
-      <div class="invalid-feedback"
+      <div class="invalid-feedback pl-4"
            *ngIf="(loginForm.submitted || username.dirty) && username.invalid"
            i18n>Username is required</div>
     </div>
 
     <!-- Password -->
-    <div class="form-group has-feedback">
-      <div class="input-group">
-        <input id="password"
-               name="password"
-               [(ngModel)]="model.password"
-               #password="ngModel"
-               type="password"
-               placeholder="Enter your password..."
-               class="form-control"
-               required>
-        <span class="input-group-append">
+    <div class="form-group has-feedback"
+         id="password-div">
+      <div class="input-group d-flex flex-nowrap">
+        <div class="d-flex flex-column flex-grow-1 py-3">
+          <label class="placeholder pl-4"
+                 for="password"
+                 i18n>Password</label>
+          <input id="password"
+                 name="password"
+                 [(ngModel)]="model.password"
+                 #password="ngModel"
+                 type="password"
+                 [attr.aria-invalid]="password.invalid"
+                 aria-labelledby="password"
+                 class="form-control pl-4"
+                 required>
+          <div class="invalid-feedback pl-4"
+               *ngIf="(loginForm.submitted || password.dirty) && password.invalid"
+               i18n>Password is required</div>
+        </div>
+        <span class="form-group-append">
           <button type="button"
-                  class="btn btn-outline-light btn-password"
+                  class="btn btn-outline-light btn-password h-100 px-4"
                   cdPasswordButton="password">
           </button>
         </span>
       </div>
-      <div class="invalid-feedback"
-           *ngIf="(loginForm.submitted || password.dirty) && password.invalid"
-           i18n>Password is required</div>
     </div>
 
     <input type="submit"
-           class="btn btn-secondary btn-block"
+           class="btn btn-secondary px-5 py-2"
            [disabled]="loginForm.invalid"
            value="Login"
            i18n-value>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
index 7535c8c84ff6c5d3734eee0520c70f899302b0cd..daacf5ee32683e7bcf42a88df3a41fc87de03ef3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
@@ -5,15 +5,34 @@
     margin: 0 0 30px 0;
   }
 
+  .form-group {
+    border-left: 4px solid white;
+    background-color: $color-password-toggle-bg;
+    height: auto;
+    margin-bottom: 2rem;
+
+    &:focus-within {
+      border-left: 4px solid $color-accent;
+    }
+
+    .invalid-feedback {
+      display: inline;
+    }
+  }
+
   .btn-password,
   .btn-password:focus,
   .form-control,
   .form-control:focus {
+    border: none;
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
     color: $color-password-toggle-text;
     background-color: $color-password-toggle-bg;
   }
 
-  .form-control::placeholder {
+  .placeholder {
     color: $color-password-toggle-placeholder-text;
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
index f223ea0af95e83d3c38f18e15b9b18f6ab976248..389e8e1d5e22a1778a0edba5b760bb44d7f161b7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
@@ -1,4 +1,4 @@
-<div class="login full-height">
+<main class="login full-height">
   <header>
     <nav class="navbar">
       <a class="navbar-brand"></a>
@@ -10,15 +10,13 @@
   <section>
     <div class="container">
       <div class="row full-height vertical-align">
-        <div class="col-sm-6 d-none d-sm-block">
-          <img src="assets/Ceph_Logo_Stacked_RGB_White_120411_fa_256x256.png"
+        <div class="col-sm-12 col-md-6 d-sm-block">
+          <img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
                alt="Ceph"
-               class="float-right img-fluid">
-        </div>
-        <div class="col-12 col-sm-6 col-xl-5">
+               class="img-fluid mb-5">
           <router-outlet></router-outlet>
         </div>
       </div>
     </div>
   </section>
-</div>
+</main>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
index c88a7664bc9cc681151e44d18d2e6bb6cede9e09..7ca0ce5ede04c4644e6088d288277f82f05b659e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
@@ -3,7 +3,9 @@
 ::ng-deep .login {
   color: $color-login-row-text;
   background-color: $color-login-row-bg;
-
+  background-image: url('assets/ceph_background.gif');
+  background-position: right bottom;
+  background-repeat: no-repeat;
   header {
     position: absolute;
     width: 100vw;

diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/ceph_background.gif b/src/pybind/mgr/dashboard/frontend/src/assets/ceph_background.gif
new file mode 100644 (file)
index 0000000..0f7426e
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/ceph_background.gif differ

diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/ceph_login_bgimage_fix.png b/src/pybind/mgr/dashboard/frontend/src/assets/ceph_login_bgimage_fix.png
deleted file mode 100644 (file)
index c9b281d..0000000
Binary files a/src/pybind/mgr/dashboard/frontend/src/assets/ceph_login_bgimage_fix.png and /dev/null differ

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
index 7865cb29a044e129ae6483de7ccb76f52ecb1073..f9f811e4d13e3e26aaeb42f22c4599e49d78da0b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
@@ -49,6 +49,7 @@ $color-input-border: #ced4da;
 $color-input-border-hover: #adadad;
 $color-brand-teal: #2b99a8 !default;
 $color-brand-gray: #374249 !default;
+$color-mirage-gray: #333e46 !default;
 
 $color-primary: $color-brand-teal !default;
 $color-secondary: $color-brand-gray !default;
@@ -82,7 +83,7 @@ $color-login-row-text: $color-solid-white !default;
 $color-login-row-bg: $color-secondary !default;
 $color-password-toggle-text: $color-solid-white !default;
 $color-password-toggle-placeholder-text: $color-blue-gray !default;
-$color-password-toggle-bg: $color-solid-gray !default;
+$color-password-toggle-bg: $color-mirage-gray !default;
 $color-password-toggle-focus: $color-primary !default;
 // $color-login-active-row-bg: $color-light-yellow !default;
 // $color-login-active-row-text: $color-black !default;