_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

add oidc form login

Browse Source
This commit is contained in:
_Bastler 2022-12-27 20:41:59 +01:00
parent 92a74e72f9
commit 31af132d13
5 changed files with 288 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

534
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

36
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "we-bstly-angular", "name": "we-bstly-angular",
"version": "2.1.0", "version": "2.1.1",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
@ -13,35 +13,35 @@
"dependencies": { "dependencies": {
"@angular-material-components/datetime-picker": "^9.0.0", "@angular-material-components/datetime-picker": "^9.0.0",
"@angular-material-components/moment-adapter": "^9.0.0", "@angular-material-components/moment-adapter": "^9.0.0",
"@angular/animations": "^15.0.3", "@angular/animations": "^15.0.4",
"@angular/cdk": "^15.0.2", "@angular/cdk": "^15.0.3",
"@angular/common": "^15.0.3", "@angular/common": "^15.0.4",
"@angular/compiler": "^15.0.3", "@angular/compiler": "^15.0.4",
"@angular/core": "^15.0.3", "@angular/core": "^15.0.4",
"@angular/forms": "^15.0.3", "@angular/forms": "^15.0.4",
"@angular/material": "^15.0.2", "@angular/material": "^15.0.3",
"@angular/material-moment-adapter": "^15.0.2", "@angular/material-moment-adapter": "^15.0.3",
"@angular/platform-browser": "^15.0.3", "@angular/platform-browser": "^15.0.4",
"@angular/platform-browser-dynamic": "^15.0.3", "@angular/platform-browser-dynamic": "^15.0.4",
"@angular/router": "^15.0.3", "@angular/router": "^15.0.4",
"moment": "^2.29.4", "moment": "^2.29.4",
"ng-qrcode": "^8.0.1", "ng-qrcode": "^8.0.1",
"ngx-mat-timepicker": "^15.1.2", "ngx-mat-timepicker": "^15.1.2",
"openpgp": "^5.5.0", "openpgp": "^5.5.0",
"qr-scanner": "^1.4.2", "qr-scanner": "^1.4.2",
"rxjs": "~7.6.0", "rxjs": "~7.8.0",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"unique-names-generator": "^4.7.1", "unique-names-generator": "^4.7.1",
"zone.js": "~0.12.0" "zone.js": "~0.12.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^15.0.3", "@angular-devkit/build-angular": "^15.0.4",
"@angular/cli": "^15.0.3", "@angular/cli": "^15.0.4",
"@angular/compiler-cli": "^15.0.3", "@angular/compiler-cli": "^15.0.4",
"@angular/localize": "^15.0.3", "@angular/localize": "^15.0.4",
"@types/jasmine": "^4.3.1", "@types/jasmine": "^4.3.1",
"@types/jasminewd2": "^2.0.10", "@types/jasminewd2": "^2.0.10",
"@types/node": "^18.11.12", "@types/node": "^18.11.16",
"@types/openpgp": "^4.4.18", "@types/openpgp": "^4.4.18",
"jasmine-core": "~4.5.0", "jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~7.0.0", "jasmine-spec-reporter": "~7.0.0",

33
src/app/pages/form-login-oidc/form-login-oidc.component.html
View File

@ -1,31 +1,38 @@
<form [formGroup]="form" action="{{apiUrl}}/oidc/authorize" method="POST"> <form [formGroup]="form" action="{{apiUrl}}/oidc/authorize" method="POST" #odicLoginForm>
<mat-card> <mat-card>
<mat-card-content> <mat-card-content>
<h2>{{'security.oidc.login' | i18n}}</h2> <h2>{{'security.oidc' | i18n}}</h2>
<mat-error *ngIf="loginInvalid"> <mat-error *ngIf="loginInvalid">
{{'security.oidc.login.invalid' | i18n}} {{'security.oidc.login.invalid' | i18n}}
</mat-error> </mat-error>
<input id="code" name="code" type="hidden" formControlName="code" required> <input id="code" name="code" type="hidden" formControlName="code" required>
<input id="state" name="state" type="hidden" formControlName="state" required> <input id="state" name="state" type="hidden" formControlName="state" required>
<input id="client_id" name="client_id" type="hidden" formControlName="client_id" required> <input id="client_id" name="client_id" type="hidden" formControlName="client_id" required>
<input id="responseType" name="responseType" type="hidden" formControlName="responseType" required> <input id="response_type" name="response_type" type="hidden" formControlName="response_type" required>
<input id="redirectUri" name="redirectUri" type="hidden" formControlName="redirectUri" required> <input id="redirect_uri" name="redirect_uri" type="hidden" formControlName="redirect_uri" required>
<input id="scope" name="scope" type="hidden" formControlName="scope" required> <input id="scope" name="scope" type="hidden" formControlName="scope" required>
<input id="nonce" name="nonce" type="hidden" formControlName="nonce"> <input id="nonce" name="nonce" type="hidden" formControlName="nonce">
<input id="prompt" name="prompt" type="hidden" formControlName="prompt"> <input id="prompt" name="prompt" type="hidden" formControlName="prompt">
<input id="login_hint" name="login_hint" type="hidden" formControlName="login_hint"> <input id="login_hint" name="login_hint" type="hidden" formControlName="login_hint">
<ng-container *ngIf="authorize">
<h3>{{'security.oidc.authorize' | i18n}}</h3>
<mat-list> <p>{{'security.oidc.authorize.hint' | i18n}}</p>
<mat-list-item (click)="setAlias('')">{{'username'}}</mat-list-item> </ng-container>
<mat-list-item *ngFor="let userAlias of aliases" (click)="setAlias(userAlias.alias)" <ng-container *ngIf="alias">
[activated]="userAlias.alias == selectedAlias">{{userAlias.alias}}</mat-list-item> <h3>{{'security.oidc.alias' | i18n}}</h3>
</mat-list> <mat-nav-list>
<mat-list-item (click)="setAlias('')"
[ngClass]="{'active' : !selectedAlias || selectedAlias == ''}">{{auth.name}}</mat-list-item>
<mat-list-item *ngFor="let userAlias of aliases" (click)="setAlias(userAlias.alias)"
[ngClass]="{'active' : selectedAlias == userAlias.alias}">{{userAlias.alias}}</mat-list-item>
</mat-nav-list>
</ng-container>
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions>
<a type="submit" mat-raised-button color="primary" [disabled]="form.invalid">{{'security.oidc.login' | <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid"
i18n}}</a> (click)="odicLoginForm.submit()">{{'security.oidc.login' |
i18n}}</button>
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
</form> </form>

6
src/app/pages/form-login-oidc/form-login-oidc.component.scss
View File

@ -1,3 +1,9 @@
mat-form-field { mat-form-field {
display: block; display: block;
} }
mat-list-item {
&.active {
background-color: #cccccc;
}
}

21
src/app/pages/form-login-oidc/form-login-oidc.component.ts
View File

@ -23,8 +23,15 @@ export class FormLoginOidcComponent implements OnInit {
alias: boolean = false; alias: boolean = false;
aliases: any[] = []; aliases: any[] = [];
selectedAlias: any; selectedAlias: any;
auth;
constructor(private formBuilder: FormBuilder, private authService: AuthService, private userAliasService: UserAliasService, private router: Router, private route: ActivatedRoute, private location: Location) { } constructor(private formBuilder: FormBuilder, private authService: AuthService, private userAliasService: UserAliasService, private router: Router, private route: ActivatedRoute, private location: Location) {
this.authService.auth.subscribe({
next: (data) => {
this.auth = data;
}
})
}
ngOnInit() { ngOnInit() {
@ -32,8 +39,8 @@ export class FormLoginOidcComponent implements OnInit {
code: ['', Validators.required], code: ['', Validators.required],
state: ['', Validators.required], state: ['', Validators.required],
client_id: ['', Validators.required], client_id: ['', Validators.required],
responseType: ['', Validators.required], response_type: ['', Validators.required],
redirectUri: ['', Validators.required], redirect_uri: ['', Validators.required],
scope: ['', Validators.required], scope: ['', Validators.required],
nonce: [''], nonce: [''],
prompt: [''], prompt: [''],
@ -52,11 +59,11 @@ export class FormLoginOidcComponent implements OnInit {
if (params['client_id']) { if (params['client_id']) {
this.form.get('client_id').setValue(params['client_id']); this.form.get('client_id').setValue(params['client_id']);
} }
if (params['responseType']) { if (params['response_type']) {
this.form.get('responseType').setValue(params['responseType']); this.form.get('response_type').setValue(params['response_type']);
} }
if (params['redirectUri']) { if (params['redirect_uri']) {
this.form.get('redirectUri').setValue(params['redirectUri']); this.form.get('redirect_uri').setValue(params['redirect_uri']);
} }
if (params['scope']) { if (params['scope']) {
this.form.get('scope').setValue(params['scope']); this.form.get('scope').setValue(params['scope']);