bastian/idp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sessionkeys entered

Browse Source
This commit is contained in:
Bastian Wagner
2024-08-25 17:54:16 +02:00
parent 328062eaa0
commit 095f33e16f
13 changed files with 294 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
idp_client/src/app/app.routes.ts
View File

@@ -1,7 +1,9 @@
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { LoginComponent } from './auth/login/login.component';
import { RegisterComponent } from './auth/register/register.component';
export const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: '', component: LoginComponent },
];

20
idp_client/src/app/login/login.component.scss → idp_client/src/app/auth/auth.scss
View File

@@ -144,6 +144,12 @@ body {
box-shadow: 0px 2px 2px #5C5696;
cursor: pointer;
transition: .2s;
&:disabled {
background: #e3e3e3;
color: grey;
pointer-events: none;
}
}
.login__submit:active,
@@ -184,4 +190,16 @@ body {
.social-login__icon:hover {
transform: scale(1.5);
}
}
.login-register {
margin-top: 24px;
color: white;
text-align: end;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}

5
idp_client/src/app/login/login.component.html → idp_client/src/app/auth/login/login.component.html
View File

@@ -11,10 +11,11 @@
<i class="login__icon fas fa-lock safe"></i>
<input type="password" formControlName="password" class="login__input" placeholder="Password">
</div>
<button class="button login__submit" (click)="login()" [disabled]="!client_id">
<button class="button login__submit" (click)="login()" [disabled]="!client_id || loginForm.invalid">
<span class="button__text">Log In Now</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
</button>
<div class="login-register" (click)="toRegister()" >Register...</div>
</form>
</div>
<div class="screen__background">

38
idp_client/src/app/login/login.component.ts → idp_client/src/app/auth/login/login.component.ts
View File

@@ -1,9 +1,9 @@
import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { environment } from '../../environments/environment';
import { environment } from '../../../environments/environment';
import { HotToastService } from '@ngxpert/hot-toast';
@Component({
@@ -11,12 +11,13 @@ import { HotToastService } from '@ngxpert/hot-toast';
standalone: true,
imports: [CommonModule, FormsModule, ReactiveFormsModule],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
styleUrl: '../auth.scss'
})
export class LoginComponent {
private http: HttpClient = inject(HttpClient);
private route: ActivatedRoute = inject(ActivatedRoute);
private toast: HotToastService = inject(HotToastService);
private router: Router = inject(Router);
redirectUri = null;
client: string = "";
@@ -29,6 +30,27 @@ export class LoginComponent {
constructor() {
this.getclient();
this.loginWithSessionId();
}
loginWithSessionId() {
const id = window.localStorage.getItem("auth_sesion_key");
if (!id ||id.length < 2) { return; }
this.toast.loading('Logging in...');
this.http.post(environment.api_url + 'auth/login-with-session-id', {
code: id,
client_id: this.client_id
}).subscribe({
next: (data) => {
if (data["code"] != null) {
location.href = this.redirectUri + "?code=" + data["code"];
}
},
error: (error) => {
console.error(error);
}
});
}
@@ -36,15 +58,11 @@ export class LoginComponent {
const params = (this.route.snapshot.queryParamMap as any)["params"];
this.redirectUri = params.redirect_uri;
this.client_id = params.client_id;
this.route.snapshot.queryParamMap.keys.forEach((key) => {
console.log(key, this.route.snapshot.queryParamMap.get(key));
});
this.http.get<any>(environment.api_url + 'auth/', {
params
}).subscribe({
next: (client) => {
console.log(client)
this.client = client.clientName;
},
error: (error) => {
@@ -55,9 +73,11 @@ export class LoginComponent {
}
login() {
this.toast.loading('Logging in...');
this.http.post(environment.api_url + 'auth/login?'+ 'client_id=' + this.client_id, this.loginForm.value).subscribe({
next: (data) => {
if (data["code"] != null) {
window.localStorage.setItem("auth_sesion_key", data["session_key"]);
location.href = this.redirectUri + "?code=" + data["code"];
}
},
@@ -67,4 +87,8 @@ export class LoginComponent {
}
})
}
toRegister() {
this.router.navigate(['/register'], { queryParams: this.route.snapshot.queryParams });
}
}

40
idp_client/src/app/auth/register/register.component.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="container">
<div class="screen">
<div class="screen__content">
<h1>{{ client }}</h1>
<form class="login" [formGroup]="registerForm" style="padding-top: 24px;" >
<div class="login__field">
<!-- <i class="login__icon fas fa-lock safe"></i> -->
<input type="text" formControlName="firstName" class="login__input" autocomplete="given-name" placeholder="Firstname">
</div>
<div class="login__field">
<!-- <i class="login__icon fas fa-lock safe"></i> -->
<input type="text" formControlName="lastName" class="login__input" autocomplete="family-name" placeholder="Lastname">
</div>
<div class="login__field">
<i class="login__icon fas fa-user user"></i>
<input formControlName="username" type="text" class="login__input" autocomplete="email" placeholder="User name / Email">
</div>
<div class="login__field">
<i class="login__icon fas fa-lock safe"></i>
<input type="password" formControlName="password" autocomplete="new-password" class="login__input" placeholder="Password">
</div>
<div class="login__field">
<i class="login__icon fas fa-lock safe"></i>
<input type="password" formControlName="repeatPassword" autocomplete="new-password" class="login__input" placeholder="Repeat password">
</div>
<button class="button login__submit" (click)="register()" [disabled]="!client_id || registerForm.invalid">
<span class="button__text">Register</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
<div class="login-register" (click)="toLogin()" >Login...</div>
</form>
</div>
<div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span>
</div>
</div>
</div>

80
idp_client/src/app/auth/register/register.component.ts Normal file
View File

@@ -0,0 +1,80 @@
import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { HotToastService } from '@ngxpert/hot-toast';
import { environment } from '../../../environments/environment';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-register',
standalone: true,
imports: [CommonModule, FormsModule, ReactiveFormsModule],
templateUrl: './register.component.html',
styleUrl: '../auth.scss'
})
export class RegisterComponent {
private http: HttpClient = inject(HttpClient);
private route: ActivatedRoute = inject(ActivatedRoute);
private toast: HotToastService = inject(HotToastService);
private router: Router = inject(Router);
redirectUri = null;
client: string = "";
client_id = null;
registerForm = new FormGroup({
username: new FormControl('', [Validators.required, Validators.email, Validators.maxLength(100)]),
password: new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]),
repeatPassword: new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]),
firstName: new FormControl('', [Validators.required, Validators.maxLength(100)]),
lastName: new FormControl('', [Validators.required, Validators.maxLength(100)]),
})
constructor() {
this.getclient();
}
getclient() {
const params = (this.route.snapshot.queryParamMap as any)["params"];
this.redirectUri = params.redirect_uri;
this.client_id = params.client_id;
this.http.get<any>(environment.api_url + 'auth/', {
params
}).subscribe({
next: (client) => {
this.client = client.clientName;
},
error: (error) => {
console.error(error);
this.toast.error('Invalid client');
}
})
}
register() {
if (this.registerForm.value.password != this.registerForm.value.repeatPassword) {
this.toast.error('Passwords do not match');
return;
}
this.http.post(environment.api_url + 'auth/register?'+ 'client_id=' + this.client_id, this.registerForm.value).pipe(
this.toast.observe({
loading: 'Registering...',
success: 'Registration successfull'
})
).subscribe({
next: () => {
this.router.navigate(['/login'], { queryParams: this.route.snapshot.queryParams });
},
error: (error) => {
console.error(error);
this.toast.error('Registration not successfull');
}
})
}
toLogin() {
this.router.navigate(['/login'], { queryParams: this.route.snapshot.queryParams });
}
}

23
idp_client/src/app/login/login.component.spec.ts
View File

@@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [LoginComponent]
})
.compileComponents();
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});