move profile to its own component

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
 import { AccountComponent } from './settings/account.component';
+import { ProfileComponent } from './settings/profile.component';
 import { SettingsComponent } from './settings/settings.component';
 
 import { ExportComponent } from './tools/export.component';
@@ -116,6 +117,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         OrganizationLayoutComponent,
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
+        ProfileComponent,
         RegisterComponent,
         SearchCiphersPipe,
         SettingsComponent,

src/app/settings/account.component.html

@@ -1,34 +1,7 @@
 <div class="page-header">
     <h1>My Account</h1>
 </div>
-<div *ngIf="loading">
+<app-profile></app-profile>
-    <i class="fa fa-spinner fa-spin text-muted"></i>
-</div>
-<form *ngIf="profile && !loading" #profileForm (ngSubmit)="submit()" [appApiAction]="submitPromise">
-    <div class="row">
-        <div class="col-6">
-            <div class="form-group">
-                <label for="name">{{'name' | i18n}}</label>
-                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="profile.name">
-            </div>
-            <div class="form-group">
-                <label for="email">{{'email' | i18n}}</label>
-                <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="profile.email" readonly>
-            </div>
-            <div class="form-group">
-                <label for="masterPasswordHint">{{'masterPassHintLabel' | i18n}}</label>
-                <input id="masterPasswordHint" class="form-control" type="text" name="MasterPasswordHint" [(ngModel)]="profile.masterPasswordHint">
-            </div>
-        </div>
-        <div class="col-6">
-            <app-avatar data="{{profile.name || profile.email}}" dynamic="true" width="75" height="75" fontSize="35"></app-avatar>
-        </div>
-    </div>
-    <button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="profileForm.loading">
-        <i class="fa fa-spinner fa-spin"></i>
-        <span>{{'save' | i18n}}</span>
-    </button>
-</form>
 <div class="secondary-header">
     <h1>Change Email</h1>
 </div>

src/app/settings/account.component.ts

@@ -1,51 +1,7 @@
-import {
+import { Component } from '@angular/core';
-    Component,
-    OnInit,
-} from '@angular/core';
-
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-
-import { UpdateProfileRequest } from 'jslib/models/request/updateProfileRequest';
-
-import { ProfileResponse } from 'jslib/models/response/profileResponse';
 
 @Component({
     selector: 'app-account',
     templateUrl: 'account.component.html',
 })
-export class AccountComponent implements OnInit {
+export class AccountComponent { }
-    loading = true;
-    profile: ProfileResponse;
-
-    submitPromise: Promise<any>;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService, ) { }
-
-    async ngOnInit() {
-        this.profile = await this.apiService.getProfile();
-        this.loading = false;
-    }
-
-    async submit() {
-        try {
-            const request = new UpdateProfileRequest(this.profile.name, this.profile.masterPasswordHint);
-            this.submitPromise = this.apiService.putProfile(request);
-            await this.submitPromise;
-            this.analytics.eventTrack.next({ action: 'Updated Profile' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('accountUpdated'));
-        } catch { }
-    }
-
-    changePassword() {
-
-    }
-
-    changeEmail() {
-
-    }
-}

src/app/settings/profile.component.html

@@ -0,0 +1,28 @@
+<div *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted"></i>
+</div>
+<form *ngIf="profile && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <div class="row">
+        <div class="col-6">
+            <div class="form-group">
+                <label for="name">{{'name' | i18n}}</label>
+                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="profile.name">
+            </div>
+            <div class="form-group">
+                <label for="email">{{'email' | i18n}}</label>
+                <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="profile.email" readonly>
+            </div>
+            <div class="form-group">
+                <label for="masterPasswordHint">{{'masterPassHintLabel' | i18n}}</label>
+                <input id="masterPasswordHint" class="form-control" type="text" name="MasterPasswordHint" [(ngModel)]="profile.masterPasswordHint">
+            </div>
+        </div>
+        <div class="col-6">
+            <app-avatar data="{{profile.name || profile.email}}" dynamic="true" width="75" height="75" fontSize="35"></app-avatar>
+        </div>
+    </div>
+    <button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="form.loading">
+        <i class="fa fa-spinner fa-spin"></i>
+        <span>{{'save' | i18n}}</span>
+    </button>
+</form>

src/app/settings/profile.component.ts

@@ -0,0 +1,43 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { UpdateProfileRequest } from 'jslib/models/request/updateProfileRequest';
+
+import { ProfileResponse } from 'jslib/models/response/profileResponse';
+
+@Component({
+    selector: 'app-profile',
+    templateUrl: 'profile.component.html',
+})
+export class ProfileComponent implements OnInit {
+    loading = true;
+    profile: ProfileResponse;
+
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) { }
+
+    async ngOnInit() {
+        this.profile = await this.apiService.getProfile();
+        this.loading = false;
+    }
+
+    async submit() {
+        try {
+            const request = new UpdateProfileRequest(this.profile.name, this.profile.masterPasswordHint);
+            this.formPromise = this.apiService.putProfile(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Updated Profile' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('accountUpdated'));
+        } catch { }
+    }
+}