20 |
23 |
3 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/auth/login/login.component.scss:
--------------------------------------------------------------------------------
1 | .form-wrapper {
2 | @apply aa--mt-10 aa--w-10/12 md:aa--w-1/2;
3 |
4 | form {
5 | background-color: white;
6 | @apply aa--grid aa--gap-2;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/auth/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import { AsyncPipe } from '@angular/common';
2 | import { Component, inject } from '@angular/core';
3 | import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
4 | import { MatButtonModule } from '@angular/material/button';
5 | import { MatCardModule } from '@angular/material/card';
6 | import { MatFormFieldModule } from '@angular/material/form-field';
7 | import { MatInputModule } from '@angular/material/input';
8 | import { combineLatest } from 'rxjs';
9 |
10 | import { AUTH_FACADE } from '../tokens';
11 |
12 | @Component({
13 | selector: 'aa-login',
14 | imports: [
15 | AsyncPipe,
16 | MatButtonModule,
17 | MatCardModule,
18 | MatFormFieldModule,
19 | MatInputModule,
20 | ReactiveFormsModule,
21 | ],
22 | templateUrl: './login.component.html',
23 | styleUrls: ['./login.component.scss'],
24 | })
25 | export class LoginComponent {
26 | private readonly authFacade = inject(AUTH_FACADE);
27 |
28 | readonly loginForm = new FormGroup({
29 | username: new FormControl('', {
30 | validators: [Validators.required],
31 | nonNullable: true,
32 | }),
33 | password: new FormControl('', {
34 | validators: [Validators.required],
35 | nonNullable: true,
36 | }),
37 | });
38 |
39 | readonly vm$ = combineLatest({
40 | isLoading: this.authFacade.isLoadingLogin$,
41 | showLoginError: this.authFacade.hasLoginError$,
42 | });
43 |
44 | submit() {
45 | const { username, password } = this.loginForm.value;
46 | this.authFacade.login(username as string, password as string);
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/auth/models/auth-facade.model.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs';
2 |
3 | import { AuthUser } from './auth-user.model';
4 |
5 | export interface IAuthFacade {
6 | readonly authUser$: Observable
4 |
10 |
11 |
36 |
37 |
38 |
39 | 5 | Login 6 | your account 7 |
8 | 9 |3 | Hello 4 | ng 5 | Friends! 6 |
7 | 8 |9 | I'm 10 | Nikos Anifantis 11 | , thanks for visiting this repository. 12 |
13 | 14 |Nothing special here, I just wanted to say hi! 👋
15 |Support ❤️🙏
19 | 20 |
21 |
27 |
41 |
4 |
5 |
39 |
8 |
33 |
34 |
35 | 9 | Angular 10 | Authentication 11 |
12 |13 | An 14 | Angular 15 | application that demonstrates best practices for user 16 | authentication 17 | & 18 | authorization 19 | flows. 20 |
21 |
22 |
28 | Source Code
29 |
32 |
36 | 
37 |
38 |
37 | Features
45 |46 | This repository uses state-of-the-art features for web development. 47 |
48 | 49 |
50 | @for (feature of features(); track $index) {
51 |
52 |
53 | {{ feature.name }}
54 |
55 |
56 |
57 |
59 |
60 |
61 | @if (feature.link) {
62 |
70 |
100 |
101 | }
102 |
103 |
104 | {{ feature.description }}
58 |
105 |
108 |
109 | 4 | {{ currentTime() | greeting }}, 5 | 6 | {{ vm.authUser?.firstName }} {{ vm.authUser?.lastName }} 7 | 8 |
9 | 10 |11 | Shhh... 🤫 - This is a 12 | top secret 13 | feature! 14 |
15 |Users
19 | 20 |
23 | Note that we expose users' credentials for
24 | demonstration purposes
25 | only! Feel free to logout and login again using one of the following accounts.
26 |
27 |
28 | | Id | 32 |{{ user.id }} | 33 |Full Name | 38 |39 | {{ user.firstName }} {{ user.lastName }} 40 | | 41 |Username | 46 |{{ user.username }} | 47 |Password | 52 |{{ user.password }} | 53 |
|---|
3 |
4 |
5 | 
6 |
7 | Angular Authentication
8 | Auth
9 |
10 |
11 |
12 |
13 |
14 |
28 |
29 |
30 |
31 |
6 |
7 | Angular Authentication
8 | Auth
9 |
10 |
11 |
12 |
13 |
14 |
28 |
29 |
32 | @if (authUser; as user) {
33 |
40 |
43 |
47 |
48 | } @else {
49 |
50 |
67 |