Merge pull request #62 from bitwarden/m-set-password

[SSO] Added set password flow

src/app/accounts/set-password.component.html

@@ -0,0 +1,96 @@
+<div class="container-fluid">
+    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+        <div class="row justify-content-center">
+            <div class="col-md-8 col-lg-6">
+                <div class="card d-block">
+                    <h5 class="card-header">{{'setMasterPassword' | i18n}}</h5>
+                    <div class="card-body">
+                        <app-callout type="info">{{'ssoCompleteRegistration' | i18n}}</app-callout>
+                        <div class="form-group">
+                            <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                                {{'masterPasswordPolicyInEffect' | i18n}}
+                                <ul class="mb-0">
+                                    <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                        {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                    </li>
+                                    <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                        {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                    </li>
+                                    <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                        {{'policyInEffectUppercase' | i18n}}</li>
+                                    <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                        {{'policyInEffectLowercase' | i18n}}</li>
+                                    <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                        {{'policyInEffectNumbers' | i18n}}</li>
+                                    <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                        {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                                </ul>
+                            </app-callout>
+                            <label for="masterPassword">{{'masterPass' | i18n}}
+                                <strong class="form-text d-inline-block ml-2 text-{{masterPasswordScoreColor}}"
+                                    *ngIf="masterPasswordScoreText">
+                                    {{masterPasswordScoreText}}
+                                </strong>
+                            </label>
+                            <div class="d-flex">
+                                <div class="w-100">
+                                    <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                        name="MasterPasswordHash" class="text-monospace form-control mb-1"
+                                        [(ngModel)]="masterPassword" (input)="updatePasswordStrength()" required
+                                        appInputVerbatim>
+                                    <div class="progress">
+                                        <div class="progress-bar bg-{{masterPasswordScoreColor}}" role="progressbar"
+                                            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                                            [ngStyle]="{width: (masterPasswordScoreWidth + '%')}"
+                                            attr.aria-valuenow="{{masterPasswordScoreWidth}}">
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <button type="button" class="ml-1 btn btn-link"
+                                        appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                        <i class="fa fa-lg" aria-hidden="true"
+                                            [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                    </button>
+                                    <div class="progress-bar invisible"></div>
+                                </div>
+                            </div>
+                            <small class="form-text text-muted">{{'masterPassDesc' | i18n}}</small>
+                        </div>
+                        <div class="form-group">
+                            <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                            <div class="d-flex">
+                                <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
+                                    name="MasterPasswordRetype" class="text-monospace form-control"
+                                    [(ngModel)]="masterPasswordRetype" required appInputVerbatim>
+                                <button type="button" class="ml-1 btn btn-link"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <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 btn-submit"
+                                [disabled]="form.loading">
+                                <i [hidden]="!form.loading" class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"
+                                    aria-hidden="true"></i>
+                                <span [hidden]="form.loading">{{'submit' | i18n}}</span>
+                            </button>
+                            <button type="button" class="btn btn-outline-secondary btn-block ml-2 mt-0"
+                                (click)="logOut()">
+                                {{'logOut' | i18n}}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>

src/app/accounts/set-password.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+import { Router } from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import {
+    SetPasswordComponent as BaseSetPasswordComponent,
+} from 'jslib/angular/components/set-password.component';
+
+@Component({
+    selector: 'app-set-password',
+    templateUrl: 'set-password.component.html',
+})
+export class SetPasswordComponent extends BaseSetPasswordComponent {
+    constructor(apiService: ApiService, i18nService: I18nService,
+        cryptoService: CryptoService, messagingService: MessagingService,
+        userService: UserService, passwordGenerationService: PasswordGenerationService,
+        platformUtilsService: PlatformUtilsService, policyService: PolicyService, router: Router) {
+        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
+            platformUtilsService, policyService, router, apiService);
+        super.successRoute = '/tabs/dashboard';
+    }
+
+    get masterPasswordScoreWidth() {
+        return this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
+    }
+
+    get masterPasswordScoreColor() {
+        switch (this.masterPasswordScore) {
+            case 4:
+                return 'success';
+            case 3:
+                return 'primary';
+            case 2:
+                return 'warning';
+            default:
+                return 'danger';
+        }
+    }
+
+    get masterPasswordScoreText() {
+        switch (this.masterPasswordScore) {
+            case 4:
+                return this.i18nService.t('strong');
+            case 3:
+                return this.i18nService.t('good');
+            case 2:
+                return this.i18nService.t('weak');
+            default:
+                return this.masterPasswordScore != null ? this.i18nService.t('weak') : null;
+        }
+    }
+}

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { AuthGuardService } from './services/auth-guard.service';
 import { LaunchGuardService } from './services/launch-guard.service';
 
 import { LoginComponent } from './accounts/login.component';
+import { SetPasswordComponent } from './accounts/set-password.component';
 import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { DashboardComponent } from './tabs/dashboard.component';
@@ -24,6 +25,7 @@ const routes: Routes = [
     },
     { path: '2fa', component: TwoFactorComponent },
     { path: 'sso', component: SsoComponent },
+    { path: 'set-password', component: SetPasswordComponent },
     {
         path: 'tabs',
         component: TabsComponent,

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { DashboardComponent } from './tabs/dashboard.component';
 import { MoreComponent } from './tabs/more.component';
+import { SetPasswordComponent } from './accounts/set-password.component';
 import { SettingsComponent } from './tabs/settings.component';
 import { TabsComponent } from './tabs/tabs.component';
 
@@ -72,6 +73,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         ModalComponent,
         MoreComponent,
         SearchCiphersPipe,
+        SetPasswordComponent,
         SettingsComponent,
         SsoComponent,
         StopClickDirective,

src/app/services/services.module.ts

@@ -34,6 +34,7 @@ import { CryptoService } from 'jslib/services/crypto.service';
 import { EnvironmentService } from 'jslib/services/environment.service';
 import { NodeCryptoFunctionService } from 'jslib/services/nodeCryptoFunction.service';
 import { PasswordGenerationService } from 'jslib/services/passwordGeneration.service';
+import { PolicyService } from 'jslib/services/policy.service';
 import { StateService } from 'jslib/services/state.service';
 import { TokenService } from 'jslib/services/token.service';
 import { UserService } from 'jslib/services/user.service';
@@ -51,6 +52,7 @@ import {
     PasswordGenerationService as PasswordGenerationServiceAbstraction,
 } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService as PolicyServiceAbstraction } from 'jslib/abstractions/policy.service';
 import { StateService as StateServiceAbstraction } from 'jslib/abstractions/state.service';
 import { StorageService as StorageServiceAbstraction } from 'jslib/abstractions/storage.service';
 import { TokenService as TokenServiceAbstraction } from 'jslib/abstractions/token.service';
@@ -79,6 +81,7 @@ const configurationService = new ConfigurationService(storageService, secureStor
 const syncService = new SyncService(configurationService, logService, cryptoFunctionService, apiService,
     messagingService, i18nService);
 const passwordGenerationService = new PasswordGenerationService(cryptoService, storageService, null);
+const policyService = new PolicyService(userService, storageService);
 
 const analytics = new Analytics(window, () => true, platformUtilsService, storageService, appIdService);
 containerService.attachToWindow(window);
@@ -141,6 +144,7 @@ export function initFactory(): Function {
         { provide: SyncService, useValue: syncService },
         { provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
         { provide: CryptoFunctionServiceAbstraction, useValue: cryptoFunctionService },
+        { provide: PolicyServiceAbstraction, useValue: policyService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

src/locales/en/messages.json

@@ -617,5 +617,104 @@
     },
     "enterpriseSingleSignOn": {
         "message": "Enterprise Single Sign-On"
+    },
+    "setMasterPassword": {
+        "message": "Set Master Password"
+    },
+    "ssoCompleteRegistration": {
+        "message": "In order to complete logging in with SSO, please set a master password to access and protect your vault."
+    },
+    "newMasterPass": {
+        "message": "New Master Password"
+    },
+    "confirmNewMasterPass": {
+        "message": "Confirm New Master Password"
+    },
+    "masterPasswordPolicyInEffect": {
+        "message": "One or more organization policies require your master password to meet the following requirements:"
+    },
+    "policyInEffectMinComplexity": {
+        "message": "Minimum complexity score of $SCORE$",
+        "placeholders": {
+            "score": {
+                "content": "$1",
+                "example": "4"
+            }
+        }
+    },
+    "policyInEffectMinLength": {
+        "message": "Minimum length of $LENGTH$",
+        "placeholders": {
+            "length": {
+                "content": "$1",
+                "example": "14"
+            }
+        }
+    },
+    "policyInEffectUppercase": {
+        "message": "Contain one or more uppercase characters"
+    },
+    "policyInEffectLowercase": {
+        "message": "Contain one or more lowercase characters"
+    },
+    "policyInEffectNumbers": {
+        "message": "Contain one or more numbers"
+    },
+    "policyInEffectSpecial": {
+        "message": "Contain one or more of the following special characters $CHARS$",
+        "placeholders": {
+            "chars": {
+                "content": "$1",
+                "example": "!@#$%^&*"
+            }
+        }
+    },
+    "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."
+    },
+    "reTypeMasterPass": {
+        "message": "Re-type Master Password"
+    },
+    "masterPassHint": {
+        "message": "Master Password Hint (optional)"
+    },
+    "masterPassHintDesc": {
+        "message": "A master password hint can help you remember your password if you forget it."
+    },
+    "strong": {
+        "message": "Strong",
+        "description": "ex. A strong password. Scale: Weak -> Good -> Strong"
+    },
+    "good": {
+        "message": "Good",
+        "description": "ex. A good password. Scale: Weak -> Good -> Strong"
+    },
+    "weak": {
+        "message": "Weak",
+        "description": "ex. A weak password. Scale: Weak -> Good -> Strong"
+    },
+    "weakMasterPassword": {
+        "message": "Weak Master Password"
+    },
+    "weakMasterPasswordDesc": {
+        "message": "The master password you have chosen is weak. You should use a strong master password (or a passphrase) to properly protect your Bitwarden account. Are you sure you want to use this master password?"
+    },
+    "errorOccurred": {
+        "message": "An error has occurred."
+    },
+    "error": {
+        "message": "Error"
+    },
+    "masterPassLength": {
+        "message": "Master password must be at least 8 characters long."
+    },
+    "masterPassDoesntMatch": {
+        "message": "Master password confirmation does not match."
+    },
+    "masterPasswordPolicyRequirementsNotMet": {
+        "message": "Your new master password does not meet the policy requirements."
+    },
+    "loading": {
+        "message": "Loading"
     }
 }

src/scss/bootstrap.scss

@@ -1,4 +1,4 @@
-$theme-colors: ( "primary": #175DDC, "primary-accent": #1252A3, "danger": #dd4b39, "success": #00a65a, "info": #555555, "warning": #bf7e16);
+$theme-colors: ( "primary": #175DDC, "primary-accent": #1252A3, "danger": #dd4b39, "success": #00a65a, "info": #555555, "warning": #bf7e16, "secondary": #ced4da, "secondary-alt": #1A3B66);
 $font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 $h1-font-size: 2rem;
@@ -8,4 +8,13 @@ $h4-font-size: 1rem;
 $h5-font-size: 1rem;
 $h6-font-size: 1rem;
 
+$primary: map_get($theme-colors, 'primary'); 
+$primary-accent: map_get($theme-colors, 'primary-accent'); 
+$success: map_get($theme-colors, 'success'); 
+$info: map_get($theme-colors, 'info'); 
+$warning: map_get($theme-colors, 'warning'); 
+$danger: map_get($theme-colors, 'danger'); 
+$secondary: map_get($theme-colors, 'secondary'); 
+$secondary-alt: map_get($theme-colors, 'secondary-alt'); 
+
 @import "~bootstrap/scss/bootstrap.scss";

src/scss/misc.scss

@@ -53,3 +53,68 @@ ul.testing-list {
         text-decoration: line-through;
     }
 }
+
+.callout {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #000000;
+    border-left-width: 5px;
+    border-radius: 3px;
+    border-color: #ddd;
+    background-color: white;
+
+    .callout-heading {
+        margin-top: 0;
+    }
+
+    h3.callout-heading {
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    &.callout-primary {
+        border-left-color: $primary;
+
+        .callout-heading {
+            color: $primary;
+        }
+    }
+
+    &.callout-info {
+        border-left-color: $info;
+
+        .callout-heading {
+            color: $info; 
+        }
+    }
+
+    &.callout-danger {
+        border-left-color: $danger;
+
+        .callout-heading {
+            color: $danger;
+        }
+    }
+
+    &.callout-success {
+        border-left-color: $success;
+
+        .callout-heading {
+            color: $success;
+        }
+    }
+
+    &.callout-warning {
+        border-left-color: $warning;
+
+        .callout-heading {
+            color: $warning;
+        }
+    }
+
+    ul {
+        padding-left: 40px;
+        margin: 0;
+    }
+}
+