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,
HomeUnregisteredScene,
} 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';
const routes: Routes = [
@ -64,7 +64,7 @@ const routes: Routes = [
{
path: 'settings',
component: SettingsScene,
canActivate: [OnlyUsersGuard],
canActivate: [OnlyAdminGuard],
},
{
path: '**',

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

@ -100,24 +100,41 @@ export class AppComponent implements OnInit {
navigateTo: "avatar",
}, */ {
position: MenuPosition.LEFT,
hover: 'Change Other configuration',
hover: 'Admin configuration karso management',
icon: 'settings',
title: '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,
hover: 'Exit connection',
icon: 'exit_to_app',
title: 'Sign out',
navigateTo: 'signout',
image: "assets/images/avatar_generic.svg",
title: "",
subMenu: [
{
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 {

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

@ -38,7 +38,7 @@ import {
UserService,
} from 'common/service';
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 { AdminUserService, ApplicationService, SettingsService } from 'app/service';
import { PopInUploadProgress, PopInDeleteConfirm } from 'common/popin';
@ -51,6 +51,7 @@ import { PasswordEntryComponent } from './component';
UploadFileComponent,
ErrorComponent,
PasswordEntryComponent,
SpinerComponent,
PopInComponent,
PopInUploadProgress,

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

@ -1,12 +1,12 @@
<div class="full">
<div class="color-background-vignette container-global">
<div class="color-background-vignette container-global unselectable">
<div class="containerCenter">
<label><b>Change Password</b></label>
</div>
<div class="imgContainer">
<img src="assets/images/avatar_generic.svg" alt="Avatar" class="avatar" />
</div>
<div class="container">
<div class="container" *ngIf="updateState==='filling'">
<!-- Previous password section -->
<label for="passwordOld"><b>Previous password</b></label>
<app-password-entry
@ -34,7 +34,7 @@
(changeValue)="checkPassword2($event)"></app-password-entry>
<div class="error color-shadow-black" *ngIf="password2State !== true && password2State !== false">{{password2State}}</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 login color-button-validate color-shadow-black"
@ -45,5 +45,30 @@
Change Password
</button>
</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>

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

@ -11,6 +11,10 @@
display: block;
}
.retry {
margin: 2% 25%;
width: 50%;
}
.login {
margin: 2% 2%;
width: 45%;
@ -49,6 +53,11 @@ img.avatar {
.container {
padding: 16px 0 0 0;
}
.container-fix-height {
padding: 16px 0 0 0;
text-align: center;
height: 200px
}
.error {
@ -82,4 +91,6 @@ img.avatar {
border-width: 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 { AdminUserService } from 'app/service';
export enum PasswordState {
FILLING = "filling",
SENDING = "sending",
DONE = "done",
ERROR = "error",
}
@Component({
selector: 'app-change-password',
templateUrl: './change-password.html',
styleUrls: ['./change-password.less'],
})
export class ChangePasswordScene {
/// State of the password scene...
public updateState: PasswordState = PasswordState.FILLING;
/// status of the 3 fields:
public passwordOldState: boolean|string = false;
public password1State: boolean|string = false;
@ -26,6 +35,8 @@ export class ChangePasswordScene {
/// Validation button state
public validateButtonDisabled: boolean = true;
public error: string= "";
constructor(
private locate: Location,
private adminUserService: AdminUserService
@ -87,12 +98,14 @@ export class ChangePasswordScene {
* Summit change password.
*/
onChangePassword(): void {
this.updateState = PasswordState.SENDING;
this.adminUserService.changePassword(this.passwordOld, this.password1)
.then(() => {
console.log(`Change password is OK`);
this.updateState = PasswordState.DONE;
})
.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 {
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="global-help">
<div class="title">Karso (SSO)</div>
<div class="title unselectable">Karso (SSO)</div>
</div>
</div>
<div class="right">
<div class="global-help">
<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}}
</button>
</div>

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

@ -1,6 +1,7 @@
import { ErrorComponent } from './error/error';
import { PopInComponent } from './popin/popin';
import { SpinerComponent } from './spiner/spiner';
import { TopMenuComponent } from './top-menu/top-menu';
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 *ngFor="let data of menu">
<div
class="inert_element"
class="inert_element unselectable"
*ngIf="isNotButton(data)"
[ngStyle]="{'float': data.position}"
[ngClass]="getClassModel(data.model)">
@ -13,14 +13,14 @@
<div class="xdesktop" *ngIf="!data.icon">{{data.title}}</div>
</div>
<button
class="item"
class="item unselectable"
*ngIf="!isNotButton(data)"
(click)="onGeneric(data, $event)"
(auxclick)="onGeneric(data, $event)"
[ngStyle]="{'float': data.position}"
[ngClass]="getClassModel(data.model)"
[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">
<i class="material-icons">{{data.icon}}</i> {{data.title}}
</div>
@ -32,7 +32,7 @@
</div>
</div>
<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
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 true;
return ret;
}/**
* 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.

5
front/src/generic_page.less
View File

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