Skip to content

Commit

Permalink
style(package): minor
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnthonyNahas
AnthonyNahas committed Apr 10, 2019
1 parent 1063e83 commit 39bbe00
Show file tree
Hide file tree
Showing 3 changed files with 365 additions and 0 deletions.
166 changes: 166 additions & 0 deletions src/module/components/user/user.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<div *ngIf="auth.authState| async as user; then authenticated else none">

</div>

<ng-template #authenticated>
<mat-card *ngIf="auth.user | async as user">
<!--<form [formGroup]="updateFormGroup" >-->
<!--card header-->
<mat-card-header fxLayout="column" fxLayoutAlign="center center">

<img mat-card-avatar [src]="authProcess?.getUserPhotoUrl()">

<div *ngIf="user.emailVerified; then emailVerified else emailNotVerified"></div>
<ng-template #emailVerified>
<mat-icon color="primary"
matTooltip="email is verified"
matTooltipPosition="after">
verified_user
</mat-icon>
</ng-template>
<ng-template #emailNotVerified>
<mat-icon color="warn"
matTooltip="email is not verified"
matTooltipPosition="after">
warning
</mat-icon>
</ng-template>

</mat-card-header>

<!--card content-->
<mat-card-content *ngIf="editMode; then edit else readonly">
</mat-card-content>

<ng-template #edit>
<form [formGroup]="updateFormGroup" (submit)="save()">

<mat-card-content fxLayout="column" fxLayoutAlign="center center">
<div fxLayoutAlign="center">
<button mat-raised-button color="warn" class="edit-button"
(click)="changeEditMode()">
cancel
</button>
</div>

<!--name-->
<mat-form-field class="full-width" [appearance]="appearance">
<mat-label>Name</mat-label>
<input matInput
placeholder="Name"
[formControl]="updateNameFormControl"
[value]="user.displayName">
<mat-icon matSuffix>person</mat-icon>
<mat-hint align="end" aria-live="polite">
{{updateNameFormControl.value.length}} / 25
</mat-hint>
<mat-error *ngIf="updateNameFormControl.hasError('required')">
Name is required
</mat-error>
</mat-form-field>

<!--email-->
<mat-form-field class="full-width" [appearance]="appearance">
<mat-label>E-mail</mat-label>
<input matInput
placeholder="E-mail"
[formControl]="updateEmailFormControl"
[value]="user.email">
<mat-icon matSuffix>email</mat-icon>
<mat-error *ngIf="updateEmailFormControl.hasError('required')">
E-mail is required {{updateEmailFormControl.value}}
</mat-error>
<mat-error *ngIf="updateEmailFormControl.hasError('pattern')">
Please enter a valid e-mail address {{updateEmailFormControl.value}}
</mat-error>
</mat-form-field>

<!--phone number-->
<mat-form-field class="full-width" [appearance]="appearance">
<mat-label>Phone number</mat-label>
<input matInput
type="number"
placeholder="Phone number"
[formControl]="updatePhoneNumberFormControl"
[value]="user.phoneNumber">
<mat-icon matSuffix>phone</mat-icon>
<mat-hint align="end" aria-live="polite">
The phone number is international. Therefore, it should start with a + sign or 00,
followed by the country code, - and national number e.g: +49-12345678 or 0041-1234567890

NOTE : the phone number must be a valid phone credential !!
</mat-hint>
<mat-error *ngIf="updatePhoneNumberFormControl.hasError('pattern')">
Please enter a valid phone number
</mat-error>
</mat-form-field>

</mat-card-content>

<mat-card-actions fxLayout="column">
<button mat-button
color="primary"
type="submit">
Save changes
</button>
</mat-card-actions>
</form>
</ng-template>

<ng-template #readonly>
<div fxLayoutAlign="center">
<button mat-raised-button color="primary" class="edit-button"
(click)="changeEditMode()">
edit
</button>
</div>

<!--name-->
<mat-form-field class="full-width" [appearance]="appearance">
<mat-label>Name</mat-label>
<input matInput
placeholder="Name"
[value]="user.displayName"
[disabled]="!editMode">
<mat-icon matSuffix color="primary">person</mat-icon>
</mat-form-field>

<!--email-->
<mat-form-field class="full-width" [appearance]="appearance">
<mat-label>E-mail</mat-label>
<input matInput
placeholder="E-mail" [value]="user.email"
[disabled]="!editMode">
<mat-icon matSuffix color="primary">email</mat-icon>
</mat-form-field>

<!--phone number-->
<mat-form-field class="full-width" [appearance]="appearance">
<mat-label>Phone number</mat-label>
<input matInput
placeholder="Phone number"
[value]="user.phoneNumber"
[disabled]="!editMode">
<mat-icon matSuffix color="primary">phone</mat-icon>
</mat-form-field>

<mat-card-actions fxLayout="column">
<button *ngIf="canLogout" mat-button color="primary" (click)="signOut()">Sign out</button>
<button *ngIf="canDeleteAccount" mat-button color="warn" (click)="deleteAccount()">Delete account</button>
</mat-card-actions>

</ng-template>

</mat-card>

</ng-template>


<ng-template #none>
<mat-card class="none-card" fxLayout="row" fxLayoutAlign="center center">
<mat-card-content fxLayout="row" fxLayoutAlign="center center">
<mat-icon color="accent">warning</mat-icon>
<span>You are not logged in!</span>
</mat-card-content>
</mat-card>
</ng-template>
23 changes: 23 additions & 0 deletions src/module/components/user/user.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.edit-button {
margin: 1rem;
}

.full-width {
width: 100%;
}

.cut-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.none-card {
min-height: 430px;

span {
font-size: 24px;
text-align: center;
color: rgba(0, 0, 0, .54);
}
}
176 changes: 176 additions & 0 deletions src/module/components/user/user.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';
import {MatFormFieldAppearance, MatSnackBar} from '@angular/material';
import {AuthProcessService} from '../../services/auth-process.service';
import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
import {EMAIL_REGEX, PHONE_NUMBER_REGEX} from '../auth/auth.component';
import {User} from 'firebase';
import {FirestoreSyncService} from '../../services/firestore-sync.service';
import {NgxAuthFirebaseUIConfig, NgxAuthFirebaseUIConfigToken} from '../../ngx-auth-firebase-u-i.module';

@Component({
selector: 'ngx-auth-firebaseui-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
export class UserComponent {

@Input()
editMode: boolean;

@Input()
canLogout = true;

@Input()
canDeleteAccount = true;

@Input()
appearance: MatFormFieldAppearance;

@Output()
onSignOut: EventEmitter<void> = new EventEmitter();

@Output()
onAccountDeleted: EventEmitter<void> = new EventEmitter();

updateFormGroup: FormGroup;
updateNameFormControl: AbstractControl;
updateEmailFormControl: AbstractControl;
updatePhoneNumberFormControl: AbstractControl;
updatePasswordFormControl: AbstractControl;

constructor(@Inject(NgxAuthFirebaseUIConfigToken)
public config: NgxAuthFirebaseUIConfig,
public auth: AngularFireAuth,
public authProcess: AuthProcessService,
private _fireStoreService: FirestoreSyncService,
private snackBar: MatSnackBar) {
}

protected initUpdateFormGroup() {
const currentUser: User = this.auth.auth.currentUser;
this.updateFormGroup = new FormGroup({
name: this.updateNameFormControl = new FormControl(
{value: currentUser.displayName, disabled: true},
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(25),
]
),

email: this.updateEmailFormControl = new FormControl(
{value: currentUser.email, disabled: true},
[
Validators.required,
Validators.pattern(EMAIL_REGEX)
]),

phoneNumber: this.updatePhoneNumberFormControl = new FormControl('',
[Validators.pattern(PHONE_NUMBER_REGEX)])
});

this.updateFormGroup.enable();
}

changeEditMode() {
this.editMode = !this.editMode;

this.editMode ? this.initUpdateFormGroup() : this.reset();
}

reset() {
this.updateFormGroup.reset();
this.updateFormGroup.disable();
this.updateFormGroup = null;
}

// todo: 31.3.18
async save() {
if (this.updateFormGroup.dirty) {
const user = this.auth.auth.currentUser;
// user.updateProfile()
// user.updateEmail()
// console.log('form = ', this.updateFormGroup);

const snackBarMsg: string[] = [];

try {
if (this.updateNameFormControl.dirty) {
await user.updateProfile({displayName: this.updateNameFormControl.value, photoURL: null});
snackBarMsg.push(`your name has been update to ${user.displayName}`);
}

if (this.updateEmailFormControl.dirty) {
await user.updateEmail(this.updateEmailFormControl.value);
snackBarMsg.push(`your email has been update to ${user.email}`);
}

if (this.updatePhoneNumberFormControl.dirty) {
await user.updatePhoneNumber(this.updatePhoneNumberFormControl.value);
console.log('phone number = ', this.updatePhoneNumberFormControl.value);
snackBarMsg.push(`your phone number has been update to ${user.phoneNumber}`);
}

if (this.config.enableFirestoreSync) {
await this._fireStoreService.updateUserData(this.authProcess.parseUserInfo(user));
}

} catch (error) {
error.message ? this.snackBar.open(error.message, 'Ok') : this.snackBar.open(error, 'Ok');
console.error(error);
console.error(error.code);
console.error(error.message);
}


if (snackBarMsg.length > 0) {
this.snackBar.open(snackBarMsg.join('\\n'), 'Ok');
}
// this.updateFormGroup.reset();
}

this.editMode = false;
}

async signOut() {
try {
await this.auth.auth.signOut();
// Sign-out successful.
this.onSignOut.emit();
} catch (e) {
// An error happened.
console.error('An error happened while signing out!', e);
}
}

/**
* Delete the account of the current firebase user
*
* On Success, emit the <onAccountDeleted> event and toast a msg!#
* Otherwise, log the and toast and error msg!
*
*/
async deleteAccount() {
try {
const user = this.auth.auth.currentUser;

await this.authProcess.deleteAccount();
// TODO(13.02.19) @anthoynahas: error while delete user data by user id
// if (this.config.enableFirestoreSync) {
// await this._fireStoreService.deleteUserData(user.uid);
// }
this.onAccountDeleted.emit();
this.editMode = false;
this.snackBar.open('Your account has been successfully deleted!', 'OK', {
duration: 5000
})
} catch (error) {
console.log('Error while delete user\'s account', error);
this.snackBar.open('Error occurred while deleting your account!', 'OK', {
duration: 5000
})
}
}

}

0 comments on commit 39bbe00

Please sign in to comment.