Mirrors
/
fasten-onprem
mirror of https://github.com/fastenhealth/fasten-onprem.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixing styles. 

Error handling.
This commit is contained in:
Jason Kulatunga 2024-02-14 17:15:12 -08:00
parent 017247a402
commit db893f66e1
No known key found for this signature in database
4 changed files with 109 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/models/fasten/user.ts
View File

@ -2,5 +2,6 @@ export class User {
user_id?: number
full_name?: string
username?: string
email?: string
password?: string
}

104
frontend/src/app/pages/auth-signup-wizard/auth-signup-wizard.component.html
View File

@ -12,86 +12,92 @@
<div class="outer-div">
<div class="inner-div">
<div class="az-signin-wrapper">
<div class="az-card-signin" [ngStyle]="{'height': '560px' }">
<div class="az-card-signin">
<h1 class="az-logo">fasten</h1>
<div class="az-signin-header">
<h2>Let's Get Started!</h2>
<p>Create your Fasten Health administrator account</p>
<form #userForm="ngForm">
<form (ngSubmit)="signupSubmit()" #userForm="ngForm">
<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.errors?.['required']">-->
<!-- Name is required.-->
<!-- </div>-->
<!-- <div *ngIf="full_name.errors?.['minlength']">-->
<!-- Name must be at least 2 characters long.-->
<!-- </div>-->
<!-- </div>-->
<div *ngIf="full_name.invalid && (full_name.dirty || full_name.touched)" class="alert alert-danger">
<div *ngIf="full_name.errors?.['required']">
Name is required.
</div>
<div *ngIf="full_name.errors?.['minlength']">
Name must be at least 2 characters long.
</div>
</div>
</div><!-- form-group -->
<div class="form-group">
<input name="username" required autocapitalize="none" minlength="2" type="text" class="form-control" placeholder="Username">
<!-- <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">-->
<!-- <div *ngIf="username.errors?.['required']">-->
<!-- Username is required.-->
<!-- </div>-->
<!-- <div *ngIf="username.errors?.['minlength']">-->
<!-- Username must be at least 4 characters long.-->
<!-- </div>-->
<!-- </div>-->
<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.errors?.['required']">
Username is required.
</div>
<div *ngIf="username.errors?.['minlength']">
Username must be at least 4 characters long.
</div>
</div>
</div><!-- form-group -->
<div class="form-group">
<input name="username" required autocapitalize="none" minlength="2" type="text" class="form-control" placeholder="Email">
<!-- <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">-->
<!-- <div *ngIf="username.errors?.['required']">-->
<!-- Username is required.-->
<!-- </div>-->
<!-- <div *ngIf="username.errors?.['minlength']">-->
<!-- Username must be at least 4 characters long.-->
<!-- </div>-->
<!-- </div>-->
<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="email.errors?.['required']">
Email is required.
</div>
<div *ngIf="email.errors?.['minlength']">
Email must be at least 4 characters long.
</div>
<div *ngIf="email.errors?.['email']">
Email must be a valid email address.
</div>
</div>
</div><!-- form-group -->
<div class="form-group">
<input name="password" 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.errors?.['required']">-->
<!-- Password is required.-->
<!-- </div>-->
<!-- <div *ngIf="password.errors?.['minlength']">-->
<!-- Password must be at least 8 characters long.-->
<!-- </div>-->
<!-- </div>-->
<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.errors?.['required']">
Password is required.
</div>
<div *ngIf="password.errors?.['minlength']">
Password must be at least 8 characters long.
</div>
</div>
</div><!-- form-group -->
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">
<input [(ngModel)]="newUser.agreeTerms" name="agreeTerms" #agreeTerms="ngModel" type="checkbox" class="form-check-input" id="agreeTermsCheck" required>
<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>
and <a href="https://policy.fastenhealth.com/terms.html">Terms of Service</a>
</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 class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck2">
<label class="form-check-label" for="exampleCheck2">
<input [(ngModel)]="newUser.joinMailingList" name="joinMailingList" #joinMailingList="ngModel" type="checkbox" class="form-check-input" id="joinMailingListCheck">
<label class="form-check-label" for="joinMailingListCheck">
Join Mailing List
</label>
</div>
<!-- <div *ngIf="errorMsg" class="alert alert-danger mt-3" role="alert">-->
<!-- <strong>Error</strong> {{errorMsg}}-->
<!-- </div>-->
<div *ngIf="errorMsg" class="alert alert-danger mt-3" role="alert">
<strong>Error</strong> {{errorMsg}}
</div>
</form>
</div><!-- az-signin-header -->
<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-card-signin -->

53
frontend/src/app/pages/auth-signup-wizard/auth-signup-wizard.component.ts
View File

@ -1,5 +1,17 @@
import {Component, OnInit, ViewChild} from '@angular/core';
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({
selector: 'app-auth-signup-wizard',
@ -95,9 +107,48 @@ export class AuthSignupWizardComponent implements OnInit {
"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 {
}
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)
})
}
}

2
frontend/src/assets/scss/template/_signin.scss
View File

@ -9,7 +9,7 @@
}
.az-card-signin {
height: 560px;
min-height: 560px;
padding: 20px;
display: flex;
flex-direction: column;