update profile

src/app/settings/account.component.html

@@ -1,3 +1,34 @@
 <div class="page-header">
     <h1>My Account</h1>
 </div>
+<div *ngIf="loading">
+    <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>
+    <button type="submit" class="btn btn-primary" appBlurClick [disabled]="profileForm.loading">
+        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!profileForm.loading"></i>
+        {{'save' | i18n}}
+    </button>
+</form>
+<div class="secondary-header">
+    <h1>Change Email</h1>
+</div>
+<div class="secondary-header">
+    <h1>Change Master Password</h1>
+</div>

src/app/settings/account.component.ts

@@ -1,9 +1,51 @@
 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-account',
     templateUrl: 'account.component.html',
 })
-export class AccountComponent { }
+export class AccountComponent implements OnInit {
+    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/tools/password-generator.component.html

@@ -6,7 +6,6 @@
         {{password}}
     </div>
 </div>
-<h2>{{'options' | i18n}}</h2>
 <div class="row">
     <div class="form-group col-4">
         <label for="length">{{'length' | i18n}}</label>

src/locales/en/messages.json

@@ -506,6 +506,9 @@
   "masterPassHint": {
     "message": "Master Password Hint (optional)"
   },
+  "masterPassHintLabel": {
+    "message": "Master Password Hint"
+  },
   "settings": {
     "message": "Settings"
   },
@@ -752,9 +755,6 @@
   "length": {
     "message": "Length"
   },
-  "options": {
-    "message": "Options"
-  },
   "passwordHistory": {
     "message": "Password History"
   },
@@ -763,5 +763,8 @@
   },
   "clear": {
     "message": "Clear"
+  },
+  "accountUpdated": {
+    "message": "Account Updated"
   }
 }

src/scss/styles.scss

@@ -68,7 +68,7 @@ body {
     }
 }
 
-.page-header {
+.page-header, .secondary-header {
     border-bottom: 1px solid $border-color;
     padding-bottom: 0.6rem;
     margin-bottom: 0.5rem;
@@ -78,6 +78,10 @@ body {
     }
 }
 
+.secondary-header {
+    margin-top: 4rem;
+}
+
 .navbar {
     padding-left: 0;
     padding-right: 0;