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 user_id?: number
full_name?: string full_name?: string
username?: string username?: string
email?: string
password?: 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="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 -->

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

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

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