Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-14 02:08:50 +02:00
Code Issues Projects Releases Wiki Activity

move profile to its own component

Browse Source
This commit is contained in:
Kyle Spearrin 2018-06-21 11:43:50 -04:00
parent ed65bcf185
commit e46f3073b4
5 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -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,

29
src/app/settings/account.component.html
View File

@ -1,34 +1,7 @@
<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 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>
<app-profile></app-profile>
<div class="secondary-header">
<h1>Change Email</h1>
</div>

48
src/app/settings/account.component.ts
View File

@ -1,51 +1,7 @@
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';
import { Component } from '@angular/core';
@Component({
selector: 'app-account',
templateUrl: 'account.component.html',
})
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() {
}
}
export class AccountComponent { }

28
src/app/settings/profile.component.html Normal file
View File

@ -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>

43
src/app/settings/profile.component.ts Normal file
View File

@ -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 { }
}
}