Added /users/create
This commit is contained in:
parent
193b17ac19
commit
5d18531ec4
|
@ -1,3 +1,4 @@
|
||||||
|
import { CreateUserComponent } from './pages/create-user/create-user.component';
|
||||||
import { EditUserComponent } from './pages/edit-user/edit-user.component';
|
import { EditUserComponent } from './pages/edit-user/edit-user.component';
|
||||||
import { AdminGuard } from './services/admin-guard.service';
|
import { AdminGuard } from './services/admin-guard.service';
|
||||||
import { UsersComponent } from './pages/users/users.component';
|
import { UsersComponent } from './pages/users/users.component';
|
||||||
|
@ -68,6 +69,10 @@ const routes: Routes = [
|
||||||
path: 'users',
|
path: 'users',
|
||||||
component: UsersComponent
|
component: UsersComponent
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'users/create',
|
||||||
|
component: CreateUserComponent
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'users/:userId',
|
path: 'users/:userId',
|
||||||
component: EditUserComponent
|
component: EditUserComponent
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { CreateUserComponent } from './pages/create-user/create-user.component';
|
||||||
import { EditUserComponent } from './pages/edit-user/edit-user.component';
|
import { EditUserComponent } from './pages/edit-user/edit-user.component';
|
||||||
import { UsersOperation } from './operations/users.operations';
|
import { UsersOperation } from './operations/users.operations';
|
||||||
import { AdminGuard } from './services/admin-guard.service';
|
import { AdminGuard } from './services/admin-guard.service';
|
||||||
|
@ -58,7 +59,8 @@ import { UsersComponent } from './pages/users/users.component';
|
||||||
CreateSlaveComponent,
|
CreateSlaveComponent,
|
||||||
CreateAuthComponent,
|
CreateAuthComponent,
|
||||||
UsersComponent,
|
UsersComponent,
|
||||||
EditUserComponent
|
EditUserComponent,
|
||||||
|
CreateUserComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-6 col-lg-3">
|
||||||
|
<p class="font-weight-bold">Create user</p>
|
||||||
|
|
||||||
|
<form autocomplete="off" [formGroup]="userForm" (ngSubmit)="onSubmit()">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<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">
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password" class="form-control auto-validstate" formControlName="password" appFocus />
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Password is required.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Repeat password</label>
|
||||||
|
<input type="password" class="form-control auto-validstate" formControlName="password2" />
|
||||||
|
<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>
|
51
frontend/src/app/pages/create-user/create-user.component.ts
Normal file
51
frontend/src/app/pages/create-user/create-user.component.ts
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
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 { ModalOptionsDatatype } from '../../datatypes/modal-options.datatype';
|
||||||
|
import { PasswordValidationUtil } from '../../utils/password-validation.util';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-create-user',
|
||||||
|
templateUrl: './create-user.component.html',
|
||||||
|
styleUrls: ['./create-user.component.scss']
|
||||||
|
})
|
||||||
|
export class CreateUserComponent implements OnInit {
|
||||||
|
|
||||||
|
public userForm: FormGroup;
|
||||||
|
|
||||||
|
constructor(private fb: FormBuilder, private route: ActivatedRoute, private users: UsersOperation,
|
||||||
|
private router: Router, private modal: ModalService) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.createForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
private createForm() {
|
||||||
|
this.userForm = this.fb.group({
|
||||||
|
name: ['', Validators.required],
|
||||||
|
type: ['user', Validators.required],
|
||||||
|
password: ['', Validators.required],
|
||||||
|
password2: ['']
|
||||||
|
}, { validator: PasswordValidationUtil.matchPassword });
|
||||||
|
}
|
||||||
|
|
||||||
|
public async onSubmit() {
|
||||||
|
try {
|
||||||
|
const v = this.userForm.value;
|
||||||
|
|
||||||
|
const newUser = await this.users.create(v.name, v.type, v.password);
|
||||||
|
|
||||||
|
this.router.navigate(['/users', newUser.id.toString()]);
|
||||||
|
} catch (e) {
|
||||||
|
await this.modal.showMessage(new ModalOptionsDatatype({
|
||||||
|
heading: 'Error',
|
||||||
|
body: e.message,
|
||||||
|
acceptText: 'OK',
|
||||||
|
dismisText: '',
|
||||||
|
acceptClass: 'warning'
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="row justify-content-end">
|
<div class="row justify-content-end">
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<button class="btn btn-secondary btn-sm">Add user</button>
|
<button routerLink="create/" class="btn btn-secondary btn-sm">Add user</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6 mt-2 mt-md-0">
|
<div class="col-12 col-md-6 mt-2 mt-md-0">
|
||||||
<app-pagesize class="float-md-right" [pagesizes]="gs.pageSizes" [currentPagesize]="gs.pageSize" (pagesizeChange)="onPagesizeChange($event)"></app-pagesize>
|
<app-pagesize class="float-md-right" [pagesizes]="gs.pageSizes" [currentPagesize]="gs.pageSize" (pagesizeChange)="onPagesizeChange($event)"></app-pagesize>
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="btn btn-sm dropdown-toggle no-shadow" (click)="toggleOpen()" [class.disabled]="!enabled">
|
<a class="btn btn-sm dropdown-toggle no-shadow" (click)="toggleOpen()" [class.disabled]="!enabled">
|
||||||
{{ buttonText() }}
|
{{ buttonText() }}
|
||||||
</button>
|
</a>
|
||||||
<div class="dropdown-menu" [class.show]="open">
|
<div class="dropdown-menu" [class.show]="open">
|
||||||
<span class="dropdown-item cursor-pointer" (click)="reset()">Clear</span>
|
<span class="dropdown-item cursor-pointer" *ngIf="notNull === false" (click)="reset()">Clear</span>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider" *ngIf="notNull === false"></div>
|
||||||
<span *ngFor="let option of options" [class.active]="isActive(option)" class="dropdown-item cursor-pointer"
|
<span *ngFor="let option of options" [class.active]="isActive(option)" class="dropdown-item cursor-pointer"
|
||||||
(click)="onClick(option)">{{ option }}</span>
|
(click)="onClick(option)">{{ option }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,6 +16,7 @@ export class SelectComponent implements OnInit, ControlValueAccessor {
|
||||||
@Input() options: Array<string> = [];
|
@Input() options: Array<string> = [];
|
||||||
@Input() emptyText = 'Choose..';
|
@Input() emptyText = 'Choose..';
|
||||||
@Input() multiple = false;
|
@Input() multiple = false;
|
||||||
|
@Input() notNull = false;
|
||||||
|
|
||||||
public open = false;
|
public open = false;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue