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 { AdminGuard } from './services/admin-guard.service';
|
||||
import { UsersComponent } from './pages/users/users.component';
|
||||
|
@ -68,6 +69,10 @@ const routes: Routes = [
|
|||
path: 'users',
|
||||
component: UsersComponent
|
||||
},
|
||||
{
|
||||
path: 'users/create',
|
||||
component: CreateUserComponent
|
||||
},
|
||||
{
|
||||
path: 'users/:userId',
|
||||
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 { UsersOperation } from './operations/users.operations';
|
||||
import { AdminGuard } from './services/admin-guard.service';
|
||||
|
@ -58,7 +59,8 @@ import { UsersComponent } from './pages/users/users.component';
|
|||
CreateSlaveComponent,
|
||||
CreateAuthComponent,
|
||||
UsersComponent,
|
||||
EditUserComponent
|
||||
EditUserComponent,
|
||||
CreateUserComponent
|
||||
],
|
||||
imports: [
|
||||
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="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 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>
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<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() }}
|
||||
</button>
|
||||
</a>
|
||||
<div class="dropdown-menu" [class.show]="open">
|
||||
<span class="dropdown-item cursor-pointer" (click)="reset()">Clear</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<span class="dropdown-item cursor-pointer" *ngIf="notNull === false" (click)="reset()">Clear</span>
|
||||
<div class="dropdown-divider" *ngIf="notNull === false"></div>
|
||||
<span *ngFor="let option of options" [class.active]="isActive(option)" class="dropdown-item cursor-pointer"
|
||||
(click)="onClick(option)">{{ option }}</span>
|
||||
</div>
|
||||
|
|
|
@ -16,6 +16,7 @@ export class SelectComponent implements OnInit, ControlValueAccessor {
|
|||
@Input() options: Array<string> = [];
|
||||
@Input() emptyText = 'Choose..';
|
||||
@Input() multiple = false;
|
||||
@Input() notNull = false;
|
||||
|
||||
public open = false;
|
||||
|
||||
|
|
Loading…
Reference in a new issue