login/register forms

web/angular/src/app/app-routing.module.ts

@@ -8,9 +8,13 @@ import {UpdateProjectComponent} from "./update-project/update-project.component"
 import {Title} from "@angular/platform-browser";
 import {filter} from "rxjs/operators";
 import {TranslateService} from "@ngx-translate/core";
+import {LoginComponent} from "./login/login.component";
+import {CreateAccountComponent} from "./create-account/create-account.component";
 
 const routes: Routes = [
     {path: "log", component: LogsComponent},
+    {path: "login", component: LoginComponent},
+    {path: "new_account", component: CreateAccountComponent},
     {path: "projects", component: ProjectListComponent},
     {path: "project/:id", component: ProjectDashboardComponent},
     {path: "project/:id/update", component: UpdateProjectComponent},

web/angular/src/app/app.module.ts

@@ -40,7 +40,8 @@ import {SnackBarComponent} from "./messenger/snack-bar.component";
 import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
 import {TranslateHttpLoader} from "@ngx-translate/http-loader";
 import {TranslatedPaginator} from "./TranslatedPaginatorConfiguration";
-import {Router} from "@angular/router";
+import {LoginComponent} from './login/login.component';
+import {CreateAccountComponent} from './create-account/create-account.component';
 
 
 export function createTranslateLoader(http: HttpClient) {
@@ -57,6 +58,8 @@ export function createTranslateLoader(http: HttpClient) {
         CreateProjectComponent,
         UpdateProjectComponent,
         SnackBarComponent,
+        LoginComponent,
+        CreateAccountComponent,
     ],
     imports: [
         BrowserModule,

web/angular/src/app/create-account/create-account.component.css

@@ -0,0 +1,3 @@
+mat-form-field {
+    width: 100%;
+}

web/angular/src/app/create-account/create-account.component.html

@@ -0,0 +1,30 @@
+<div class="small-container">
+    <mat-card class="mat-elevation-z8">
+        <mat-card-title>{{"create_account.title" | translate}}</mat-card-title>
+        <mat-card-content style="padding: 2em 0 1em">
+            <form>
+                <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+                    <mat-label>{{"login.username" | translate}}</mat-label>
+                    <mat-hint align="end">{{credentials.username?.length || 0}}/16</mat-hint>
+                    <input maxlength="16" type="text" matInput [(ngModel)]="credentials.username" name="username"
+                           required>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+                    <mat-label>{{ "login.password" | translate}}</mat-label>
+                    <input type="password" matInput [(ngModel)]="credentials.password" name="password" required>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline">
+                    <mat-label>{{ "login.repeat_password" | translate}}</mat-label>
+                    <input type="password" matInput [(ngModel)]="credentials.repeatPassword" name="password2"
+                    >
+                </mat-form-field>
+            </form>
+        </mat-card-content>
+        <mat-card-actions>
+            <button mat-raised-button color="primary" [disabled]="!canCreate()"
+                    (click)="onClick()">{{"create_account.create" | translate}}</button>
+        </mat-card-actions>
+    </mat-card>
+</div>

web/angular/src/app/create-account/create-account.component.ts

@@ -0,0 +1,28 @@
+import {Component, OnInit} from '@angular/core';
+import {Credentials} from "../models/credentials";
+
+@Component({
+    selector: 'app-create-account',
+    templateUrl: './create-account.component.html',
+    styleUrls: ['./create-account.component.css']
+})
+export class CreateAccountComponent implements OnInit {
+
+    credentials: Credentials = <Credentials>{};
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+    canCreate(): boolean {
+        return this.credentials.username && this.credentials.username != "" &&
+            this.credentials.password == this.credentials.repeatPassword
+    }
+
+    onClick() {
+        alert("e")
+    }
+
+}

web/angular/src/app/login/login.component.css

@@ -0,0 +1,3 @@
+.mat-form-field {
+    width: 100%;
+}

web/angular/src/app/login/login.component.html

@@ -0,0 +1,22 @@
+<div class="small-container">
+    <mat-card class="mat-elevation-z8">
+        <mat-card-title>{{"login.title" | translate}}</mat-card-title>
+        <mat-card-content style="padding: 2em 0 1em">
+            <form>
+                <mat-form-field appearance="outline">
+                    <mat-label>{{"login.username" | translate}}</mat-label>
+                    <input type="text" matInput [(ngModel)]="credentials.username">
+                </mat-form-field>
+
+                <mat-form-field appearance="outline">
+                    <mat-label>{{ "login.password" | translate}}</mat-label>
+                    <input type="password" matInput [(ngModel)]="credentials.password">
+                </mat-form-field>
+            </form>
+        </mat-card-content>
+        <mat-card-actions>
+            <button mat-raised-button color="primary"
+                    (click)="onClick()">{{"login.login" | translate}}</button>
+        </mat-card-actions>
+    </mat-card>
+</div>

web/angular/src/app/login/login.component.ts

@@ -0,0 +1,22 @@
+import {Component, OnInit} from '@angular/core';
+import {Credentials} from "../models/credentials";
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+    credentials: Credentials = <Credentials>{};
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+    onClick() {
+
+    }
+}

web/angular/src/app/models/credentials.ts

@@ -0,0 +1,5 @@
+export interface Credentials {
+    username: string,
+    password: string,
+    repeatPassword: string,
+}