Added frontend for setup

frontend/src/app/app-routing.module.ts

@@ -15,6 +15,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './pages/login/login.component';
 import { EditAuthComponent } from './pages/edit-auth/edit-auth.component';
+import { SetupComponent } from './pages/setup/setup.component';
 
 const routes: Routes = [
     {
@@ -29,6 +30,10 @@ const routes: Routes = [
         data: { logout: true },
         canActivate: [LoggedOutGuard]
     },
+    {
+        path: 'setup',
+        component: SetupComponent
+    },
     {
         path: '',
         pathMatch: 'prefix',

frontend/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { EditAuthComponent } from './pages/edit-auth/edit-auth.component';
 import { SelectComponent } from './partials/select/select.component';
 import { CreateSlaveComponent } from './pages/create-slave/create-slave.component';
 import { UsersComponent } from './pages/users/users.component';
+import { SetupComponent } from './pages/setup/setup.component';
 
 @NgModule({
   declarations: [
@@ -72,7 +73,8 @@ import { UsersComponent } from './pages/users/users.component';
     SearchComponent,
     EditAuthLineComponent,
     EditAuthAddComponent,
-    EditCredentialsComponent
+    EditCredentialsComponent,
+    SetupComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/pages/setup/setup.component.html

@@ -0,0 +1,89 @@
+<div class="row">
+    <div class="col-12">
+        <p class="font-weight-bold">Install PDNS Manager</p>
+    </div>
+</div>
+<form autocomplete="off" [formGroup]="setupForm" (ngSubmit)="onSubmit()">
+    <div class="row">
+        <div class="col-12 col-md-6 col-lg-3" formGroupName="db">
+            <p class="font-weight-bold">Database</p>
+
+            <div class="form-group">
+                <label>Host</label>
+                <input type="text" class="form-control auto-invalid" formControlName="host" />
+                <div class="invalid-feedback">
+                    Host can not be empty.
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label>User</label>
+                <input type="text" class="form-control auto-invalid" formControlName="user" />
+                <div class="invalid-feedback">
+                    User can not be empty.
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" class="form-control auto-invalid" formControlName="password" />
+            </div>
+
+            <div class="form-group">
+                <label>Database</label>
+                <input type="text" class="form-control auto-invalid" formControlName="database" />
+                <div class="invalid-feedback">
+                    Database can not be empty.
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label>Port</label>
+                <input type="text" class="form-control auto-invalid" formControlName="port" />
+                <div class="invalid-feedback">
+                    Port must be positive integer.
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-md-6 col-lg-3 offset-lg-1" formGroupName="admin">
+            <p class="font-weight-bold">Initial admin user</p>
+
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" class="form-control auto-invalid" formControlName="name" />
+                <div class="invalid-feedback">
+                    Username can not be empty.
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" class="form-control auto-validstate" formControlName="password" />
+                <div class="invalid-feedback">
+                    Password can not be empty.
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label>Repeat password</label>
+                <input type="text" class="form-control auto-validstate" formControlName="password2" />
+                <div class="invalid-feedback">
+                    Passwords do not match.
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-md-6 col-lg-3 offset-lg-1">
+            <app-alert *ngIf="errorMessage">
+                <app-alert-message>{{ errorMessage }}</app-alert-message>
+            </app-alert>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <button type="submit" class="btn btn-primary float-right float-md-left" [disabled]="!setupForm.valid || setupForm.pristine">Setup</button>
+            <app-fa-icon class="ml-3" icon="spinner" size=2 animate="pulse" [hidden]="!loading"></app-fa-icon>
+        </div>
+    </div>
+</form>

frontend/src/app/pages/setup/setup.component.ts

@@ -0,0 +1,75 @@
+import { HttpService } from './../../services/http.service';
+import { PasswordValidationUtil } from './../../utils/password-validation.util';
+import { Router } from '@angular/router';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
+import { OnInit, Component } from '@angular/core';
+
+@Component({
+    selector: 'app-setup',
+    templateUrl: './setup.component.html',
+    styleUrls: ['./setup.component.scss']
+})
+export class SetupComponent implements OnInit {
+
+    public setupForm: FormGroup;
+
+    public errorMessage = '';
+
+    public loading = false;
+
+    constructor(private fb: FormBuilder, private router: Router, private http: HttpService) { }
+
+    ngOnInit() {
+        this.createForm();
+    }
+
+    private createForm() {
+        this.setupForm = this.fb.group({
+            db: this.fb.group({
+                host: ['', Validators.required],
+                user: ['', Validators.required],
+                password: [''],
+                database: ['', Validators.required],
+                port: ['3306', [Validators.required, Validators.pattern(/^[0-9]+$/)]]
+            }),
+            admin: this.fb.group({
+                name: ['', Validators.required],
+                password: ['', Validators.required],
+                password2: ['']
+            }, { validator: PasswordValidationUtil.matchPassword })
+        });
+    }
+
+    public async onSubmit() {
+        this.errorMessage = '';
+        this.setupForm.disable();
+        this.loading = true;
+
+        try {
+            const res = await this.http.post('/setup', {
+                db: this.setupForm.value.db,
+                admin: {
+                    name: this.setupForm.value.admin.name,
+                    password: this.setupForm.value.admin.password
+                }
+            });
+
+            this.router.navigate(['/']);
+        } catch (e) {
+            switch (e.response.status) {
+                case 404:
+                    this.errorMessage = 'The application has already been setup or the backend is misconfigured.';
+                    break;
+                case 500:
+                    this.errorMessage = e.response.data.error;
+                    break;
+                default:
+                    this.errorMessage = e.message;
+                    break;
+            }
+
+            this.loading = false;
+            this.setupForm.enable();
+        }
+    }
+}