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

[DEV] Fist usable version of the manage account

Browse Source
This commit is contained in:
Edouard DUPIN 2023-01-08 12:23:41 +01:00
parent e8a957a183
commit ebc072f029
3 changed files with 207 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
front/src/app/scene/manage-accounts/manage-accounts.html
View File

@ -7,7 +7,7 @@
<div class="group-description">List of all users</div> <div class="group-description">List of all users</div>
</div> </div>
<div class="settings-elements"> <div class="settings-elements">
<table style="width:100%;"> <table class="table-model">
<tr> <tr>
<th>id</th> <th>id</th>
<th>login</th> <th>login</th>
@ -18,13 +18,31 @@
<th>lastConnection</th> <th>lastConnection</th>
</tr> </tr>
<tr *ngFor="let user of users"> <tr *ngFor="let user of users">
<th>{{user.id}}</th> <td>{{user.id}}</td>
<th>{{user.login}}</th> <td>{{user.login}}</td>
<th>{{user.email}}</th> <td>{{user.email}}</td>
<th>{{user.admin}}</th> <td>
<th>{{user.blocked}}</th> <app-checkbox
<th>{{user.avatar}}</th> [value]="user.admin"
<th>{{user.lastConnection}}</th> *ngIf="adminLogin !== user.login && user.adminState === undefined"
(changeValue)="onSetAdmin($event, user)"></app-checkbox>
{{adminLogin === user.login?"yes":""}}
<app-async-status-component
*ngIf="user.adminState !== undefined"
[value]="user.adminState"
></app-async-status-component>
</td>
<td>
<app-checkbox
[value]="user.blocked"
*ngIf="adminLogin !== user.login && user.blockedState === undefined"
(changeValue)="onSetBlocked($event, user)"></app-checkbox>
<app-async-status-component
*ngIf="user.blockedState !== undefined"
[value]="user.blockedState"
></app-async-status-component></td>
<td>{{user.avatar?"yes":"---"}}</td>
<td>{{formatTimestamp(user.lastConnection)}}</td>
</tr> </tr>
</table> </table>
</div> </div>
@ -40,35 +58,27 @@
<div class="group-description">Add a new user on the server</div> <div class="group-description">Add a new user on the server</div>
</div> </div>
<div class="settings-elements"> <div class="settings-elements">
<table style="width:100%;"> <table>
<tr> <tr>
<td width="25%"><b>Login:</b></td> <td width="15%"><b>Login:</b></td>
<td width="75%"> <td width="85%">
<input <app-entry
id="username"
name="username"
class="{{loginIcon}}"
type="text"
required=""
placeholder="Pick a Username"
[value]="login" [value]="login"
(input)="checkLogin($event.target.value)" /> placeholder="Enter Username"
<div class="error color-shadow-black" *ngIf="loginHelp">{{loginHelp}}</div> [hasError]="loginState !== true"
(changeValue)="checkLogin($event)"></app-entry>
<app-error-message-state [value]="loginState"></app-error-message-state>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><b>email:</b></td> <td><b>email:</b></td>
<td> <td>
<input <app-entry
id="email"
name="e-mail"
class="{{emailIcon}}"
type="text"
required=""
placeholder="you@example.com"
[value]="email" [value]="email"
(input)="checkEmail($event.target.value)" /> placeholder="Enter e-mail"
<div class="error color-shadow-black" *ngIf="emailHelp">{{emailHelp}}</div> [hasError]="emailState !== true"
(changeValue)="checkEmail($event)"></app-entry>
<app-error-message-state [value]="emailState"></app-error-message-state>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -79,10 +89,12 @@
placeholder="Enter new password (verify)" placeholder="Enter new password (verify)"
[hasError]="passwordState !== true" [hasError]="passwordState !== true"
(changeValue)="checkPassword($event)"></app-password-entry> (changeValue)="checkPassword($event)"></app-password-entry>
<div class="error color-shadow-black" *ngIf="passwordState !== true && passwordState !== false">{{passwordState}}</div> <app-error-message-state [value]="passwordState"></app-error-message-state>
</td> </td>
<tr> <tr>
</table> </table>
</div>
<div class="settings-validation">
<button <button
class="button login color-button-validate color-shadow-black" class="button login color-button-validate color-shadow-black"
id="login-button" id="login-button"
@ -92,9 +104,6 @@
Create user Create user
</button> </button>
</div> </div>
<div class="settings-validation">
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>

23
front/src/app/scene/manage-accounts/manage-accounts.less
View File

@ -46,11 +46,6 @@
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
margin: 10px auto; margin: 10px auto;
} }
.elem-checkbox {
font-size: 18px;
font-weight: bold;
margin: 0 10px 0 10px;
}
.elem-title { .elem-title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
@ -149,3 +144,21 @@
margin: auto; margin: auto;
} }
} }
.table-model {
tr:nth-child(odd) {
background-color: rgb(180, 180, 180);
//color: #fff;
}
th {
background-color: darkgray;
text-align: center;
}
td {
text-align: center;
}
}
table {
width: 100%;
}

220
front/src/app/scene/manage-accounts/manage-accounts.ts
View File

@ -4,14 +4,15 @@
* @license PROPRIETARY (see license file) * @license PROPRIETARY (see license file)
*/ */
import { Component, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { AdminUserService } from 'app/service';
import { AdminUserService, SettingsService } from 'app/service'; import { AsyncActionState } from 'common/component';
import { SessionService } from 'common/service';
import { import {
checkEmailValidity, checkEmailValidity,
checkLoginValidity, checkLoginValidity,
createLoginState,
createPasswordState, createPasswordState,
isArrayOf,
isBoolean, isBoolean,
isInArray, isInArray,
isNullOrUndefined, isNullOrUndefined,
@ -20,7 +21,6 @@ import {
isOptionalArrayOf, isOptionalArrayOf,
isOptionalOf, isOptionalOf,
isString, isString,
isUndefined,
} from 'common/utils'; } from 'common/utils';
export enum SettingType { export enum SettingType {
TITLE = 'TITLE', TITLE = 'TITLE',
@ -100,13 +100,20 @@ export function isSettingsItem(data: any): data is SettingsItem {
selector: 'app-settings', selector: 'app-settings',
templateUrl: './manage-accounts.html', templateUrl: './manage-accounts.html',
styleUrls: ['./manage-accounts.less'], styleUrls: ['./manage-accounts.less'],
changeDetection: ChangeDetectionStrategy.Default,
}) })
export class ManageAccountsScene implements OnInit { export class ManageAccountsScene implements OnInit {
users: any = []; users: any = [];
adminLogin: string = "";
constructor(private adminUserService: AdminUserService) { constructor(
private adminUserService: AdminUserService,
private sessionService: SessionService,
private cdr: ChangeDetectorRef,
) {
} }
ngOnInit() { ngOnInit() {
this.adminLogin = this.sessionService.getLogin();
let self = this; let self = this;
this.adminUserService this.adminUserService
.getUsers() .getUsers()
@ -119,14 +126,83 @@ export class ManageAccountsScene implements OnInit {
}); });
} }
public passwordState: boolean|string = false; onSetAdmin(value: boolean, user: any) {
user.admin = value;
console.log(`onSetAdmin: ${value} on ${user.login}`);
user.adminState = AsyncActionState.LOADING;
this.cdr.detectChanges();
let self = this;
this.adminUserService.setAdmin(user.id, value)
.then(
() => {
user.adminState = AsyncActionState.DONE;
self.cdr.detectChanges();
setTimeout(() => {
user.adminState = undefined;
self.cdr.detectChanges();
}, 3000);
}
).catch(
(error: any) => {
user.adminState = AsyncActionState.FAIL;
self.cdr.detectChanges();
setTimeout(() => {
user.adminState = undefined;
user.admin = !value;
self.cdr.detectChanges();
}, 3000);
}
);
}
onSetBlocked(value:boolean, user: any) {
user.blocked = value;
console.log(`onSetBlocked: ${value} on ${user.login}`);
user.blockedState = AsyncActionState.LOADING;
this.cdr.detectChanges();
let self = this;
this.adminUserService.setBlocked(user.id, value)
.then(
() => {
user.blockedState = AsyncActionState.DONE;
self.cdr.detectChanges();
setTimeout(() => {
user.blockedState = undefined;
self.cdr.detectChanges();
}, 3000);
}
).catch(
(error: any) => {
user.blockedState = AsyncActionState.FAIL;
self.cdr.detectChanges();
setTimeout(() => {
user.blockedState = undefined;
user.blocked = !value;
self.cdr.detectChanges();
}, 3000);
}
);
}
public password: string = ''; public password: string = '';
public passwordState: boolean|string = false;
public login: string = '';
public loginState: boolean|string = false;
public email: string = '';
public emailState: boolean|string = false;
public validateButtonCreateUserDisabled: boolean = true; public validateButtonCreateUserDisabled: boolean = true;
/** /**
* update the state of the validation button. if all is OK, the button will became clickable * update the state of the validation button. if all is OK, the button will became clickable
*/ */
updateButtonVisibility(): void { updateButtonVisibility(): void {
if (this.passwordState === true && this.loginOK === true && this.emailOK === true) { if (this.passwordState === true && this.loginState === true && this.emailState === true) {
this.validateButtonCreateUserDisabled = false; this.validateButtonCreateUserDisabled = false;
} else { } else {
this.validateButtonCreateUserDisabled = true; this.validateButtonCreateUserDisabled = true;
@ -139,56 +215,47 @@ export class ManageAccountsScene implements OnInit {
checkPassword(newValue: string): void { checkPassword(newValue: string): void {
this.password = newValue; this.password = newValue;
this.passwordState = createPasswordState(this.password); this.passwordState = createPasswordState(this.password);
this.checkPassword(this.password);
this.updateButtonVisibility(); this.updateButtonVisibility();
} }
createState: string | boolean = undefined;
/** /**
* Request the creation of a new user. * Request the creation of a new user.
*/ */
onCreateUser(): void { onCreateUser(): void {
console.log(`create user:`);
this.createState = AsyncActionState.LOADING;
let self = this;
this.adminUserService.createUsers(this.email, this.login, this.password)
.then(
(user_data: any) => {
self.createState = AsyncActionState.DONE;
console.log(`Get new user: ${JSON.stringify(user_data, null, 2)}`);
self.users.push(user_data);
self.cdr.detectChanges();
setTimeout(() => {
this.createState = undefined;
}, 3000);
}
).catch(
(error: any) => {
self.createState = AsyncActionState.FAIL;
setTimeout(() => {
self.createState = undefined;
}, 3000);
}
);
} }
private signUpIconWrong: string = 'icon-right-not-validate'; /**
private signUpIconWait: string = 'icon-right-load'; * Check the login writing rules
private signUpIconRight: string = 'icon-right-validate'; */
public login: string = '';
public loginOK: boolean = false;
public loginHelp: string = '';
public loginIcon: string = '';
public email: string = '';
public emailOK: boolean = false;
public emailHelp: string = '';
public emailIcon: string = '';
checkLogin(newValue: string): void { checkLogin(newValue: string): void {
// this.userService.loginSha("loooogin", "ekljkj", true);
this.login = newValue; this.login = newValue;
if (this.login === null || this.login.length === 0) { this.loginState = createLoginState(this.login);
this.loginOK = false; if (this.loginState === true) {
this.loginIcon = ''; this.loginState = "Checking login ...";
//this.loginIcon = this.signUpIconWrong;
this.loginHelp = '';
this.updateButtonVisibility();
return;
}
if (this.login.length < 6) {
this.loginOK = false;
this.loginHelp = 'Need 6 characters';
this.loginIcon = this.signUpIconWrong;
this.updateButtonVisibility();
return;
}
if (checkLoginValidity(this.login) === true) {
this.loginOK = false;
// this.loginHelp = "check in progress...";
this.loginIcon = this.signUpIconWait;
let self = this; let self = this;
this.adminUserService this.adminUserService
.checkLogin(this.login) .checkLogin(this.login)
@ -199,53 +266,30 @@ export class ManageAccountsScene implements OnInit {
} }
if (isNotUsed === false) { if (isNotUsed === false) {
// the login exist ... ==> it is found... // the login exist ... ==> it is found...
self.loginOK = false; self.loginState = 'Login already used ...';
self.loginHelp = 'Login already used ...';
self.loginIcon = self.signUpIconWrong;
self.updateButtonVisibility(); self.updateButtonVisibility();
} else { } else {
self.loginOK = true; self.loginState = true;
self.loginHelp = '';
self.loginIcon = self.signUpIconRight;
self.updateButtonVisibility(); self.updateButtonVisibility();
return;
} }
}) })
.catch((error: number) => { .catch((error: number) => {
console.log(`Status ${error}`); console.log(`Status ${error}`);
self.loginOK = false; self.loginState = 'ErrorOccured in fetching data ...';
self.loginHelp = 'ErrorOccured in fetching data ...';
self.loginIcon = self.signUpIconWrong;
self.updateButtonVisibility(); self.updateButtonVisibility();
}); });
} else {
this.loginOK = false;
this.loginHelp = 'Not valid: characters, numbers and "_-."';
} }
this.updateButtonVisibility(); this.updateButtonVisibility();
} }
checkEmail(newValue: string): void { checkEmail(newValue: string): void {
this.email = newValue; this.email = newValue;
if (this.email === null || this.email.length === 0) { if (!checkEmailValidity(this.email)) {
this.emailOK = false; this.emailState = "E-mail is not well formated.";
this.updateButtonVisibility(); this.updateButtonVisibility();
this.emailIcon = '';
this.emailHelp = '';
return; return;
} }
if (this.email.length < 6) { this.emailState = "Checking email ...";
this.emailOK = false;
this.emailHelp = 'Need 6 characters';
this.updateButtonVisibility();
this.emailIcon = this.signUpIconWrong;
return;
}
if (checkEmailValidity(this.email) === true) {
this.emailOK = false;
this.emailHelp = '';
// this.loginHelp = "check in progress...";
this.emailIcon = this.signUpIconWait;
let self = this; let self = this;
this.adminUserService.checkEMail(this.email).then( this.adminUserService.checkEMail(this.email).then(
(isNotUsed: boolean) => { (isNotUsed: boolean) => {
@ -255,31 +299,25 @@ export class ManageAccountsScene implements OnInit {
} }
if (isNotUsed === false) { if (isNotUsed === false) {
// the email exist ... ==> it is found... // the email exist ... ==> it is found...
self.emailOK = false; self.emailState = 'email already used ...';
self.emailHelp = 'email already used ...';
self.emailIcon = self.signUpIconWrong;
self.updateButtonVisibility(); self.updateButtonVisibility();
} else { } else {
self.emailOK = true; self.emailState = true;
self.emailHelp = '';
self.emailIcon = self.signUpIconRight;
self.updateButtonVisibility(); self.updateButtonVisibility();
return; return;
} }
}, })
(error: number) => { .catch((error: number) => {
console.log(`Status ${error}`); console.log(`Status ${error}`);
self.emailOK = false; self.emailState = 'ErrorOccured in fetching data ...';
self.emailHelp = 'ErrorOccured in fetching data ...';
self.emailIcon = self.signUpIconWrong;
self.updateButtonVisibility(); self.updateButtonVisibility();
} }
); );
} else {
this.emailOK = false;
this.emailHelp = 'Not valid: characters, numbers, "_-." and email format: you@example.com';
}
this.updateButtonVisibility(); this.updateButtonVisibility();
} }
formatTimestamp(unix_timestamp: number): string {
return new Date(unix_timestamp).toISOString().replace("T", " ").replace("Z", " GMT").replace(".000", "");
//return new Date(unix_timestamp).toUTCString();
//return new Date(unix_timestamp).toLocaleString();
}
} }