Skip to content

Commit 700e70c

Browse files
TommiCodesTommiCodes
committed
5: update scss
1 parent fe75d0d commit 700e70c

File tree

8 files changed

+125
-48
lines changed

8 files changed

+125
-48
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# angular-material-login-and-register-example
22

3+
Link to Youtube-Video: tbd
4+
35
## How to run
46
First run `npm i` and then `ng serve`, then you can open localhost:4200 in your Browser
57

‎src/app/app.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
77
import { HttpClientModule } from '@angular/common/http';
8+
import { MatSnackBarModule } from '@angular/material/snack-bar';
89

910
import { JwtModule } from '@auth0/angular-jwt';
1011

@@ -26,6 +27,8 @@ export function tokenGetter() {
2627
BrowserAnimationsModule,
2728
HttpClientModule,
2829

30+
MatSnackBarModule,
31+
2932
JwtModule.forRoot({
3033
config: {
3134
tokenGetter: tokenGetter,

‎src/app/public/components/login/login.component.scss‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,31 @@
44
margin: 100px 0px;
55
}
66

7-
.mat-form-field {
8-
width: 100%;
9-
min-width: 300px;
10-
}
7+
mat-card {
8+
max-width: 600px;
119

12-
mat-card-title,
13-
mat-card-content {
14-
display: flex;
15-
justify-content: center;
16-
}
10+
mat-card-title,
11+
mat-card-content {
12+
display: flex;
13+
justify-content: center;
1714

18-
.error {
19-
padding: 16px;
20-
width: 300px;
21-
color: white;
22-
background-color: red;
23-
}
15+
form {
16+
.mat-form-field {
17+
width: 100%;
18+
min-width: 300px;
19+
}
2420

25-
.button {
26-
display: flex;
27-
justify-content: flex-end;
21+
.error {
22+
padding: 16px;
23+
width: 300px;
24+
color: white;
25+
background-color: red;
26+
}
27+
28+
.button {
29+
display: flex;
30+
justify-content: flex-end;
31+
}
32+
}
33+
}
2834
}

‎src/app/public/components/login/login.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export class LoginComponent {
2626
return;
2727
}
2828
this.authService.login(this.loginForm.value).pipe(
29-
tap(() => console.log('ASD')),
29+
// route to protected/dashboard, if login was successfull
3030
tap(() => this.router.navigate(['../../protected/dashboard']))
3131
).subscribe();
3232
}

‎src/app/public/components/register/register.component.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<mat-card>
22
<mat-card-title>Register</mat-card-title>
3+
34
<mat-card-content>
45
<form [formGroup]="registerForm" (ngSubmit)="register()">
6+
57
<mat-form-field>
68
<input type="email" matInput placeholder="Email" formControlName="email">
79
<!-- Here we can display error messages/hints for the user, if one of the Validators adds an error to the email
@@ -13,18 +15,48 @@
1315
Email must be a valid Email</mat-error>
1416
</mat-form-field>
1517

18+
<mat-form-field>
19+
<input type="text" matInput placeholder="Username" formControlName="username">
20+
<mat-error
21+
*ngIf="this.registerForm.get('username')?.touched && this.registerForm.get('username')?.hasError('required')">
22+
Username is required</mat-error>
23+
</mat-form-field>
24+
25+
<mat-form-field>
26+
<input type="text" matInput placeholder="First Name" formControlName="firstname">
27+
<mat-error
28+
*ngIf="this.registerForm.get('firstname')?.touched && this.registerForm.get('firstname')?.hasError('required')">
29+
First Name is required</mat-error>
30+
</mat-form-field>
31+
32+
<mat-form-field>
33+
<input type="text" matInput placeholder="Last Name" formControlName="lastname">
34+
<mat-error
35+
*ngIf="this.registerForm.get('lastname')?.touched && this.registerForm.get('lastname')?.hasError('required')">
36+
Last Name is required</mat-error>
37+
</mat-form-field>
38+
39+
1640
<mat-form-field>
1741
<input type="password" matInput placeholder="Password" formControlName="password">
1842
<mat-error
1943
*ngIf="this.registerForm.get('password')?.touched && this.registerForm.get('password')?.hasError('required')">
2044
Password is required</mat-error>
2145
</mat-form-field>
2246

47+
<mat-form-field>
48+
<input type="password" matInput placeholder="Password Confirmation" formControlName="passwordConfirm">
49+
<mat-error
50+
*ngIf="this.registerForm.get('passwordConfirm')?.touched && this.registerForm.get('passwordConfirm')?.hasError('required')">
51+
Password Confirmation is required</mat-error>
52+
</mat-form-field>
53+
2354
<div class="button">
2455
<!-- Button is disabled(not clickable), if our RegisterForm contains Validation Errors -->
2556
<button type="submit" mat-button [disabled]="!registerForm.valid">Register</button>
2657
</div>
2758

2859
</form>
2960
</mat-card-content>
61+
3062
</mat-card>

‎src/app/public/components/register/register.component.scss‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,31 @@
44
margin: 100px 0px;
55
}
66

7-
.mat-form-field {
8-
width: 100%;
9-
min-width: 300px;
10-
}
7+
mat-card {
8+
max-width: 600px;
119

12-
mat-card-title,
13-
mat-card-content {
14-
display: flex;
15-
justify-content: center;
16-
}
10+
mat-card-title,
11+
mat-card-content {
12+
display: flex;
13+
justify-content: center;
1714

18-
.error {
19-
padding: 16px;
20-
width: 300px;
21-
color: white;
22-
background-color: red;
23-
}
15+
form {
16+
.mat-form-field {
17+
width: 100%;
18+
min-width: 300px;
19+
}
2420

25-
.button {
26-
display: flex;
27-
justify-content: flex-end;
28-
}
21+
.error {
22+
padding: 16px;
23+
width: 300px;
24+
color: white;
25+
background-color: red;
26+
}
27+
28+
.button {
29+
display: flex;
30+
justify-content: flex-end;
31+
}
32+
}
33+
}
34+
}

‎src/app/public/components/register/register.component.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
22
import { Component, OnInit } from '@angular/core';
33
import { CustomValidators } from '../../custom-validator';
44
import { AuthService } from '../../services/auth-service/auth.service';
5+
import { tap } from 'rxjs';
6+
import { Router } from '@angular/router';
57

68
@Component({
79
selector: 'app-register',
810
templateUrl: './register.component.html',
911
styleUrls: ['./register.component.scss']
1012
})
11-
export class RegisterComponent implements OnInit {
13+
export class RegisterComponent {
1214

1315
registerForm = new FormGroup({
1416
email: new FormControl(null, [Validators.required, Validators.email]),
@@ -23,12 +25,18 @@ export class RegisterComponent implements OnInit {
2325
)
2426

2527
constructor(
28+
private router: Router,
2629
private authService: AuthService
2730
) { }
2831

29-
ngOnInit(): void {
32+
register() {
33+
if (!this.registerForm.valid) {
34+
return;
35+
}
36+
this.authService.register(this.registerForm.value).pipe(
37+
// If registration was successfull, then navigate to login route
38+
tap(() => this.router.navigate(['../login']))
39+
).subscribe();
3040
}
3141

32-
register() { }
33-
3442
}

‎src/app/public/services/auth-service/auth.service.ts‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
33
import { Injectable } from '@angular/core';
44
import { map, Observable, of, switchMap, tap } from 'rxjs';
55
import { JwtHelperService } from '@auth0/angular-jwt';
6+
import { MatSnackBar } from '@angular/material/snack-bar';
67

78
export interface RefreshToken {
89
id: number;
@@ -24,7 +25,11 @@ export interface LoginRequest {
2425
}
2526

2627
export interface RegisterRequest {
27-
28+
email: string;
29+
username: string;
30+
firstname: string;
31+
lastname: string;
32+
password: string;
2833
}
2934

3035
export interface RegisterResponse {
@@ -47,7 +52,7 @@ export const fakeLoginResponse: LoginResponse = {
4752

4853
export const fakeRegisterResponse: RegisterResponse = {
4954
status: 200,
50-
message: 'Register sucessfull.'
55+
message: 'Registration sucessfull.'
5156
}
5257

5358

@@ -58,6 +63,7 @@ export class AuthService {
5863

5964
constructor(
6065
private http: HttpClient,
66+
private snackbar: MatSnackBar,
6167
private jwtService: JwtHelperService
6268
) { }
6369

@@ -70,10 +76,16 @@ export class AuthService {
7076
*/
7177
login(loginRequest: LoginRequest): Observable<LoginResponse> {
7278
return of(fakeLoginResponse).pipe(
73-
tap((res: LoginResponse) => localStorage.setItem(LOCALSTORAGE_TOKEN_KEY, res.accessToken))
79+
tap((res: LoginResponse) => localStorage.setItem(LOCALSTORAGE_TOKEN_KEY, res.accessToken)),
80+
tap(() => this.snackbar.open('Login Successfull', 'Close', {
81+
duration: 2000, horizontalPosition: 'right', verticalPosition: 'top'
82+
}))
7483
);
7584
// return this.http.post<LoginResponse>('/api/auth/login', loginRequest).pipe(
76-
// tap((res: LoginResponse) => localStorage.setItem(LOCALSTORAGE_TOKEN_KEY, res.accessToken))
85+
// tap((res: LoginResponse) => localStorage.setItem(LOCALSTORAGE_TOKEN_KEY, res.accessToken)),
86+
// tap(() => this.snackbar.open('Login Successfull', 'Close', {
87+
// duration: 2000, horizontalPosition: 'right', verticalPosition: 'top'
88+
// }))
7789
// );
7890
}
7991

@@ -82,8 +94,16 @@ export class AuthService {
8294
*/
8395
register(registerRequest: RegisterRequest): Observable<RegisterResponse> {
8496
// TODO
85-
return of(fakeRegisterResponse);
86-
// return this.http.post<RegisterResponse>('/api/auth/register', registerRequest);
97+
return of(fakeRegisterResponse).pipe(
98+
tap((res: RegisterResponse) => this.snackbar.open(`User created successfully`, 'Close', {
99+
duration: 2000, horizontalPosition: 'right', verticalPosition: 'top'
100+
})),
101+
);
102+
// return this.http.post<RegisterResponse>('/api/auth/register', registerRequest).pipe(
103+
// tap((res: RegisterResponse) => this.snackbar.open(`User created successfully`, 'Close', {
104+
// duration: 2000, horizontalPosition: 'right', verticalPosition: 'top'
105+
// }))
106+
// )
87107
}
88108

89109
/*

0 commit comments

Comments
 (0)