Skip to content

Commit

Permalink
fixing styles.
Browse files Browse the repository at this point in the history 
Error handling.
  • Loading branch information
@AnalogJ
AnalogJ committed Feb 15, 2024
1 parent 017247a commit db893f6
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 52 deletions.
1 change: 1 addition & 0 deletions frontend/src/app/models/fasten/user.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ export class User {
user_id?: number
full_name?: string
username?: string
email?: string
password?: string
}
106 changes: 56 additions & 50 deletions frontend/src/app/pages/auth-signup-wizard/auth-signup-wizard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">

<!-- <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>-->
<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><!-- 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 -->
Expand Down
53 changes: 52 additions & 1 deletion frontend/src/app/pages/auth-signup-wizard/auth-signup-wizard.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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 changes: 1 addition & 1 deletion frontend/src/assets/scss/template/_signin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

.az-card-signin {
height: 560px;
min-height: 560px;
padding: 20px;
display: flex;
flex-direction: column;
Expand Down

0 comments on commit db893f6

Please sign in to comment.