Initial commit of set password flow

scripts/notarize.js

@@ -2,6 +2,7 @@ require('dotenv').config();
 const { notarize } = require('electron-notarize');
 
 exports.default = async function notarizing(context) {
+    return;
     const { electronPlatformName, appOutDir } = context;
     if (electronPlatformName !== 'darwin') {
         return;

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

@@ -0,0 +1,105 @@
+<form id="set-password-page" #form>
+    <div class="content">
+        <img class="logo-image" alt="Bitwarden">
+        <p class="lead">{{'setMasterPassword' | i18n}}</p>
+        <div class="box">
+            <app-callout type="tip">{{'ssoCompleteRegistration' | i18n}}</app-callout>
+            <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                {{'masterPasswordPolicyInEffect' | i18n}}
+                <ul>
+                    <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>
+        </div>
+        <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+            <div class="box">
+                <div class="box-content">
+                    <div class="box-content-row" appBoxRow>
+                        <div class="box-content-row-flex">
+                            <div class="row-main">
+                                <label for="masterPassword">{{'masterPass' | i18n}}
+                                    <strong class="sub-label text-{{masterPasswordScoreColor}}"
+                                        *ngIf="masterPasswordScoreText">
+                                        {{masterPasswordScoreText}}
+                                    </strong>
+                                </label>
+                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                    name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
+                                    (input)="updatePasswordStrength()" appInputVerbatim>
+                            </div>
+                            <div class="action-buttons">
+                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <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>
+                <div class="box-footer">
+                    {{'masterPassDesc' | i18n}}
+                </div>
+            </div>
+            <div class="box">
+                <div class="box-content">
+                    <div class="box-content-row" appBoxRow>
+                        <div class="box-content-row-flex">
+                            <div class="row-main">
+                                <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                                <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"
+                                    class="monospaced" [(ngModel)]="masterPasswordRetype" required appInputVerbatim
+                                    autocomplete="new-password">
+                            </div>
+                            <div class="action-buttons">
+                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="box last">
+                <div class="box-content">
+                    <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>
+            <div class="buttons">
+                <button type="submit" class="btn primary block" [disabled]="form.loading">
+                    <i *ngIf="form.loading" class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"
+                        aria-hidden="true"></i>
+                    <span>{{'submit' | i18n}}</span>
+                </button>
+                <button class="btn block" (click)="logOut()">
+                    <span>{{'logOut' | i18n}}</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</form>

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

@@ -0,0 +1,68 @@
+import { Component } from '@angular/core';
+
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { FolderService } from 'jslib/abstractions/folder.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 { SyncService } from 'jslib/abstractions/sync.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, folderService: FolderService,
+        cipherService: CipherService, syncService: SyncService,
+        policyService: PolicyService, router: Router, route: ActivatedRoute) {
+        super(apiService, i18nService, cryptoService, messagingService, userService, passwordGenerationService,
+            platformUtilsService, folderService, cipherService, syncService, policyService, router, route);
+    }
+
+    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,