Commit aba3496f authored by vtduong0912's avatar vtduong0912

update

parent a0c87f85
export namespace Login {
export type Response = {
user: {
username: string,
role: string,
},
accessToken: string,
token: string,
expirationTime: number,
role: string
};
export type Request = {
......
......@@ -5,30 +5,36 @@
>
<form nz-form [formGroup]="signInFormGroup">
<nz-form-item>
<nz-form-control>
<nz-input-group>
<nz-form-control nzErrorTip="Please input your username!">
<nz-input-group class="tw-h-12">
<input
type="text"
nz-input
id="username_input"
placeholder="Username"
class="tw-h-10 tw-text-sm tw-rounded-md"
class="tw-text-sm tw-rounded-md"
formControlName="username"
/>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<nz-input-group>
<nz-form-control nzErrorTip="Please input your password!">
<nz-input-group [nzSuffix]="suffixTemplate" class="tw-h-12">
<input
type="password"
nz-input
id="password_input"
[type]="passwordVisible ? 'text' : 'password'"
placeholder="Password"
class="tw-h-10 tw-text-sm tw-rounded-md"
class="tw-text-sm tw-rounded-md"
formControlName="password"
/>
<ng-template #suffixTemplate>
<span
nz-icon
[nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
(click)="passwordVisible = !passwordVisible"
></span>
</ng-template>
</nz-input-group>
</nz-form-control>
</nz-form-item>
......@@ -37,9 +43,7 @@
</div>
<nz-form-item>
<nz-form-control>
<label nz-checkbox
>Remember me</label
>
<label nz-checkbox>Remember me</label>
</nz-form-control>
</nz-form-item>
<div></div>
......
......@@ -36,51 +36,59 @@ import { Router } from '@angular/router';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoginComponent implements OnInit {
errorMsg?: string;
passwordVisible: boolean = false;
errorMsg: string = "";
signInFormGroup!: FormGroup;
// isEdit: boolean = false;
constructor(
private _formBuilder: FormBuilder,
private _fb: FormBuilder,
private _authService: AuthService,
private _changeDetectorRef: ChangeDetectorRef,
private _router: Router
) {}
) {
this.signInFormGroup = this._fb.group({
username: ['', [Validators.required, validateUsername]],
password: ['', Validators.required],
});
}
ngOnInit(): void {
this.signInFormGroup = this._formBuilder.group({
username: [null, [Validators.required, validateUsername]],
password: [null, Validators.required],
});
}
onLogin() {
const data = this.signInFormGroup.value;
if (!this.signInFormGroup.valid) {
Object.values(this.signInFormGroup.controls).forEach(control => {
if (control.invalid) {
control.markAsDirty();
control.updateValueAndValidity({ onlySelf: true });
}
});
return;
}
this.signInFormGroup.markAllAsTouched();
this._authService.loginPost(data)
.pipe(
tap((response: ResponseResult<Login.Response>) => {
this.onSuccess(response);
}),
catchError((error: ResponseResult<any>) => {
this.onError(error);
return of(null);
})
)
.subscribe();
.pipe(
tap((response: ResponseResult<Login.Response>) => {
this.onSuccess(response);
}),
catchError((error: ResponseResult<any>) => {
this.onError(error);
return of(null);
})
)
.subscribe();
}
onSuccess(response: ResponseResult<Login.Response>) {
localStorage.setItem("token", JSON.stringify(response.responseData?.accessToken) ?? "");
localStorage.setItem("role", JSON.stringify(response.responseData?.user.role) ?? "");
localStorage.setItem("token", JSON.stringify(response.responseData?.token) ?? "");
localStorage.setItem("role", JSON.stringify(response.responseData?.role) ?? "");
this._router.navigate(['/home']);
}
onError(error: ResponseResult<any>) {
if (error.status === 401) {
this.errorMsg = "Invalid username or password!";
} else {
this.errorMsg = "An error has occurred! Please try later.";
}
this.errorMsg = "Invalid username or password!";
this._changeDetectorRef.markForCheck();
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment