old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implementation of Better Error Handling on SignUp

Browse Source
This commit is contained in:
Vitor Hideyoshi
2023-08-01 01:22:48 -03:00
parent 0b9b648861
commit 3cca992db3
5 changed files with 185 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/app/header/header-popup/signup/signup.component.html
View File

@@ -1,73 +1,85 @@
<app-popup [state]="state"
(stateChange)="onStateChange($event)"
(stateChange)="onStateChange($event)"
[ignoreClickOutside]="ignoreClickOutside">
{{errorMessage}}
<div class="container authentication-container">
<div class="row">
<div class="col-lg-6 auth-body auth-body-form">
<form [formGroup]="signupForm" (ngSubmit)="onSignUp()">
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_fullnameIcon">
</fa-icon>
<input type="text" id="fullname"
formControlName="fullname"
class="form-control"
placeholder="Full Name">
</div>
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_emailIcon">
</fa-icon>
<input type="text" id="email"
formControlName="email"
class="form-control"
placeholder="Email">
</div>
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_userIcon">
</fa-icon>
<input type="text" id="username"
formControlName="username"
class="form-control"
placeholder="Username">
</div>
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_passwordIcon">
</fa-icon>
<input type="password" id="password"
formControlName="password"
class="form-control"
placeholder="Password">
</div>
<button class="btn"
type="submit">
SignUp
<div class="container m-0 overflow-hidden"
[@resizeContainerForErrorMessage]="hideErrorMessage()">
<app-error-box [errorMessage]="errorMessage"
[@showErrorMessage]="showErrorMessage()">
</app-error-box>
<div class="container authentication-container"
[@hideAuthContainer]="hideErrorMessage()"
(@hideAuthContainer.done)="hideAuthContainer($event)">
<div class="row">
<div class="col-lg-6 auth-body auth-body-form">
<form [formGroup]="signupForm" (ngSubmit)="onSignUp()">
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_fullnameIcon">
</fa-icon>
<input type="text" id="fullname"
formControlName="fullname"
class="form-control"
placeholder="Full Name">
</div>
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_emailIcon">
</fa-icon>
<input type="text" id="email"
formControlName="email"
class="form-control"
placeholder="Email">
</div>
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_userIcon">
</fa-icon>
<input type="text" id="username"
formControlName="username"
class="form-control"
placeholder="Username">
</div>
<div class="input-div">
<fa-icon class="input-div-icon"
[icon]="_passwordIcon">
</fa-icon>
<input type="password" id="password"
formControlName="password"
class="form-control"
placeholder="Password">
</div>
<button class="btn"
type="submit">
SignUp
</button>
</form>
</div>
<div class="separator-line">
<div class="line"></div>
</div>
<div class="col-lg-6 auth-body auth-body-links">
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGoogleLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="google-logo"></mat-icon>
Login With Google
</button>
</form>
</div>
<div class="separator-line">
<div class="line"></div>
</div>
<div class="col-lg-6 auth-body auth-body-links">
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGoogleLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="google-logo"></mat-icon>
Login With Google
</button>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGithubLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="github-logo"></mat-icon>
Login With Github
</button>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGithubLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="github-logo"></mat-icon>
Login With Github
</button>
</div>
</div>
</div>
</div>
</app-popup>
</app-popup>