[DEV] Fist usable version of the manage account
This commit is contained in:
parent
e8a957a183
commit
ebc072f029
@ -7,7 +7,7 @@
|
||||
<div class="group-description">List of all users</div>
|
||||
</div>
|
||||
<div class="settings-elements">
|
||||
<table style="width:100%;">
|
||||
<table class="table-model">
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>login</th>
|
||||
@ -18,13 +18,31 @@
|
||||
<th>lastConnection</th>
|
||||
</tr>
|
||||
<tr *ngFor="let user of users">
|
||||
<th>{{user.id}}</th>
|
||||
<th>{{user.login}}</th>
|
||||
<th>{{user.email}}</th>
|
||||
<th>{{user.admin}}</th>
|
||||
<th>{{user.blocked}}</th>
|
||||
<th>{{user.avatar}}</th>
|
||||
<th>{{user.lastConnection}}</th>
|
||||
<td>{{user.id}}</td>
|
||||
<td>{{user.login}}</td>
|
||||
<td>{{user.email}}</td>
|
||||
<td>
|
||||
<app-checkbox
|
||||
[value]="user.admin"
|
||||
*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>
|
||||
</table>
|
||||
</div>
|
||||
@ -40,35 +58,27 @@
|
||||
<div class="group-description">Add a new user on the server</div>
|
||||
</div>
|
||||
<div class="settings-elements">
|
||||
<table style="width:100%;">
|
||||
<table>
|
||||
<tr>
|
||||
<td width="25%"><b>Login:</b></td>
|
||||
<td width="75%">
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
class="{{loginIcon}}"
|
||||
type="text"
|
||||
required=""
|
||||
placeholder="Pick a Username"
|
||||
<td width="15%"><b>Login:</b></td>
|
||||
<td width="85%">
|
||||
<app-entry
|
||||
[value]="login"
|
||||
(input)="checkLogin($event.target.value)" />
|
||||
<div class="error color-shadow-black" *ngIf="loginHelp">{{loginHelp}}</div>
|
||||
placeholder="Enter Username"
|
||||
[hasError]="loginState !== true"
|
||||
(changeValue)="checkLogin($event)"></app-entry>
|
||||
<app-error-message-state [value]="loginState"></app-error-message-state>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>email:</b></td>
|
||||
<td>
|
||||
<input
|
||||
id="email"
|
||||
name="e-mail"
|
||||
class="{{emailIcon}}"
|
||||
type="text"
|
||||
required=""
|
||||
placeholder="you@example.com"
|
||||
<app-entry
|
||||
[value]="email"
|
||||
(input)="checkEmail($event.target.value)" />
|
||||
<div class="error color-shadow-black" *ngIf="emailHelp">{{emailHelp}}</div>
|
||||
placeholder="Enter e-mail"
|
||||
[hasError]="emailState !== true"
|
||||
(changeValue)="checkEmail($event)"></app-entry>
|
||||
<app-error-message-state [value]="emailState"></app-error-message-state>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -79,10 +89,12 @@
|
||||
placeholder="Enter new password (verify)"
|
||||
[hasError]="passwordState !== true"
|
||||
(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>
|
||||
<tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="settings-validation">
|
||||
<button
|
||||
class="button login color-button-validate color-shadow-black"
|
||||
id="login-button"
|
||||
@ -92,9 +104,6 @@
|
||||
Create user
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings-validation">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
@ -46,11 +46,6 @@
|
||||
border-width: 1px 0 0 0;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.elem-checkbox {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
.elem-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
@ -149,3 +144,21 @@
|
||||
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%;
|
||||
}
|
||||
|
||||
@ -4,14 +4,15 @@
|
||||
* @license PROPRIETARY (see license file)
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { AdminUserService, SettingsService } from 'app/service';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
|
||||
import { AdminUserService } from 'app/service';
|
||||
import { AsyncActionState } from 'common/component';
|
||||
import { SessionService } from 'common/service';
|
||||
import {
|
||||
checkEmailValidity,
|
||||
checkLoginValidity,
|
||||
createLoginState,
|
||||
createPasswordState,
|
||||
isArrayOf,
|
||||
isBoolean,
|
||||
isInArray,
|
||||
isNullOrUndefined,
|
||||
@ -20,7 +21,6 @@ import {
|
||||
isOptionalArrayOf,
|
||||
isOptionalOf,
|
||||
isString,
|
||||
isUndefined,
|
||||
} from 'common/utils';
|
||||
export enum SettingType {
|
||||
TITLE = 'TITLE',
|
||||
@ -100,13 +100,20 @@ export function isSettingsItem(data: any): data is SettingsItem {
|
||||
selector: 'app-settings',
|
||||
templateUrl: './manage-accounts.html',
|
||||
styleUrls: ['./manage-accounts.less'],
|
||||
changeDetection: ChangeDetectionStrategy.Default,
|
||||
})
|
||||
export class ManageAccountsScene implements OnInit {
|
||||
users: any = [];
|
||||
adminLogin: string = "";
|
||||
|
||||
constructor(private adminUserService: AdminUserService) {
|
||||
constructor(
|
||||
private adminUserService: AdminUserService,
|
||||
private sessionService: SessionService,
|
||||
private cdr: ChangeDetectorRef,
|
||||
) {
|
||||
}
|
||||
ngOnInit() {
|
||||
this.adminLogin = this.sessionService.getLogin();
|
||||
let self = this;
|
||||
this.adminUserService
|
||||
.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 passwordState: boolean|string = false;
|
||||
|
||||
public login: string = '';
|
||||
public loginState: boolean|string = false;
|
||||
|
||||
public email: string = '';
|
||||
public emailState: boolean|string = false;
|
||||
|
||||
public validateButtonCreateUserDisabled: boolean = true;
|
||||
/**
|
||||
* update the state of the validation button. if all is OK, the button will became clickable
|
||||
*/
|
||||
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;
|
||||
} else {
|
||||
this.validateButtonCreateUserDisabled = true;
|
||||
@ -139,56 +215,47 @@ export class ManageAccountsScene implements OnInit {
|
||||
checkPassword(newValue: string): void {
|
||||
this.password = newValue;
|
||||
this.passwordState = createPasswordState(this.password);
|
||||
this.checkPassword(this.password);
|
||||
this.updateButtonVisibility();
|
||||
}
|
||||
createState: string | boolean = undefined;
|
||||
/**
|
||||
* Request the creation of a new user.
|
||||
*/
|
||||
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';
|
||||
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 {
|
||||
// this.userService.loginSha("loooogin", "ekljkj", true);
|
||||
/**
|
||||
* Check the login writing rules
|
||||
*/
|
||||
checkLogin(newValue: string): void {
|
||||
this.login = newValue;
|
||||
if (this.login === null || this.login.length === 0) {
|
||||
this.loginOK = false;
|
||||
this.loginIcon = '';
|
||||
//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;
|
||||
this.loginState = createLoginState(this.login);
|
||||
if (this.loginState === true) {
|
||||
this.loginState = "Checking login ...";
|
||||
let self = this;
|
||||
this.adminUserService
|
||||
.checkLogin(this.login)
|
||||
@ -199,87 +266,58 @@ export class ManageAccountsScene implements OnInit {
|
||||
}
|
||||
if (isNotUsed === false) {
|
||||
// the login exist ... ==> it is found...
|
||||
self.loginOK = false;
|
||||
self.loginHelp = 'Login already used ...';
|
||||
self.loginIcon = self.signUpIconWrong;
|
||||
self.loginState = 'Login already used ...';
|
||||
self.updateButtonVisibility();
|
||||
} else {
|
||||
self.loginOK = true;
|
||||
self.loginHelp = '';
|
||||
self.loginIcon = self.signUpIconRight;
|
||||
self.loginState = true;
|
||||
self.updateButtonVisibility();
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch((error: number) => {
|
||||
console.log(`Status ${error}`);
|
||||
self.loginOK = false;
|
||||
self.loginHelp = 'ErrorOccured in fetching data ...';
|
||||
self.loginIcon = self.signUpIconWrong;
|
||||
self.loginState = 'ErrorOccured in fetching data ...';
|
||||
self.updateButtonVisibility();
|
||||
});
|
||||
} else {
|
||||
this.loginOK = false;
|
||||
this.loginHelp = 'Not valid: characters, numbers and "_-."';
|
||||
}
|
||||
this.updateButtonVisibility();
|
||||
}
|
||||
|
||||
checkEmail(newValue: string): void {
|
||||
this.email = newValue;
|
||||
if (this.email === null || this.email.length === 0) {
|
||||
this.emailOK = false;
|
||||
if (!checkEmailValidity(this.email)) {
|
||||
this.emailState = "E-mail is not well formated.";
|
||||
this.updateButtonVisibility();
|
||||
this.emailIcon = '';
|
||||
this.emailHelp = '';
|
||||
return;
|
||||
}
|
||||
if (this.email.length < 6) {
|
||||
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;
|
||||
this.adminUserService.checkEMail(this.email).then(
|
||||
(isNotUsed: boolean) => {
|
||||
// check if the answer is correct with the question
|
||||
if (newValue !== self.email) {
|
||||
return;
|
||||
}
|
||||
if (isNotUsed === false) {
|
||||
// the email exist ... ==> it is found...
|
||||
self.emailOK = false;
|
||||
self.emailHelp = 'email already used ...';
|
||||
self.emailIcon = self.signUpIconWrong;
|
||||
self.updateButtonVisibility();
|
||||
} else {
|
||||
self.emailOK = true;
|
||||
self.emailHelp = '';
|
||||
self.emailIcon = self.signUpIconRight;
|
||||
self.updateButtonVisibility();
|
||||
return;
|
||||
}
|
||||
},
|
||||
(error: number) => {
|
||||
console.log(`Status ${error}`);
|
||||
self.emailOK = false;
|
||||
self.emailHelp = 'ErrorOccured in fetching data ...';
|
||||
self.emailIcon = self.signUpIconWrong;
|
||||
self.updateButtonVisibility();
|
||||
this.emailState = "Checking email ...";
|
||||
let self = this;
|
||||
this.adminUserService.checkEMail(this.email).then(
|
||||
(isNotUsed: boolean) => {
|
||||
// check if the answer is correct with the question
|
||||
if (newValue !== self.email) {
|
||||
return;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.emailOK = false;
|
||||
this.emailHelp = 'Not valid: characters, numbers, "_-." and email format: you@example.com';
|
||||
}
|
||||
if (isNotUsed === false) {
|
||||
// the email exist ... ==> it is found...
|
||||
self.emailState = 'email already used ...';
|
||||
self.updateButtonVisibility();
|
||||
} else {
|
||||
self.emailState = true;
|
||||
self.updateButtonVisibility();
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch((error: number) => {
|
||||
console.log(`Status ${error}`);
|
||||
self.emailState = 'ErrorOccured in fetching data ...';
|
||||
self.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();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user