From 5d18531ec47f242087ce72d354cbbac2418772c9 Mon Sep 17 00:00:00 2001
From: Lukas Metzger <developer@lukas-metzger.com>
Date: Tue, 10 Apr 2018 18:06:13 +0200
Subject: [PATCH] Added /users/create

---
 frontend/src/app/app-routing.module.ts        |  5 ++
 frontend/src/app/app.module.ts                |  4 +-
 .../create-user/create-user.component.html    | 39 ++++++++++++++
 .../create-user/create-user.component.scss    |  0
 .../create-user/create-user.component.ts      | 51 +++++++++++++++++++
 .../src/app/pages/users/users.component.html  |  2 +-
 .../app/partials/select/select.component.html |  8 +--
 .../app/partials/select/select.component.ts   |  1 +
 8 files changed, 104 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/app/pages/create-user/create-user.component.html
 create mode 100644 frontend/src/app/pages/create-user/create-user.component.scss
 create mode 100644 frontend/src/app/pages/create-user/create-user.component.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 19e6b43..eb3c020 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -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
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 9ee199e..5039db6 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -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,
diff --git a/frontend/src/app/pages/create-user/create-user.component.html b/frontend/src/app/pages/create-user/create-user.component.html
new file mode 100644
index 0000000..9d85d84
--- /dev/null
+++ b/frontend/src/app/pages/create-user/create-user.component.html
@@ -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>
\ No newline at end of file
diff --git a/frontend/src/app/pages/create-user/create-user.component.scss b/frontend/src/app/pages/create-user/create-user.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/pages/create-user/create-user.component.ts b/frontend/src/app/pages/create-user/create-user.component.ts
new file mode 100644
index 0000000..4f25fd3
--- /dev/null
+++ b/frontend/src/app/pages/create-user/create-user.component.ts
@@ -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'
+            }));
+        }
+    }
+}
diff --git a/frontend/src/app/pages/users/users.component.html b/frontend/src/app/pages/users/users.component.html
index 2170a37..22dad54 100644
--- a/frontend/src/app/pages/users/users.component.html
+++ b/frontend/src/app/pages/users/users.component.html
@@ -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>
diff --git a/frontend/src/app/partials/select/select.component.html b/frontend/src/app/partials/select/select.component.html
index ac77f4f..c0ce7f7 100644
--- a/frontend/src/app/partials/select/select.component.html
+++ b/frontend/src/app/partials/select/select.component.html
@@ -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>
diff --git a/frontend/src/app/partials/select/select.component.ts b/frontend/src/app/partials/select/select.component.ts
index e34edb5..a83bae5 100644
--- a/frontend/src/app/partials/select/select.component.ts
+++ b/frontend/src/app/partials/select/select.component.ts
@@ -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;