argoproj#44 Redesign forgot password page

wokeGit · Aug 29, 2017 · 5489b8b · 5489b8b
1 parent 0336a62
commit 5489b8b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 19 deletions.
diff --git a/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html b/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
@@ -1,23 +1,38 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg">
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box">
+        <div class="setup__header">
+            <h1>{{ 'Forgot Password' | translate }}?</h1>
         </div>
-        <form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
-            <div class="ax-form-row">
-                <input class="ax-field" id="email" type="text" formControlName="email" ax-label-placeholder
-                       autocomplete="off">
-                <label for="email" class="ax-label-placeholder">{{ 'Email address' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['email'].valid && (resetPasswordForm.controls['email'].touched || submitted)">{{ 'Email is incorrect' | translate }}</div>
-            </div>
-            <div class="login__form-row">
-                <button axButtonWave class="ax-button ax-button--base ax-button--full-width ax-button--xlg" type="submit">
-                    {{ 'Reset passowrd' | translate }}
-                </button>
+        <div class="setup__content setup__content--forgot-password">
+            <div class="setup__back-btn">
+                <a [routerLink]="['/login']">
+                    <i class="ax-icon-back"></i>{{ 'Back' | translate | uppercase }}
+                </a>
             </div>
-            <div class="login__more-row">
-                <a [routerLink]="['/login']">{{ 'Back to login' | translate }}</a>
-            </div>
-        </form>
+
+            <form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
+                <p>
+                    {{ 'Enter the email address you used to create your Argo Account and we\'ll send you an email with a link to reset your password' | translate }}.
+                </p>
+                <div class="ax-form-row">
+                    <input class="ax-field" id="email" type="text" formControlName="email" ax-label-placeholder
+                           autocomplete="off">
+                    <label for="email" class="ax-label-placeholder">{{ 'Email address' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['email'].valid && (resetPasswordForm.controls['email'].touched || submitted)">{{ 'Email is incorrect' | translate }}</div>
+                </div>
+                <div class="login__form-row">
+                    <button axButtonWave class="ax-button ax-button--base ax-button--full-width" type="submit">
+                        {{ 'Send email' | translate }}
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
+
 <ax-notifications></ax-notifications>
diff --git a/saas/axops/src/ui/src/app/views/setup/setup.scss b/saas/axops/src/ui/src/app/views/setup/setup.scss
@@ -60,7 +60,13 @@ $setup-box-content-shadow: 3px 3px 20px black;
     }
 
     &__header {
-
+        h1 {
+            line-height: 80px;
+            font-size: 35px;
+            font-weight: 300;
+            color: white;
+            text-align: center;
+        }
     }
 
     &__content {
@@ -71,9 +77,22 @@ $setup-box-content-shadow: 3px 3px 20px black;
         border: 1px solid black;
         box-shadow: $setup-box-content-shadow;
 
+        p {
+            font-size: 15px;
+            color: $ax-color-gray-6;
+        }
+
+        form {
+            padding: 0 20px;
+        }
+
         &--welcome {
             width: 500px;
         }
+
+        &--forgot-password {
+            width: 500px;
+        }
     }
 
     &__title {
@@ -88,4 +107,22 @@ $setup-box-content-shadow: 3px 3px 20px black;
         line-height: 142px;
         padding-left: 220px;
     }
+
+    &__back-btn {
+        margin-bottom: 30px;
+
+        a {
+            font-size: 14px;
+            color: $ax-color-gray-6;
+
+            &:hover {
+                color: $ax-color-gray-5;
+            }
+        }
+
+        i {
+            padding-right: 2px;
+            font-size: 20px;
+        }
+    }
 }