diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html index 6e900c6d702..4d5edfdeacc 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 278a80f8e6e..fc858be02e5 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 00000000000..70763105168 --- /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 00000000000..33ced5b12e0 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 00000000000..2a0ba60b9b1 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 00000000000..90473167697 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 00000000000..8013df0e569 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 00000000000..9ddf755decc 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 9f9e70a656a..b4305309cb2 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 88b55e7730d..8ceb5361657 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 00000000000..2da59acc005 --- /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 a26905cad2b..2af19043a60 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 ca05d41ecec..66d2912d52e 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: [],