Added /users/{userId} with basic implementation
This commit is contained in:
parent
5d18531ec4
commit
ee72dd2620
|
@ -62,8 +62,12 @@ export class UsersOperation {
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
if (e.response.status || e.response.status === 409) {
|
||||||
return false;
|
throw new Error('User with that name already exists!');
|
||||||
|
} else {
|
||||||
|
console.error(e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Name</label>
|
<label>Name</label>
|
||||||
<input type="text" class="form-control auto-invalid" formControlName="name" />
|
<input type="text" class="form-control auto-invalid" formControlName="name" appFocus />
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
Name can not be empty.
|
Name can not be empty.
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Password</label>
|
<label>Password</label>
|
||||||
<input type="password" class="form-control auto-validstate" formControlName="password" appFocus />
|
<input type="password" class="form-control auto-validstate" formControlName="password" />
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
Password is required.
|
Password is required.
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -25,7 +25,7 @@ export class CreateUserComponent implements OnInit {
|
||||||
private createForm() {
|
private createForm() {
|
||||||
this.userForm = this.fb.group({
|
this.userForm = this.fb.group({
|
||||||
name: ['', Validators.required],
|
name: ['', Validators.required],
|
||||||
type: ['user', Validators.required],
|
type: ['user'],
|
||||||
password: ['', Validators.required],
|
password: ['', Validators.required],
|
||||||
password2: ['']
|
password2: ['']
|
||||||
}, { validator: PasswordValidationUtil.matchPassword });
|
}, { validator: PasswordValidationUtil.matchPassword });
|
||||||
|
|
|
@ -1,3 +1,38 @@
|
||||||
<p>
|
<div class="row">
|
||||||
Edit user works!
|
<div class="col-12 col-md-6 col-lg-3">
|
||||||
</p>
|
<p class="font-weight-bold">Edit user {{ username }}</p>
|
||||||
|
|
||||||
|
<form autocomplete="off" [formGroup]="userForm" (ngSubmit)="onSubmit()">
|
||||||
|
|
||||||
|
<div class="form-group" *ngIf="isNative">
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" class="form-control auto-invalid" formControlName="name" />
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Name can not be empty.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group" *ngIf="isNative">
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password" class="form-control auto-valid" formControlName="password" placeholder="(unchanged)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group" *ngIf="isNative">
|
||||||
|
<label>Repeat password</label>
|
||||||
|
<input type="password" class="form-control auto-validstate" formControlName="password2" placeholder="(unchanged)"
|
||||||
|
/>
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Passwords do not match.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Type</label>
|
||||||
|
<app-select [options]="['user', 'admin']" notNull formControlName="type"></app-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary float-right" [disabled]="!userForm.valid || userForm.pristine">Save</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -1,19 +1,82 @@
|
||||||
import { ActivatedRoute } from '@angular/router';
|
import { UsersOperation } from './../../operations/users.operations';
|
||||||
|
import { ModalService } from './../../services/modal.service';
|
||||||
|
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||||
|
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { ModalOptionsDatatype } from '../../datatypes/modal-options.datatype';
|
||||||
|
import { PasswordValidationUtil } from '../../utils/password-validation.util';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-edit-user',
|
selector: 'app-create-user',
|
||||||
templateUrl: './edit-user.component.html',
|
templateUrl: './edit-user.component.html',
|
||||||
styleUrls: ['./edit-user.component.scss']
|
styleUrls: ['./edit-user.component.scss']
|
||||||
})
|
})
|
||||||
export class EditUserComponent implements OnInit {
|
export class EditUserComponent implements OnInit {
|
||||||
|
|
||||||
public type: string;
|
public userForm: FormGroup;
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute) { }
|
public isNative = false;
|
||||||
|
public username = '';
|
||||||
|
public userId = 0;
|
||||||
|
|
||||||
|
constructor(private fb: FormBuilder, private route: ActivatedRoute, private users: UsersOperation,
|
||||||
|
private router: Router, private modal: ModalService) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.createForm();
|
||||||
|
|
||||||
|
this.route.paramMap.subscribe((params) => this.initControl(params));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async initControl(params: ParamMap) {
|
||||||
|
this.userId = +params.get('userId');
|
||||||
|
|
||||||
|
const user = await this.users.getSingle(this.userId);
|
||||||
|
|
||||||
|
this.username = user.name;
|
||||||
|
this.isNative = user.native;
|
||||||
|
|
||||||
|
this.userForm.reset({
|
||||||
|
name: user.name,
|
||||||
|
type: user.type
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private createForm() {
|
||||||
|
this.userForm = this.fb.group({
|
||||||
|
name: ['', Validators.required],
|
||||||
|
type: ['user'],
|
||||||
|
password: [''],
|
||||||
|
password2: ['']
|
||||||
|
}, { validator: PasswordValidationUtil.matchPassword });
|
||||||
|
}
|
||||||
|
|
||||||
|
public async onSubmit() {
|
||||||
|
try {
|
||||||
|
const v = this.userForm.value;
|
||||||
|
|
||||||
|
if (this.isNative) {
|
||||||
|
const name = this.userForm.controls['name'].dirty ? v.name : null;
|
||||||
|
const password = v.password !== '' ? v.password : null;
|
||||||
|
await this.users.updateUser(this.userId, name, v.type, password);
|
||||||
|
} else {
|
||||||
|
await this.users.updateUser(this.userId, null, v.type);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.userForm.reset({
|
||||||
|
name: v.name,
|
||||||
|
type: v.type,
|
||||||
|
password: '',
|
||||||
|
password2: ''
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
await this.modal.showMessage(new ModalOptionsDatatype({
|
||||||
|
heading: 'Error',
|
||||||
|
body: e.message,
|
||||||
|
acceptText: 'OK',
|
||||||
|
dismisText: '',
|
||||||
|
acceptClass: 'warning'
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" *ngIf="options.dismisText.length > 0" class="btn btn-secondary" (click)="onDismis()">{{options.dismisText}}</button>
|
<button type="button" *ngIf="options.dismisText.length > 0" class="btn btn-secondary" (click)="onDismis()">{{options.dismisText}}</button>
|
||||||
<button type="button" class="btn" [ngClass]="'btn-' + options.acceptClass" (click)="onAccept()">{{options.acceptText}}</button>
|
<button type="button" #acceptButton class="btn" [ngClass]="'btn-' + options.acceptClass" (click)="onAccept()"
|
||||||
|
appFocus>{{options.acceptText}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
|
||||||
import { ModalService } from '../../services/modal.service';
|
import { ModalService } from '../../services/modal.service';
|
||||||
import { ModalOptionsDatatype } from '../../datatypes/modal-options.datatype';
|
import { ModalOptionsDatatype } from '../../datatypes/modal-options.datatype';
|
||||||
|
|
||||||
|
@ -17,6 +17,8 @@ export class ModalContainerComponent implements OnInit {
|
||||||
acceptClass: 'primary'
|
acceptClass: 'primary'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ViewChild('acceptButton') private acceptButton: ElementRef;
|
||||||
|
|
||||||
public show = false;
|
public show = false;
|
||||||
public animate = false;
|
public animate = false;
|
||||||
|
|
||||||
|
@ -42,6 +44,8 @@ export class ModalContainerComponent implements OnInit {
|
||||||
this.show = true;
|
this.show = true;
|
||||||
window.setTimeout(() => this.animate = true, 50);
|
window.setTimeout(() => this.animate = true, 50);
|
||||||
|
|
||||||
|
window.setTimeout(() => this.acceptButton.nativeElement.focus(), 50);
|
||||||
|
|
||||||
return new Promise<void>((resolve, reject) => {
|
return new Promise<void>((resolve, reject) => {
|
||||||
this.currentResolve = resolve;
|
this.currentResolve = resolve;
|
||||||
this.currentReject = reject;
|
this.currentReject = reject;
|
||||||
|
@ -61,6 +65,10 @@ export class ModalContainerComponent implements OnInit {
|
||||||
*/
|
*/
|
||||||
onDismis() {
|
onDismis() {
|
||||||
this.hideModal();
|
this.hideModal();
|
||||||
|
if (this.options.dismisText.length === 0) {
|
||||||
|
this.onAccept();
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (this.currentReject) {
|
if (this.currentReject) {
|
||||||
this.currentReject();
|
this.currentReject();
|
||||||
this.currentResolve = null;
|
this.currentResolve = null;
|
||||||
|
|
Loading…
Reference in a new issue