From 8f258a2d05e21d915a91ec6c3618b289c1e3af6b Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 9 Jun 2018 00:38:55 -0400
Subject: [PATCH] frontend page styling

---
 src/app/accounts/hint.component.html     |  48 +++++------
 src/app/accounts/login.component.html    |  64 +++++++-------
 src/app/accounts/register.component.html | 103 +++++++++--------------
 src/app/layouts/navbar.component.html    |   6 +-
 src/images/logo-dark@2x.png              | Bin 0 -> 9319 bytes
 src/locales/en/messages.json             |  66 +++++++++++++++
 6 files changed, 165 insertions(+), 122 deletions(-)
 create mode 100644 src/images/logo-dark@2x.png

diff --git a/src/app/accounts/hint.component.html b/src/app/accounts/hint.component.html
index 74cd8e246b3..090942791ea 100644
--- a/src/app/accounts/hint.component.html
+++ b/src/app/accounts/hint.component.html
@@ -1,30 +1,26 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
-    <header>
-        <div class="left">
-            <a routerLink="/login">{{'cancel' | i18n}}</a>
-        </div>
-        <div class="center">
-            <span class="title">{{'passwordHint' | i18n}}</span>
-        </div>
-        <div class="right">
-            <button type="submit" appBlurClick [disabled]="form.loading">
-                <span [hidden]="form.loading">{{'submit' | i18n}}</span>
-                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading"></i>
-            </button>
-        </div>
-    </header>
-    <content>
-        <div class="box">
-            <div class="box-content">
-                <div class="box-content-row" appBoxRow>
-                    <label for="email">{{'emailAddress' | i18n}}</label>
-                    <input id="email" type="text" name="Email" [(ngModel)]="email" required appAutofocus
-                           appInputVerbatim="false">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'passwordHint' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <p>{{'enterEmailToGetHint' | i18n}}</p>
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus appInputVerbatim="false">
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block" [disabled]="form.loading" appBlurClick>
+                            <span [hidden]="form.loading">{{'submit' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                        </button>
+                        <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
                 </div>
             </div>
-            <div class="box-footer">
-                {{'enterEmailToGetHint' | i18n}}
-            </div>
         </div>
-    </content>
+    </div>
 </form>
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index 2682c0946cc..2c781ecaa65 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -1,40 +1,40 @@
-<form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
-    <div class="content">
-        <p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p>
-        <div class="box last">
-            <div class="box-content">
-                <div class="box-content-row" appBoxRow>
-                    <label for="email">{{'emailAddress' | i18n}}</label>
-                    <input id="email" type="text" name="Email" [(ngModel)]="email" required
-                           [appAutofocus]="email === ''">
-                </div>
-                <div class="box-content-row box-content-row-flex" appBoxRow>
-                    <div class="row-main">
-                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <img src="../../images/logo-dark@2x.png" class="img-fluid px-5 mb-4" alt="Bitwarden">
+            <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required [appAutofocus]="email === ''">
                     </div>
-                    <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                            <i class="fa fa-lg"
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                    <div class="form-group">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
+                                [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+                            <button type="button" class="ml-1 btn btn-link" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block" [disabled]="form.loading" appBlurClick>
+                            <span [hidden]="form.loading">
+                                <i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                        </button>
+                        <a routerLink="/register" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
                         </a>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="buttons">
-            <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
-                <b [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</b>
-                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
-            </button>
-            <a routerLink="/register" class="btn block">
-                <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
-            </a>
-        </div>
-        <div class="sub-options">
-            <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
+            <div class="mt-3 text-center">
+                <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
+            </div>
         </div>
     </div>
 </form>
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index db6f2ecfa3f..b1ae508c547 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -1,71 +1,52 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
-    <header>
-        <div class="left">
-            <a routerLink="/home">{{'cancel' | i18n}}</a>
-        </div>
-        <div class="center">
-            <span class="title">{{'createAccount' | i18n}}</span>
-        </div>
-        <div class="right">
-            <button type="submit" appBlurClick [disabled]="form.loading">
-                <span [hidden]="form.loading">{{'submit' | i18n}}</span>
-                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading"></i>
-            </button>
-        </div>
-    </header>
-    <content>
-        <div class="box">
-            <div class="box-content">
-                <div class="box-content-row" appBoxRow>
-                    <label for="email">{{'emailAddress' | i18n}}</label>
-                    <input id="email" type="text" name="Email" [(ngModel)]="email" required
-                           [appAutofocus]="email === ''" inputmode="email" appInputVerbatim="false">
-                </div>
-                <div class="box-content-row box-content-row-flex" appBoxRow>
-                    <div class="row-main">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'createAccount' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required [appAutofocus]="email === ''"
+                            inputmode="email" appInputVerbatim="false">
+                    </div>
+                    <div class="form-group">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''"
-                               appInputVerbatim>
+                        <div class="d-flex">
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
+                                [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''" appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                        <small class="form-text text-muted">{{'masterPassDesc' | i18n}}</small>
                     </div>
-                    <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
-                            <i class="fa fa-lg"
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="box-footer">
-                {{'masterPassDesc' | i18n}}
-            </div>
-        </div>
-        <div class="box last">
-            <div class="box-content">
-                <div class="box-content-row box-content-row-flex" appBoxRow>
-                    <div class="row-main">
+                    <div class="form-group">
                         <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
-                        <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
-                               name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword"
-                               required appInputVerbatim>
+                        <div class="d-flex">
+                            <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}" name="MasterPasswordRetype" class="text-monospace form-control"
+                                [(ngModel)]="confirmMasterPassword" required appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
                     </div>
-                    <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
-                            <i class="fa fa-lg"
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                    <div class="form-group">
+                        <label for="hint">{{'masterPassHint' | i18n}}</label>
+                        <input id="hint" class="form-control" type="text" name="Hint" [(ngModel)]="hint">
+                        <small class="form-text text-muted">{{'masterPassHintDesc' | i18n}}</small>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block" [disabled]="form.loading" appBlurClick>
+                            <span [hidden]="form.loading">{{'submit' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                        </button>
+                        <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
                         </a>
                     </div>
                 </div>
-                <div class="box-content-row" appBoxRow>
-                    <label for="hint">{{'masterPassHint' | i18n}}</label>
-                    <input id="hint" type="text" name="Hint" [(ngModel)]="hint">
-                </div>
-            </div>
-            <div class="box-footer">
-                {{'masterPassHintDesc' | i18n}}
             </div>
         </div>
-    </content>
+    </div>
 </form>
diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index e202ed3e28b..1cc8de8ad00 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -6,13 +6,13 @@
         <div class="collapse navbar-collapse">
             <ul class="navbar-nav">
                 <li class="nav-item" routerLinkActive="active">
-                    <a class="nav-link" routerLink="/vault">My Vault</a>
+                    <a class="nav-link" routerLink="/vault">{{'myVault' | i18n}}</a>
                 </li>
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/tools">Tools</a>
                 </li>
                 <li class="nav-item" routerLinkActive="active">
-                    <a class="nav-link" routerLink="/settings">Settings</a>
+                    <a class="nav-link" routerLink="/settings">{{'settings' | i18n}}</a>
                 </li>
             </ul>
         </div>
@@ -25,7 +25,7 @@
                     <a class="dropdown-item" href="#">Help</a>
                     <a class="dropdown-item" href="#">Get the Apps</a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#" appStopClick (click)="logOut()">Log Out</a>
+                    <a class="dropdown-item" href="#" appStopClick (click)="logOut()">{{'logOut' | i18n}}</a>
                 </div>
             </li>
         </ul>
diff --git a/src/images/logo-dark@2x.png b/src/images/logo-dark@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0266e85122961a3b817a717955639d371ad4a079
GIT binary patch
literal 9319
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
VKWf?P@}~d*002ovPDHLkV1f%#*`oje

literal 0
HcmV?d00001

diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 942eacd0078..48aa172debd 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -466,5 +466,71 @@
   },
   "no": {
     "message": "No"
+  },
+  "loginOrCreateNewAccount": {
+    "message": "Log in or create a new account to access your secure vault."
+  },
+  "createAccount": {
+    "message": "Create Account"
+  },
+  "logIn": {
+    "message": "Log In"
+  },
+  "submit": {
+    "message": "Submit"
+  },
+  "masterPass": {
+    "message": "Master Password"
+  },
+  "masterPassDesc": {
+    "message": "The master password is the password you use to access your vault. It is very important that you do not forget your master password. There is no way to recover the password in the event that you forget it."
+  },
+  "masterPassHintDesc": {
+    "message": "A master password hint can help you remember your password if you forget it."
+  },
+  "reTypeMasterPass": {
+    "message": "Re-type Master Password"
+  },
+  "masterPassHint": {
+    "message": "Master Password Hint (optional)"
+  },
+  "settings": {
+    "message": "Settings"
+  },
+  "passwordHint": {
+    "message": "Password Hint"
+  },
+  "enterEmailToGetHint": {
+    "message": "Enter your account email address to receive your master password hint."
+  },
+  "getMasterPasswordHint": {
+    "message": "Get master password hint"
+  },
+  "emailRequired": {
+    "message": "Email address is required."
+  },
+  "invalidEmail": {
+    "message": "Invalid email address."
+  },
+  "masterPassRequired": {
+    "message": "Master password is required."
+  },
+  "masterPassLength": {
+    "message": "Master password must be at least 8 characters long."
+  },
+  "masterPassDoesntMatch": {
+    "message": "Master password confirmation does not match."
+  },
+  "newAccountCreated": {
+    "message": "Your new account has been created! You may now log in."
+  },
+  "masterPassSent": {
+    "message": "We've sent you an email with your master password hint."
+  },
+  "unexpectedError": {
+    "message": "An unexpected error has occurred."
+  },
+  "emailAddress": {
+    "message": "Email Address"
   }
 }