src/app/pages/signup-page/signup-page.component.ts
Signup page component
| selector | app-signup-page |
| styleUrls | signup-page.component.scss |
| templateUrl | ./signup-page.component.html |
Properties |
|
Methods |
constructor(auth: FirebaseAuthService, afs: FirebaseFirestoreService, router: Router, formBuilder: FormBuilder)
|
||||||||||||||||||||
|
Constructor
Parameters :
|
| checkphotographerUrl |
checkphotographerUrl()
|
|
check if photographer url is already taken
Returns :
void
|
| loginWithFacebook |
loginWithFacebook()
|
|
Signup with Facebook
Returns :
void
|
| loginWithGoogle |
loginWithGoogle()
|
|
Signup with Google
Returns :
void
|
| loginWithTwitter |
loginWithTwitter()
|
|
Signup with Twitter
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initi component
Returns :
void
|
| signupWithCredentials |
signupWithCredentials()
|
|
Signup with credentials
Returns :
void
|
| switchForms |
switchForms()
|
|
Switch between signup forms
Returns :
void
|
| updateUser |
updateUser()
|
|
Update user in firestore
Returns :
void
|
| Public error |
error:
|
Type : literal type
|
Default value : {
name: '',
message: '',
code: ''
}
|
|
firebase error |
| formPhotographer |
formPhotographer:
|
Type : TemplateRef<any>
|
Decorators : ViewChild
|
|
signup as photographer form ref |
| formUser |
formUser:
|
Type : TemplateRef<any>
|
Decorators : ViewChild
|
|
signup as user form ref |
| Private log |
log:
|
Default value : Log.create('SignupPageComponent')
|
|
Logger |
| Public photographerUrlAvailable |
photographerUrlAvailable:
|
Type : boolean
|
|
available photographer url |
| Public signupForm |
signupForm:
|
Type : FormGroup
|
|
signup form |
| Public template |
template:
|
Type : TemplateRef<any>
|
|
template ref |
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Log } from 'ng2-logger';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';
/**
* Signup page component
* @author Daniel Sogl
*/
@Component({
selector: 'app-signup-page',
templateUrl: './signup-page.component.html',
styleUrls: ['./signup-page.component.scss']
})
export class SignupPageComponent implements OnInit {
/** Logger */
private log = Log.create('SignupPageComponent');
/** available photographer url */
public photographerUrlAvailable: boolean;
/** signup form */
public signupForm: FormGroup;
/** template ref */
public template: TemplateRef<any>;
/** firebase error */
public error: { name: string; message: string; code: string } = {
name: '',
message: '',
code: ''
};
/** signup as user form ref */
@ViewChild('formUser') formUser: TemplateRef<any>;
/** signup as photographer form ref */
@ViewChild('formPhotographer') formPhotographer: TemplateRef<any>;
/**
* Constructor
* @param {FirebaseAuthService} auth FirebaseAuthService
* @param {FirebaseFirestoreService} afs FirebaseFirestoreService
* @param {Router} router Router
* @param {FormBuilder} formBuilder FormBuilder
*/
constructor(
private auth: FirebaseAuthService,
private afs: FirebaseFirestoreService,
private router: Router,
private formBuilder: FormBuilder
) {
// Signup form
this.signupForm = this.formBuilder.group({
email: ['', Validators.email],
photographerUrl: [''],
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
});
}
/** Initi component */
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
this.template = this.formUser;
}
/** Switch between signup forms */
switchForms() {
this.signupForm.clearValidators();
if (this.template === this.formUser) {
this.template = this.formPhotographer;
} else {
this.template = this.formUser;
}
}
/** check if photographer url is already taken */
checkphotographerUrl() {
if (this.signupForm.value.photographerUrl) {
this.afs
.checkDisplayname(this.signupForm.value.photographerUrl)
.valueChanges()
.subscribe(photographerUrl => {
if (photographerUrl) {
this.log.er(
`The URL ${
this.signupForm.value.photographerUrl
} is not available`
);
this.photographerUrlAvailable = false;
} else {
this.log.d(
`The URL ${this.signupForm.value.photographerUrl} is available`
);
this.photographerUrlAvailable = true;
}
});
}
}
/** Signup with credentials */
signupWithCredentials() {
if (this.signupForm.valid) {
this.auth
.register(this.signupForm.value.email, this.signupForm.value.password)
.then(() => {
this.log.d('Singed in with Email and password');
this.updateUser();
})
.catch(err => {
this.error = err;
this.log.er('error', err);
});
}
}
/** Signup with Google */
loginWithGoogle() {
this.auth
.signInWithGoogle()
.then(() => {
this.log.d('Singed in with Google');
this.updateUser();
})
.catch(err => {
this.error = err;
this.log.er('error', err);
});
}
/** Signup with Facebook */
loginWithFacebook() {
this.auth
.signInWithFacebook()
.then(() => {
this.log.d('Singed in with Facebook');
this.updateUser();
})
.catch(err => {
this.error = err;
this.log.er('error', err);
});
}
/** Signup with Twitter */
loginWithTwitter() {
this.auth
.signInWithTwitter()
.then(() => {
this.log.d('Singed in with twitter');
this.updateUser();
})
.catch(err => {
this.error = err;
this.log.er('error', err);
});
}
/** Update user in firestore */
updateUser() {
if (this.template === this.formPhotographer) {
this.auth.user.subscribe(user => {
user.roles = {
photographer: true,
user: false,
admin: false
};
user.photographerUrl = this.signupForm.value.photographerUrl;
user.subscription = {
membership: 'free',
status: 'valid',
premium: false
};
this.afs.getPhotographerProfile(user.uid).set({
about: '',
email: user.email,
facebook: '',
instagram: '',
name: '',
phone: '',
tumbler: '',
twitter: '',
uid: user.uid,
website: '',
photoUrl: user.photoUrl,
profileUrl: user.photographerUrl,
premium: false,
location: {
lat: 0,
lng: 0
}
});
this.afs.updateUserData(user).then(() => {
this.router.navigate(['dashboard']);
});
});
} else {
this.auth.user.subscribe(user => {
user.subscription = {
membership: 'user',
status: 'valid',
premium: false
};
this.afs.updateUserData(user).then(() => {
this.router.navigate(['dashboard']);
});
});
}
}
}
<div class="row mt-5 pt-5">
<div class="col align-self-start"></div>
<div class="col align-self-center">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
<div class="col align-self-end"></div>
</div>
<!-- Form for the user -->
<ng-template #formUser>
<div class="card" style="width: 24rem">
<div class="card-body mx-4">
<!--Header-->
<div class="text-center">
<h3 class="dark-grey-text mb-5">
<strong id="page_title">{{ 'LABELS.SIGNUP_AS_USER' | translate }}</strong>
</h3>
</div>
<!--Body-->
<form [formGroup]="signupForm" (ngSubmit)="signupWithCredentials()">
<div class="md-form">
<input mdbActive type="text" class="form-control" formControlName="email" id="input_email" [class.is-valid]="!signupForm.controls.email.errors"
[class.is-invalid]="signupForm.controls.email.errors">
<label>{{ 'INPUTS.USER_EMAIL' | translate }}</label>
<div class="invalid-feedback" *ngIf="signupForm.controls.email.errors">
{{ 'TEXTS.PROVIDE_VALID_EMAIL' | translate }}
</div>
</div>
<div class="md-form">
<input mdbActive type="password" class="form-control" formControlName="password" id="input_password" [class.is-valid]="!signupForm.controls.password.errors"
[class.is-invalid]="signupForm.controls.password.errors">
<label>{{ 'INPUTS.USER_PASSWORD' | translate }}</label>
<div class="invalid-feedback" *ngIf="signupForm.controls.password.errors">
{{ 'TEXTS.PROVIDE_VALID_PASSWORD' | translate }}
</div>
</div>
<div class="md-form">
<input mdbActive type="password" class="form-control" formControlName="confirmPassword" id="input_password_repeat" [class.is-valid]="!signupForm.controls.confirmPassword.errors"
[class.is-invalid]="signupForm.controls.confirmPassword.errors">
<label>{{ 'INPUTS.CONFIRM_PASSWORD' | translate }}</label>
<p1 class="text-danger" *ngIf="error.code">{{ ('FIREBASE_ERRORS.' + error.code) | translate }}
<br>
</p1>
<p class="font-small blue-text d-flex justify-content-end" data-toggle="modal" data-target="#basicExample" id="p_open_reset_modal">
<a class="blue-text ml-1" (click)="switchForms()">{{ 'LABELS.SIGNUP_AS_PHOTOGRAPHER' | translate }}</a>
</p>
</div>
<div class="text-center mb-3">
<button type="submit" [disabled]="!signupForm.valid" class="btn pink btn-lg btn-block" id="button_login">{{ 'LABELS.SIGN_UP' | translate }}</button>
</div>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> {{ 'LABELS.SIGN_UP_WITH' | translate }}
</p>
</form>
<div class="row my-3 d-flex justify-content-center">
<!--Facebook-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a waves-effect waves-light" (click)="loginWithFacebook()"
id="button_login_with_facebook">
<i class="fa fa-facebook pink-text text-center"></i>
</button>
<!--Twitter-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a waves-effect waves-light" (click)="loginWithTwitter()"
id="button_login_with_twitter">
<i class="fa fa-twitter pink-text"></i>
</button>
<!--Google +-->
<button type="button" class="btn btn-white btn-rounded z-depth-1a waves-effect waves-light" (click)="loginWithGoogle()" id="button_login_with_google">
<i class="fa fa-google-plus pink-text"></i>
</button>
</div>
</div>
</div>
</ng-template>
<!-- Form for photographs -->
<ng-template #formPhotographer>
<div class="card" style="width: 24rem">
<div class="card-body mx-4">
<!--Header-->
<div class="text-center">
<h4 class="dark-grey-text mb-5">
<strong id="page_title">{{ 'LABELS.SIGNUP_AS_PHOTOGRAPHER' | translate }}</strong>
</h4>
</div>
<!--Body-->
<form [formGroup]="signupForm" (ngSubmit)="signupWithCredentials()">
<div class="md-form">
<input mdbActive type="text" class="form-control" formControlName="email" id="input_email" [class.is-valid]="!signupForm.controls.email.errors"
[class.is-invalid]="signupForm.controls.email.errors">
<label>{{ 'INPUTS.USER_EMAIL' | translate }}</label>
<div class="invalid-feedback" *ngIf="signupForm.controls.email.errors">
{{ 'TEXTS.PROVIDE_VALID_EMAIL' | translate }}
</div>
</div>
<div class="md-form">
<input mdbActive type="text" class="form-control" formControlName="photographerUrl" id="input_photographerUrl" (keyup)="checkphotographerUrl()"
[class.is-valid]="!signupForm.controls.photographerUrl.errors" [class.is-invalid]="signupForm.controls.photographerUrl.errors">
<label>{{ 'INPUTS.PROFILE_URL' | translate }}</label>
<div class="invalid-feedback" *ngIf="signupForm.controls.photographerUrl.errors">
{{ 'TEXTS.PROVIDE_VALID_URL' | translate }}
</div>
</div>
<div class="md-form">
<input mdbActive type="password" class="form-control" formControlName="password" id="input_password" [class.is-valid]="!signupForm.controls.password.errors"
[class.is-invalid]="signupForm.controls.password.errors">
<label>{{ 'INPUTS.USER_PASSWORD' | translate }}</label>
<div class="invalid-feedback" *ngIf="signupForm.controls.password.errors">
{{ 'TEXTS.PROVIDE_VALID_PASSWORD' | translate }}
</div>
</div>
<div class="md-form">
<input mdbActive type="password" class="form-control" formControlName="confirmPassword" id="input_password">
<label>{{ 'INPUTS.CONFIRM_PASSWORD' | translate }}</label>
<p class="font-small blue-text d-flex justify-content-end" data-toggle="modal" data-target="#basicExample" id="p_open_reset_modal"
(click)="switchForms()">
<a class="blue-text ml-1">{{ 'LABELS.SIGNUP_AS_USER' | translate }}</a>
</p>
<p1 class="text-danger" *ngIf="error.code">{{ ('FIREBASE_ERRORS.' + error.code) | translate }}</p1>
</div>
<div class="text-center mb-3">
<button type="submit" [disabled]="!signupForm.valid && !photographerUrlAvailable" [disabled]="" class="btn pink btn-lg btn-block"
id="button_login">{{ 'LABELS.SIGN_UP' | translate }}</button>
</div>
</form>
</div>
</div>
</ng-template>