Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 195eb47

Browse files
Authentication workflow updated
1 parent bf449c1 commit 195eb47

23 files changed

+392
-26
lines changed

‎angular-x-spring-security/src/app/app-routing.module.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { RegisterComponent } from './authentication/pages/register/register.comp
55
import { ProtectedComponentComponent } from './components/protected-component/protected-component.component';
66
import { AuthenticationGuard } from './authentication/guards/authentication.guard';
77
import { ActivateAccountComponent } from './authentication/pages/activate-account/activate-account.component';
8+
import { ForgotPasswordComponent } from './authentication/pages/forgot-password/forgot-password.component';
9+
import { UpdatePasswordComponent } from './authentication/pages/update-password/update-password.component';
10+
import { ValidateAccountCodeComponent } from './authentication/pages/validate-account-code/validate-account-code.component';
811

912
const routes: Routes = [
1013
{
@@ -23,6 +26,18 @@ const routes: Routes = [
2326
path: 'activate-account',
2427
component: ActivateAccountComponent
2528
},
29+
{
30+
path: 'validation-code',
31+
component: ValidateAccountCodeComponent
32+
},
33+
{
34+
path: 'forgot-password',
35+
component: ForgotPasswordComponent
36+
},
37+
{
38+
path: 'modify-password',
39+
component: UpdatePasswordComponent
40+
},
2641
{
2742
path: 'protected-data',
2843
component: ProtectedComponentComponent,

‎angular-x-spring-security/src/app/authentication/authentication.module.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,20 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
66
import { RouterModule } from '@angular/router';
77
import { HttpClientModule } from '@angular/common/http';
88
import { ActivateAccountComponent } from './pages/activate-account/activate-account.component';
9+
import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component';
10+
import { UpdatePasswordComponent } from './pages/update-password/update-password.component';
11+
import { ValidateAccountCodeComponent } from './pages/validate-account-code/validate-account-code.component';
912

1013

1114

1215
@NgModule({
1316
declarations: [
1417
LoginComponent,
1518
RegisterComponent,
16-
ActivateAccountComponent
19+
ActivateAccountComponent,
20+
ForgotPasswordComponent,
21+
UpdatePasswordComponent,
22+
ValidateAccountCodeComponent
1723
],
1824
imports: [
1925
CommonModule,

‎angular-x-spring-security/src/app/authentication/interceptors/authentication.interceptor.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export class AuthenticationInterceptor implements HttpInterceptor {
1515
constructor(private authenticationService:AuthenticationService, private router:Router) {}
1616

1717
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
18+
if (request.url.includes('/accessible')) {
19+
return next.handle(request);
20+
}
21+
1822
const accessToken = localStorage.getItem('access_token');
1923
const refreshToken = localStorage.getItem('refresh_token');
2024

@@ -50,9 +54,7 @@ private handleTokenRefresh(request: HttpRequest<any>, next: HttpHandler): Observ
5054
return next.handle(request);
5155
}),
5256
catchError(error => {
53-
// Handle refresh token expiry
5457
if (error.status === 401) {
55-
// Redirect to login page or handle logout
5658
this.authenticationService.logout().subscribe((success)=>{
5759
this.router.navigate(['/login'])
5860
});

‎angular-x-spring-security/src/app/authentication/pages/activate-account/activate-account.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
<div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
77
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
88
<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
9-
Validate your account
9+
Enter the code
1010
</h1>
1111
<form [formGroup]="accountValidationForm" class="space-y-4 md:space-y-6">
1212
<div>
13-
<label for="validation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
13+
<label for="validation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Validation code</label>
1414
<input type="text" name="validationCode" id="validationCode" formControlName="validationCode" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="XXXXXX" required="">
1515
<small style="color: red;" *ngIf="validationCodeControl?.touched && validationCodeControl?.hasError('required')">This field is required</small>
1616
</div>
17-
<button type="submit" (click)="onActivateAccount()" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
17+
<button type="submit" [disabled]="accountValidationForm.invalid" (click)="onActivateAccount()" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
1818
</form>
1919
</div>
2020
</div>

‎angular-x-spring-security/src/app/authentication/pages/activate-account/activate-account.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
22
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
33
import { Router } from '@angular/router';
44
import { AuthenticationService } from '../../services/authentication.service';
5+
import { initFlowbite } from 'flowbite';
56

67
@Component({
78
selector: 'app-activate-account',
@@ -15,6 +16,7 @@ export class ActivateAccountComponent implements OnInit{
1516
constructor(private formBuilder:FormBuilder, private authenticationService:AuthenticationService, private router:Router){}
1617

1718
ngOnInit(): void {
19+
initFlowbite()
1820
this.initializeValidationForm()
1921
}
2022

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<section class="bg-gray-50 dark:bg-gray-900">
2+
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
3+
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
4+
Angular X SpringSecurity
5+
</a>
6+
<div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
7+
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
8+
<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
9+
Enter your email
10+
</h1>
11+
<form [formGroup]="accountPasswordForgottenForm" class="space-y-4 md:space-y-6">
12+
<div>
13+
<label for="validation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
14+
<input type="text" name="email" id="email" formControlName="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="codeblox@codeblox.com" required="">
15+
<small style="color: red;" *ngIf="emailControl?.touched && emailControl?.hasError('required')">This field is required</small>
16+
<small style="color: red;" *ngIf="emailControl?.touched && emailControl?.hasError('pattern')">This field is required</small>
17+
</div>
18+
<button type="submit" [disabled]="accountPasswordForgottenForm.invalid" (click)="onSendValidationCode()" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Send</button>
19+
</form>
20+
</div>
21+
</div>
22+
</div>
23+
</section>
24+

‎angular-x-spring-security/src/app/authentication/pages/forgot-password/forgot-password.component.scss

Whitespace-only changes.
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ForgotPasswordComponent } from './forgot-password.component';
4+
5+
describe('ForgotPasswordComponent', () => {
6+
let component: ForgotPasswordComponent;
7+
let fixture: ComponentFixture<ForgotPasswordComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ ForgotPasswordComponent ]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(ForgotPasswordComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3+
import { Router } from '@angular/router';
4+
import { initFlowbite } from 'flowbite';
5+
import { AuthenticationService } from '../../services/authentication.service';
6+
7+
@Component({
8+
selector: 'app-forgot-password',
9+
templateUrl: './forgot-password.component.html',
10+
styleUrls: ['./forgot-password.component.scss']
11+
})
12+
export class ForgotPasswordComponent implements OnInit{
13+
14+
accountPasswordForgottenForm!:FormGroup;
15+
16+
constructor(private formBuilder:FormBuilder, private authenticationService:AuthenticationService, private router:Router){}
17+
18+
ngOnInit(): void {
19+
initFlowbite()
20+
this.initializePasswordForgottenForm()
21+
}
22+
23+
initializePasswordForgottenForm(){
24+
this.accountPasswordForgottenForm = this.formBuilder.group({
25+
email: [null, [Validators.required, Validators.pattern('^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$')]]
26+
})
27+
}
28+
29+
get emailControl(){
30+
return this.accountPasswordForgottenForm.get('email');
31+
}
32+
33+
onSendValidationCode(){
34+
let email = {
35+
email: this.accountPasswordForgottenForm.get('email')?.value
36+
}
37+
this.authenticationService.forgotPassword(email).subscribe((data)=>{
38+
alert('Email sent !')
39+
this.accountPasswordForgottenForm.reset();
40+
this.router.navigate(['validation-code']);
41+
},
42+
(error)=>{
43+
console.log(error, "dfffffffff");
44+
this.accountPasswordForgottenForm.reset();
45+
})
46+
}
47+
48+
}

‎angular-x-spring-security/src/app/authentication/pages/login/login.component.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,21 @@ <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-
1717
</div>
1818
<div>
1919
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
20-
<input type="password" name="password" id="password" formControlName="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
20+
<input type="{{ hidePassword ? 'password' : 'text' }}" name="password" id="password" formControlName="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
2121
<small style="color: red;" *ngIf="passwordControl?.touched && passwordControl?.hasError('required')">This field is required</small>
2222
</div>
2323
<div class="flex items-center justify-between">
2424
<div class="flex items-start">
25-
<!-- <div >
26-
<input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
25+
<div class="flex items-center h-5">
26+
<input id="remember" aria-describedby="remember" (change)="togglePasswordVisibility()" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
2727
</div>
2828
<div class="ml-3 text-sm">
29-
<label for="remember" class="text-gray-500 dark:text-gray-300">Remember me</label>
30-
</div> -->
31-
<a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Forgot password?</a>
29+
<label for="remember" class="text-gray-500 dark:text-gray-300">Show password</label>
30+
</div>
3231
</div>
32+
<a [routerLink]="'/forgot-password'" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Forgot password?</a>
3333
</div>
34-
<button type="submit" (click)="onLogin()" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
34+
<button type="submit" (click)="onLogin()" [disabled]="loginForm.invalid" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
3535
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
3636
Don’t have an account yet? <a [routerLink]="'/register'" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Sign up</a>
3737
</p>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /