parent
017247a402
commit
db893f66e1
|
@ -2,5 +2,6 @@ export class User {
|
||||||
user_id?: number
|
user_id?: number
|
||||||
full_name?: string
|
full_name?: string
|
||||||
username?: string
|
username?: string
|
||||||
|
email?: string
|
||||||
password?: string
|
password?: string
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,86 +12,92 @@
|
||||||
<div class="outer-div">
|
<div class="outer-div">
|
||||||
<div class="inner-div">
|
<div class="inner-div">
|
||||||
<div class="az-signin-wrapper">
|
<div class="az-signin-wrapper">
|
||||||
<div class="az-card-signin" [ngStyle]="{'height': '560px' }">
|
<div class="az-card-signin">
|
||||||
<h1 class="az-logo">fasten</h1>
|
<h1 class="az-logo">fasten</h1>
|
||||||
<div class="az-signin-header">
|
<div class="az-signin-header">
|
||||||
<h2>Let's Get Started!</h2>
|
<h2>Let's Get Started!</h2>
|
||||||
<p>Create your Fasten Health administrator account</p>
|
<p>Create your Fasten Health administrator account</p>
|
||||||
|
|
||||||
<form #userForm="ngForm">
|
<form (ngSubmit)="signupSubmit()" #userForm="ngForm">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input name="full_name" required minlength="2" type="text" class="form-control" placeholder="Name">
|
<input [(ngModel)]="newUser.full_name" name="full_name" #full_name="ngModel" required minlength="2" type="text" class="form-control" placeholder="Name">
|
||||||
|
|
||||||
<!-- <div *ngIf="full_name.invalid && (full_name.dirty || full_name.touched)" class="alert alert-danger">-->
|
<div *ngIf="full_name.invalid && (full_name.dirty || full_name.touched)" class="alert alert-danger">
|
||||||
<!-- <div *ngIf="full_name.errors?.['required']">-->
|
<div *ngIf="full_name.errors?.['required']">
|
||||||
<!-- Name is required.-->
|
Name is required.
|
||||||
<!-- </div>-->
|
</div>
|
||||||
<!-- <div *ngIf="full_name.errors?.['minlength']">-->
|
<div *ngIf="full_name.errors?.['minlength']">
|
||||||
<!-- Name must be at least 2 characters long.-->
|
Name must be at least 2 characters long.
|
||||||
<!-- </div>-->
|
</div>
|
||||||
<!-- </div>-->
|
</div>
|
||||||
</div><!-- form-group -->
|
</div><!-- form-group -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input name="username" required autocapitalize="none" minlength="2" type="text" class="form-control" placeholder="Username">
|
<input [(ngModel)]="newUser.username" name="username" #username="ngModel" required minlength="4" type="text" class="form-control" autocapitalize="none" placeholder="Username">
|
||||||
|
<div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
|
||||||
<!-- <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">-->
|
<div *ngIf="username.errors?.['required']">
|
||||||
<!-- <div *ngIf="username.errors?.['required']">-->
|
Username is required.
|
||||||
<!-- Username is required.-->
|
</div>
|
||||||
<!-- </div>-->
|
<div *ngIf="username.errors?.['minlength']">
|
||||||
<!-- <div *ngIf="username.errors?.['minlength']">-->
|
Username must be at least 4 characters long.
|
||||||
<!-- Username must be at least 4 characters long.-->
|
</div>
|
||||||
<!-- </div>-->
|
</div>
|
||||||
<!-- </div>-->
|
|
||||||
</div><!-- form-group -->
|
</div><!-- form-group -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input name="username" required autocapitalize="none" minlength="2" type="text" class="form-control" placeholder="Email">
|
<input [(ngModel)]="newUser.email" name="email" #email="ngModel" required email minlength="4" type="email" class="form-control" autocapitalize="none" placeholder="Email Address">
|
||||||
|
<div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
|
||||||
<!-- <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">-->
|
<div *ngIf="email.errors?.['required']">
|
||||||
<!-- <div *ngIf="username.errors?.['required']">-->
|
Email is required.
|
||||||
<!-- Username is required.-->
|
</div>
|
||||||
<!-- </div>-->
|
<div *ngIf="email.errors?.['minlength']">
|
||||||
<!-- <div *ngIf="username.errors?.['minlength']">-->
|
Email must be at least 4 characters long.
|
||||||
<!-- Username must be at least 4 characters long.-->
|
</div>
|
||||||
<!-- </div>-->
|
<div *ngIf="email.errors?.['email']">
|
||||||
<!-- </div>-->
|
Email must be a valid email address.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div><!-- form-group -->
|
</div><!-- form-group -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input name="password" required minlength="8" type="password" class="form-control" placeholder="Password">
|
<input [(ngModel)]="newUser.password" name="password" #password="ngModel" required minlength="8" type="password" class="form-control" placeholder="Password">
|
||||||
|
<div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
|
||||||
<!-- <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">-->
|
<div *ngIf="password.errors?.['required']">
|
||||||
<!-- <div *ngIf="password.errors?.['required']">-->
|
Password is required.
|
||||||
<!-- Password is required.-->
|
</div>
|
||||||
<!-- </div>-->
|
<div *ngIf="password.errors?.['minlength']">
|
||||||
<!-- <div *ngIf="password.errors?.['minlength']">-->
|
Password must be at least 8 characters long.
|
||||||
<!-- Password must be at least 8 characters long.-->
|
</div>
|
||||||
<!-- </div>-->
|
</div>
|
||||||
<!-- </div>-->
|
|
||||||
</div><!-- form-group -->
|
</div><!-- form-group -->
|
||||||
|
|
||||||
<div class="form-group form-check">
|
<div class="form-group form-check">
|
||||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
<input [(ngModel)]="newUser.agreeTerms" name="agreeTerms" #agreeTerms="ngModel" type="checkbox" class="form-check-input" id="agreeTermsCheck" required>
|
||||||
<label class="form-check-label" for="exampleCheck1">
|
<label class="form-check-label" for="agreeTermsCheck">
|
||||||
I have read and agree to the Fasten Health <br/> <a href="https://policy.fastenhealth.com/privacy_policy.html">Privacy Policy</a>
|
I have read and agree to the Fasten Health <br/> <a href="https://policy.fastenhealth.com/privacy_policy.html">Privacy Policy</a>
|
||||||
and <a href="https://policy.fastenhealth.com/terms.html">Terms of Service</a>
|
and <a href="https://policy.fastenhealth.com/terms.html">Terms of Service</a>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<div *ngIf="agreeTerms.invalid && (agreeTerms.dirty || agreeTerms.touched)" class="alert alert-danger">
|
||||||
|
<div *ngIf="agreeTerms.errors?.['required']">
|
||||||
|
You must agree to the Privacy Policy and Terms of Use.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group form-check">
|
<div class="form-group form-check">
|
||||||
<input type="checkbox" class="form-check-input" id="exampleCheck2">
|
<input [(ngModel)]="newUser.joinMailingList" name="joinMailingList" #joinMailingList="ngModel" type="checkbox" class="form-check-input" id="joinMailingListCheck">
|
||||||
<label class="form-check-label" for="exampleCheck2">
|
<label class="form-check-label" for="joinMailingListCheck">
|
||||||
Join Mailing List
|
Join Mailing List
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div *ngIf="errorMsg" class="alert alert-danger mt-3" role="alert">-->
|
<div *ngIf="errorMsg" class="alert alert-danger mt-3" role="alert">
|
||||||
<!-- <strong>Error</strong> {{errorMsg}}-->
|
<strong>Error</strong> {{errorMsg}}
|
||||||
<!-- </div>-->
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div><!-- az-signin-header -->
|
</div><!-- az-signin-header -->
|
||||||
<div class="az-signin-footer">
|
<div class="az-signin-footer">
|
||||||
<button type="submit" class="btn btn-az-primary btn-block">Create Account</button>
|
<button [disabled]="!userForm.form.valid || loading" type="submit" class="btn btn-az-primary btn-block">Create Account</button>
|
||||||
|
|
||||||
</div><!-- az-signin-footer -->
|
</div><!-- az-signin-footer -->
|
||||||
</div><!-- az-card-signin -->
|
</div><!-- az-card-signin -->
|
||||||
|
|
|
@ -1,5 +1,17 @@
|
||||||
import {Component, OnInit, ViewChild} from '@angular/core';
|
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||||
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
|
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
|
||||||
|
import {User} from '../../models/fasten/user';
|
||||||
|
import {AuthService} from '../../services/auth.service';
|
||||||
|
import {Router} from '@angular/router';
|
||||||
|
import {ToastService} from '../../services/toast.service';
|
||||||
|
import {ToastNotification, ToastType} from '../../models/fasten/toast';
|
||||||
|
|
||||||
|
class UserWizard extends User {
|
||||||
|
passwordConfirm: string = ""
|
||||||
|
agreeTerms: boolean = false
|
||||||
|
joinMailingList: boolean = true
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-auth-signup-wizard',
|
selector: 'app-auth-signup-wizard',
|
||||||
|
@ -95,9 +107,48 @@ export class AuthSignupWizardComponent implements OnInit {
|
||||||
"b53ff282-4725-45f7-a436-89f77320f062.png",
|
"b53ff282-4725-45f7-a436-89f77320f062.png",
|
||||||
]
|
]
|
||||||
|
|
||||||
constructor() { }
|
loading: boolean = false
|
||||||
|
|
||||||
|
submitted: boolean = false
|
||||||
|
newUser: UserWizard = new UserWizard()
|
||||||
|
errorMsg: string = ""
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private authService: AuthService,
|
||||||
|
private router: Router,
|
||||||
|
private toastService: ToastService
|
||||||
|
) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
signupSubmit(){
|
||||||
|
this.loading = true
|
||||||
|
this.submitted = true;
|
||||||
|
|
||||||
|
this.authService.Signup(this.newUser).then((tokenResp: any) => {
|
||||||
|
this.loading = false
|
||||||
|
console.log(tokenResp);
|
||||||
|
this.router.navigateByUrl('/dashboard');
|
||||||
|
},
|
||||||
|
(err)=>{
|
||||||
|
this.loading = false
|
||||||
|
console.error("an error occured while signup",err)
|
||||||
|
if(err.name === 'conflict') {
|
||||||
|
// "batman" already exists, choose another username
|
||||||
|
this.errorMsg = "username already exists"
|
||||||
|
} else if (err.name === 'forbidden') {
|
||||||
|
// invalid username
|
||||||
|
this.errorMsg = "invalid username"
|
||||||
|
} else {
|
||||||
|
this.errorMsg = "an unknown error occurred during sign-up"
|
||||||
|
}
|
||||||
|
|
||||||
|
const toastNotificaiton = new ToastNotification()
|
||||||
|
toastNotificaiton.type = ToastType.Error
|
||||||
|
toastNotificaiton.message = this.errorMsg
|
||||||
|
this.toastService.show(toastNotificaiton)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.az-card-signin {
|
.az-card-signin {
|
||||||
height: 560px;
|
min-height: 560px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
Loading…
Reference in New Issue