kangaroo-and-rabbit/karso
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Activity

[DEV] finish to change passwork GUI

Browse Source
This commit is contained in:
Edouard DUPIN 2023-01-05 22:26:12 +01:00
parent f3ae1fcd1c
commit c6016de0ed
11 changed files with 102 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/app/app-routing.module.ts
View File

@ -17,7 +17,7 @@ import {
SignUpScene, SignUpScene,
HomeUnregisteredScene, HomeUnregisteredScene,
} from './scene'; } from './scene';
import { OnlyUnregisteredGuardHome, OnlyUsersGuard, OnlyUsersGuardHome } from 'common/service/session'; import { OnlyAdminGuard, OnlyUnregisteredGuardHome, OnlyUsersGuard, OnlyUsersGuardHome } from 'common/service/session';
import { ForbiddenScene, NotFound404Scene } from 'common/scene'; import { ForbiddenScene, NotFound404Scene } from 'common/scene';
const routes: Routes = [ const routes: Routes = [
@ -64,7 +64,7 @@ const routes: Routes = [
{ {
path: 'settings', path: 'settings',
component: SettingsScene, component: SettingsScene,
canActivate: [OnlyUsersGuard], canActivate: [OnlyAdminGuard],
}, },
{ {
path: '**', path: '**',

37
front/src/app/app.component.ts
View File

@ -100,24 +100,41 @@ export class AppComponent implements OnInit {
navigateTo: "avatar", navigateTo: "avatar",
}, */ { }, */ {
position: MenuPosition.LEFT, position: MenuPosition.LEFT,
hover: 'Change Other configuration', hover: 'Admin configuration karso management',
icon: 'settings', icon: 'settings',
title: 'Settings', title: 'Settings',
navigateTo: 'settings', navigateTo: 'settings',
enable: this.sessionService.userAdmin === true,
}, },
], ],
}, },
{
position: MenuPosition.LEFT,
hover: `You are logged as: ${this.sessionService.getLogin()}`,
title: this.sessionService.getLogin(),
},
{ {
position: MenuPosition.RIGHT, position: MenuPosition.RIGHT,
hover: 'Exit connection', image: "assets/images/avatar_generic.svg",
icon: 'exit_to_app', title: "",
title: 'Sign out', subMenu: [
navigateTo: 'signout', {
position: MenuPosition.LEFT,
hover: `You are logged as: <b>${this.sessionService.getLogin()}</b>`,
title: `Sign in as ${this.sessionService.getLogin()}`,
}, /*{
position: MenuPosition.LEFT,
icon: "settings",
title: "Settings",
navigateTo: "settings",
}, */{
position: MenuPosition.LEFT,
icon: "help",
title: "Help",
navigateTo: "help",
}, {
position: MenuPosition.LEFT,
hover: "Exit connection",
icon: "exit_to_app",
title: 'Sign out',
navigateTo: 'signout',
},
],
}, },
]; ];
} else { } else {

3
front/src/app/app.module.ts
View File

@ -38,7 +38,7 @@ import {
UserService, UserService,
} from 'common/service'; } from 'common/service';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ErrorComponent, PopInComponent, TopMenuComponent, UploadFileComponent } from 'common/component'; import { ErrorComponent, PopInComponent, SpinerComponent, TopMenuComponent, UploadFileComponent } from 'common/component';
import { ForbiddenScene } from 'common/scene'; import { ForbiddenScene } from 'common/scene';
import { AdminUserService, ApplicationService, SettingsService } from 'app/service'; import { AdminUserService, ApplicationService, SettingsService } from 'app/service';
import { PopInUploadProgress, PopInDeleteConfirm } from 'common/popin'; import { PopInUploadProgress, PopInDeleteConfirm } from 'common/popin';
@ -51,6 +51,7 @@ import { PasswordEntryComponent } from './component';
UploadFileComponent, UploadFileComponent,
ErrorComponent, ErrorComponent,
PasswordEntryComponent, PasswordEntryComponent,
SpinerComponent,
PopInComponent, PopInComponent,
PopInUploadProgress, PopInUploadProgress,

31
front/src/app/scene/change-password/change-password.html
View File

@ -1,12 +1,12 @@
<div class="full"> <div class="full">
<div class="color-background-vignette container-global"> <div class="color-background-vignette container-global unselectable">
<div class="containerCenter"> <div class="containerCenter">
<label><b>Change Password</b></label> <label><b>Change Password</b></label>
</div> </div>
<div class="imgContainer"> <div class="imgContainer">
<img src="assets/images/avatar_generic.svg" alt="Avatar" class="avatar" /> <img src="assets/images/avatar_generic.svg" alt="Avatar" class="avatar" />
</div> </div>
<div class="container"> <div class="container" *ngIf="updateState==='filling'">
<!-- Previous password section --> <!-- Previous password section -->
<label for="passwordOld"><b>Previous password</b></label> <label for="passwordOld"><b>Previous password</b></label>
<app-password-entry <app-password-entry
@ -34,7 +34,7 @@
(changeValue)="checkPassword2($event)"></app-password-entry> (changeValue)="checkPassword2($event)"></app-password-entry>
<div class="error color-shadow-black" *ngIf="password2State !== true && password2State !== false">{{password2State}}</div> <div class="error color-shadow-black" *ngIf="password2State !== true && password2State !== false">{{password2State}}</div>
</div> </div>
<div class="container"> <div class="container" *ngIf="updateState==='filling'">
<button class="button cancel color-button-cancel color-shadow-black" (click)="onCancel()">Cancel</button> <button class="button cancel color-button-cancel color-shadow-black" (click)="onCancel()">Cancel</button>
<button <button
class="button login color-button-validate color-shadow-black" class="button login color-button-validate color-shadow-black"
@ -45,5 +45,30 @@
Change Password Change Password
</button> </button>
</div> </div>
<div class="container-fix-height" *ngIf="updateState==='sending'">
<label><br/><br/><b>Updating ...</b></label><br/><br/>
<spiner></spiner>
</div>
<div class="container-fix-height" *ngIf="updateState==='done'">
<label><br/><br/><br/><b>Update is done.</b></label>
</div>
<div class="container" *ngIf="updateState==='done'">
<button
class="button retry color-button-validate color-shadow-black"
(click)="onRetry()">
Change again ...
</button>
</div>
<div class="container-fix-height" *ngIf="updateState==='error'">
<label><b>Update FAIL with error:</b></label>
<label>{{error}}</label>
</div>
<div class="container" *ngIf="updateState==='error'">
<button
class="button retry color-button-validate color-shadow-black"
(click)="onRetry()">
Retry
</button>
</div>
</div> </div>
</div> </div>

13
front/src/app/scene/change-password/change-password.less
View File

@ -11,6 +11,10 @@
display: block; display: block;
} }
.retry {
margin: 2% 25%;
width: 50%;
}
.login { .login {
margin: 2% 2%; margin: 2% 2%;
width: 45%; width: 45%;
@ -49,6 +53,11 @@ img.avatar {
.container { .container {
padding: 16px 0 0 0; padding: 16px 0 0 0;
} }
.container-fix-height {
padding: 16px 0 0 0;
text-align: center;
height: 200px
}
.error { .error {
@ -82,4 +91,6 @@ img.avatar {
border-width: 10px; border-width: 10px;
margin-left: -10px; margin-left: -10px;
} }
} }

24
front/src/app/scene/change-password/change-password.ts
View File

@ -9,12 +9,21 @@ import { Location } from '@angular/common';
import { createPasswordState } from 'common/utils'; import { createPasswordState } from 'common/utils';
import { AdminUserService } from 'app/service'; import { AdminUserService } from 'app/service';
export enum PasswordState {
FILLING = "filling",
SENDING = "sending",
DONE = "done",
ERROR = "error",
}
@Component({ @Component({
selector: 'app-change-password', selector: 'app-change-password',
templateUrl: './change-password.html', templateUrl: './change-password.html',
styleUrls: ['./change-password.less'], styleUrls: ['./change-password.less'],
}) })
export class ChangePasswordScene { export class ChangePasswordScene {
/// State of the password scene...
public updateState: PasswordState = PasswordState.FILLING;
/// status of the 3 fields: /// status of the 3 fields:
public passwordOldState: boolean|string = false; public passwordOldState: boolean|string = false;
public password1State: boolean|string = false; public password1State: boolean|string = false;
@ -26,6 +35,8 @@ export class ChangePasswordScene {
/// Validation button state /// Validation button state
public validateButtonDisabled: boolean = true; public validateButtonDisabled: boolean = true;
public error: string= "";
constructor( constructor(
private locate: Location, private locate: Location,
private adminUserService: AdminUserService private adminUserService: AdminUserService
@ -87,12 +98,14 @@ export class ChangePasswordScene {
* Summit change password. * Summit change password.
*/ */
onChangePassword(): void { onChangePassword(): void {
this.updateState = PasswordState.SENDING;
this.adminUserService.changePassword(this.passwordOld, this.password1) this.adminUserService.changePassword(this.passwordOld, this.password1)
.then(() => { .then(() => {
console.log(`Change password is OK`); this.updateState = PasswordState.DONE;
}) })
.catch((error: any) => { .catch((error: any) => {
console.error(`Fail to change PAssword: ${error}`); this.updateState = PasswordState.ERROR;
this.error = error;
}); });
} }
/** /**
@ -101,4 +114,11 @@ export class ChangePasswordScene {
onCancel(): void { onCancel(): void {
this.locate.back(); this.locate.back();
} }
/**
* Whe error occured, the display permit to go back to retry the update:
*/
onRetry(): void {
this.updateState = PasswordState.FILLING;
this.error = "";
}
} }

4
front/src/app/scene/home/home.html
View File

@ -1,12 +1,12 @@
<div class="left"> <div class="left">
<div class="global-help"> <div class="global-help">
<div class="title">Karso (SSO)</div> <div class="title unselectable">Karso (SSO)</div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="global-help"> <div class="global-help">
<div class="image" *ngFor="let data of dataList"> <div class="image" *ngFor="let data of dataList">
<button class="button" (click)="onClick($event, data)" (auxclick)="onClick($event, data)"> <button class="button unselectable" (click)="onClick($event, data)" (auxclick)="onClick($event, data)">
{{data.name}} {{data.name}}
</button> </button>
</div> </div>

3
front/src/common/component/index.ts
View File

@ -1,6 +1,7 @@
import { ErrorComponent } from './error/error'; import { ErrorComponent } from './error/error';
import { PopInComponent } from './popin/popin'; import { PopInComponent } from './popin/popin';
import { SpinerComponent } from './spiner/spiner';
import { TopMenuComponent } from './top-menu/top-menu'; import { TopMenuComponent } from './top-menu/top-menu';
import { UploadFileComponent } from './upload-file/upload-file'; import { UploadFileComponent } from './upload-file/upload-file';
export { PopInComponent, TopMenuComponent, UploadFileComponent, ErrorComponent }; export { PopInComponent, TopMenuComponent, UploadFileComponent, ErrorComponent, SpinerComponent };

8
front/src/common/component/top-menu/top-menu.html
View File

@ -2,7 +2,7 @@
<div id="main-menu" class="main-menu color-menu-background"> <div id="main-menu" class="main-menu color-menu-background">
<div *ngFor="let data of menu"> <div *ngFor="let data of menu">
<div <div
class="inert_element" class="inert_element unselectable"
*ngIf="isNotButton(data)" *ngIf="isNotButton(data)"
[ngStyle]="{'float': data.position}" [ngStyle]="{'float': data.position}"
[ngClass]="getClassModel(data.model)"> [ngClass]="getClassModel(data.model)">
@ -13,14 +13,14 @@
<div class="xdesktop" *ngIf="!data.icon">{{data.title}}</div> <div class="xdesktop" *ngIf="!data.icon">{{data.title}}</div>
</div> </div>
<button <button
class="item" class="item unselectable"
*ngIf="!isNotButton(data)" *ngIf="!isNotButton(data)"
(click)="onGeneric(data, $event)" (click)="onGeneric(data, $event)"
(auxclick)="onGeneric(data, $event)" (auxclick)="onGeneric(data, $event)"
[ngStyle]="{'float': data.position}" [ngStyle]="{'float': data.position}"
[ngClass]="getClassModel(data.model)" [ngClass]="getClassModel(data.model)"
[disable]="false"> [disable]="false">
<div class="avatar" *ngIf="data.image"><img class="avatar" src="{{data.image}}" /> {{data.title}}</div> <div class="avatar unselectable" *ngIf="data.image"><img class="avatar" src="{{data.image}}" /> {{data.title}}</div>
<div class="xdesktop" *ngIf="data.icon && !data.image"> <div class="xdesktop" *ngIf="data.icon && !data.image">
<i class="material-icons">{{data.icon}}</i> {{data.title}} <i class="material-icons">{{data.icon}}</i> {{data.title}}
</div> </div>
@ -32,7 +32,7 @@
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="subMenu" (click)="onOutUserProperty()"> <div class="fill-all" *ngIf="subMenu" (click)="onOutUserProperty()">
<div class="sub-menu color-menu-background" [ngClass]="getClassMenuPosition()"> <div class="sub-menu color-menu-background unselectable" [ngClass]="getClassMenuPosition()">
<div *ngFor="let data of subMenu"> <div *ngFor="let data of subMenu">
<div <div
class="inert_element unselectable" class="inert_element unselectable"

2
front/src/common/utils/validatorPasswordEmail.ts
View File

@ -91,7 +91,7 @@ export function createPasswordState(value: string): boolean|string {
return 'Not valid: missing 1 special character: _-:;.,?!*+=}{([|)]% @&~#/\\<>'; return 'Not valid: missing 1 special character: _-:;.,?!*+=}{([|)]% @&~#/\\<>';
} }
} }
return true; return ret;
}/** }/**
* Creata a pasword state of a password. it return a readable string that explain why the password is wrong. * Creata a pasword state of a password. it return a readable string that explain why the password is wrong.
* It does not check if the email have specific less one char, it is dangerous for login interface. * It does not check if the email have specific less one char, it is dangerous for login interface.

5
front/src/generic_page.less
View File

@ -24,7 +24,6 @@
float: right; float: right;
width: 100%; width: 100%;
.cover { .cover {
align: center;
width: 60%; width: 60%;
margin: 0 auto; margin: 0 auto;
img { img {
@ -45,7 +44,6 @@
font-weight: bold; font-weight: bold;
line-height: 60px; line-height: 60px;
width: 100%; width: 100%;
align: left;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
@ -58,7 +56,6 @@
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
align: center;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
@ -69,7 +66,6 @@
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
align: left;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
@ -100,7 +96,6 @@
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
align: left;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;