styling login page

src/app/accounts/login.component.html

@@ -1,8 +1,35 @@
-<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
-    <label for="email">{{'emailAddress' | i18n}}</label>
-    <input id="email" type="text" [(ngModel)]="email" name="email" required /><br /><br />
-    <label for="master-password">{{'masterPassword' | i18n}}</label>
-    <input id="master-password" type="password" [(ngModel)]="masterPassword"
-           name="masterPassword" required /><br /><br />
-    <button type="submit">Submit</button>
-</form>
+<div id="login">
+    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
+        <div class="content">
+            <img src="../../images/logo@2x.png" alt="bitwarden">
+            <p>{{'loginOrCreateNewAccount' | i18n}}</p>
+            <div class="box">
+                <div class="box-content">
+                    <div class="box-content-row" appBoxRow>
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" type="email" name="Email" [(ngModel)]="email" required appAutofocus>
+                    </div>
+                    <div class="box-content-row" appBoxRow>
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
+                               required>
+                    </div>
+                </div>
+            </div>
+            <div class="buttons">
+                <button type="submit" class="btn primary block">
+                    <i class="fa fa-sign-in"></i> {{'logIn' | i18n}}
+                </button>
+                <button type="button" class="btn block">
+                    <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
+                </button>
+            </div>
+            <div class="sub-options">
+                <a href="#">{{'getMasterPasswordHint' | i18n}}</a>
+            </div>
+            <a href="#" class="settings-icon">
+                <i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
+            </a>
+        </div>
+    </form>
+</div>

src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import { LoginComponent } from './accounts/login.component';
 import { VaultComponent } from './vault/vault.component';
 
 const routes: Routes = [
-    { path: '', redirectTo: '/vault', pathMatch: 'full' },
+    { path: '', redirectTo: '/login', pathMatch: 'full' },
     { path: 'login', component: LoginComponent },
     { path: 'vault', component: VaultComponent },
 ];

src/images/loading.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
+  <text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+        font-size="18" text-anchor="middle">
+    Loading...
+  </text>
+</svg>

src/locales/en/messages.json

@@ -65,9 +65,6 @@
   "emailAddress": {
     "message": "Email Address"
   },
-  "masterPassword": {
-    "message": "Master Password"
-  },
   "verificationCodeTotp": {
     "message": "Verification Code (TOTP)"
   },
@@ -382,5 +379,44 @@
   },
   "deletedFolder": {
     "message": "Deleted folder"
+  },
+  "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"
   }
 }

src/scss/base.scss

@@ -8,7 +8,7 @@ html, body {
     margin: 0;
     padding: 0;
     height: 100%;
-    background-color: $background-color;
+    background-color: $background-color-alt2;
     overflow: hidden;
     font-family: $font-family-sans-serif;
     font-size: $font-size-base;
@@ -27,6 +27,17 @@ h1, h2, h3, h4, h5, h6 {
     padding: 0;
 }
 
+p {
+    margin: 0 0 10px 0;
+    padding: 0;
+}
+
+img {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
 a {
     color: $brand-primary;
     text-decoration: none;

src/scss/pages.scss

@@ -0,0 +1,68 @@
+@import "variables.scss";
+
+#login, #register {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100% + 50px);
+    margin-top: -50px;
+
+    @media (min-height: 750px) {
+        height: calc(100% + 300px);
+        margin-top: -300px;
+    }
+
+    .content {
+        max-width: 300px;
+
+        img {
+            margin: 0 auto 15px;
+            width: 282px;
+            display: block;
+        }
+
+        p {
+            font-size: $font-size-large;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .buttons {
+            display: flex;
+            margin: 15px 0 20px;
+
+            button {
+                margin-right: 10px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+
+        .sub-options {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        a.settings-icon {
+            color: #bbbbbb;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+
+            span {
+                visibility: hidden;
+            }
+
+            &:hover, &:focus {
+                color: $brand-primary;
+                text-decoration: none;
+
+                span {
+                    visibility: visible;
+                }
+            }
+        }
+    }
+}

src/scss/styles.scss

@@ -1,5 +1,6 @@
 @import "variables.scss";
 @import "base.scss";
+@import "pages.scss";
 @import "vault.scss";
 @import "list.scss";
 @import "box.scss";

webpack.renderer.js

@@ -34,6 +34,17 @@ const common = {
                 use: 'ts-loader',
                 exclude: /node_modules\/(?!(@bitwarden)\/).*/
             },
+            {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                exclude: /.*(fontawesome-webfont)\.svg/,
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name].[ext]',
+                        outputPath: 'images/',
+                    }
+                }]
+            }
         ]
     },
     plugins: [],