diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html index 6e900c6d..4d5edfde 100644 --- a/src/app/accounts/login.component.html +++ b/src/app/accounts/login.component.html @@ -1,8 +1,35 @@ -
- -

- -

- -
+
+
+
+ bitwarden +

{{'loginOrCreateNewAccount' | i18n}}

+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ {{'getMasterPasswordHint' | i18n}} +
+ +  {{'settings' | i18n}} + +
+
+
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 278a80f8..fc858be0 100644 --- a/src/app/app-routing.module.ts +++ b/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 }, ]; diff --git a/src/images/loading.svg b/src/images/loading.svg new file mode 100644 index 00000000..70763105 --- /dev/null +++ b/src/images/loading.svg @@ -0,0 +1,6 @@ + + + Loading... + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 00000000..33ced5b1 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/logo@2x.png b/src/images/logo@2x.png new file mode 100644 index 00000000..2a0ba60b Binary files /dev/null and b/src/images/logo@2x.png differ diff --git a/src/images/logo@3x.png b/src/images/logo@3x.png new file mode 100644 index 00000000..90473167 Binary files /dev/null and b/src/images/logo@3x.png differ diff --git a/src/images/u2fkey.jpg b/src/images/u2fkey.jpg new file mode 100644 index 00000000..8013df0e Binary files /dev/null and b/src/images/u2fkey.jpg differ diff --git a/src/images/yubikey.jpg b/src/images/yubikey.jpg new file mode 100644 index 00000000..9ddf755d Binary files /dev/null and b/src/images/yubikey.jpg differ diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 9f9e70a6..b4305309 100644 --- a/src/locales/en/messages.json +++ b/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" } } diff --git a/src/scss/base.scss b/src/scss/base.scss index 88b55e77..8ceb5361 100644 --- a/src/scss/base.scss +++ b/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; diff --git a/src/scss/pages.scss b/src/scss/pages.scss new file mode 100644 index 00000000..2da59acc --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index a26905ca..2af19043 100644 --- a/src/scss/styles.scss +++ b/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"; diff --git a/webpack.renderer.js b/webpack.renderer.js index ca05d41e..66d2912d 100644 --- a/webpack.renderer.js +++ b/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: [],