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,
+}

web/angular/src/assets/i18n/en.json

@@ -28,7 +28,9 @@
         "project": "Project",
         "projects": "Projects",
         "log": "Logs",
-        "new_project": "New project"
+        "new_project": "New project",
+        "login": "Login",
+        "new_account": "Create account"
     },
     "project": {
         "name": "Project name",
@@ -47,5 +49,16 @@
     "dashboard": {
         "title": "Dashboard for",
         "metadata": "Project metadata"
+    },
+    "login": {
+        "title": "Manager login",
+        "login": "Login",
+        "username": "Username",
+        "password": "Password",
+        "repeat_password": "Repeat password"
+    },
+    "create_account": {
+        "title": "Create manager account",
+        "create": "Create account"
     }
 }

web/angular/src/assets/i18n/fr.json

@@ -29,7 +29,9 @@
         "projects": "Projets",
         "log": "Journal",
         "new_project": "Nouveau projet",
-        "update": "Modifier"
+        "update": "Modifier",
+        "login": "Ouverture de session",
+        "new_account": "Création de compte"
     },
     "project": {
         "name": "Nom du projet",
@@ -42,11 +44,23 @@
         "create_subtitle": "todo: sous-titre",
         "public": "Publique",
         "create": "Créer",
-        "motd": "Message du jour"
+        "motd": "Message du jour",
+        "update": "Mettre à jour"
     },
     "dashboard": {
         "title": "Tableau de bord pour ",
         "metadata": "Métadonnés du projet"
+    },
+    "login": {
+        "title": "Identification - chef de projet",
+        "login": "Ouvrir un session",
+        "username": "Nom d'utilisateur",
+        "password": "Mot de passe",
+        "repeat_password": "Répéter le mot de passe"
+    },
+    "create_account": {
+        "title": "Création d'un compte de chef de projet",
+        "create": "Créer un compte"
     }
 }
 

web/angular/src/styles.css

@@ -49,3 +49,24 @@ body {
         max-width: 1440px;
     }
 }
+
+.small-container {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 15px;
+}
+
+@media (min-width: 576px) {
+    .small-container {
+        max-width: 540px;
+    }
+}
+
+@media (min-width: 768px) {
+    .small-container {
+        max-width: 720px;
+    }
+}