some work on sessions

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

@@ -0,0 +1,3 @@
+<pre>
+    {{authService.account | json}}
+</pre>

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

@@ -0,0 +1,17 @@
+import {Component, OnInit} from '@angular/core';
+import {AuthService} from "../auth.service";
+
+@Component({
+    selector: 'app-account-details',
+    templateUrl: './account-details.component.html',
+    styleUrls: ['./account-details.component.css']
+})
+export class AccountDetailsComponent implements OnInit {
+
+    constructor(private authService: AuthService) {
+    }
+
+    ngOnInit() {
+    }
+
+}

web/angular/src/app/api.service.ts

@@ -1,11 +1,16 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {Project} from "./models/project";
+import {Credentials} from "./models/credentials";
 
 @Injectable()
 export class ApiService {
 
-    private url: string = "http://localhost:42901";
+    private url: string = "http://localhost/api";
+    private options: {
+        withCredentials: true,
+        responseType: "json"
+    };
 
     constructor(
         private http: HttpClient,
@@ -13,22 +18,36 @@ export class ApiService {
     }
 
     getLogs() {
-        return this.http.post(this.url + "/logs", "{\"level\":6, \"since\":1}");
+        return this.http.post(this.url + "/logs", "{\"level\":6, \"since\":1}", this.options);
     }
 
     getProjects() {
-        return this.http.get(this.url + "/project/list")
+        return this.http.get(this.url + "/project/list", this.options)
     }
 
     getProject(id: number) {
-        return this.http.get(this.url + "/project/get/" + id)
+        return this.http.get(this.url + "/project/get/" + id, this.options)
     }
 
     createProject(project: Project) {
-        return this.http.post(this.url + "/project/create", project)
+        return this.http.post(this.url + "/project/create", project, this.options)
     }
 
     updateProject(project: Project) {
-        return this.http.post(this.url + "/project/update/" + project.id, project)
+        return this.http.post(this.url + "/project/update/" + project.id, project, this.options)
     }
+
+    register(credentials: Credentials) {
+        return this.http.post(this.url + "/register", credentials, this.options)
+    }
+
+    login(credentials: Credentials) {
+        return this.http.post(this.url + "/login", credentials, this.options)
+    }
+
+    getAccountDetails() {
+        return this.http.get(this.url + "/account", this.options)
+    }
+
+
 }

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

@@ -9,12 +9,12 @@ 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";
+import {AccountDetailsComponent} from "./account-details/account-details.component";
 
 const routes: Routes = [
     {path: "log", component: LogsComponent},
     {path: "login", component: LoginComponent},
-    {path: "new_account", component: CreateAccountComponent},
+    {path: "account", component: AccountDetailsComponent},
     {path: "projects", component: ProjectListComponent},
     {path: "project/:id", component: ProjectDashboardComponent},
     {path: "project/:id/update", component: UpdateProjectComponent},

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

@@ -4,6 +4,8 @@
     <button mat-button [class.mat-accent]="router.url == '/projects'" class="nav-link" [routerLink]="'projects'">{{"nav.project_list" | translate}}</button>
     <button mat-button [class.mat-accent]="router.url == '/new_project'" class="nav-link" [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
     <span class="nav-spacer"></span>
+    <button mat-button [class.mat-accent]="router.url == '/login'" class="nav-link"
+            [routerLink]="'login'">{{"nav.login" | translate}}</button>
     <mat-form-field [floatLabel]="'never'">
         <mat-select [placeholder]="'nav.langSelect' | translate" (selectionChange)="langChange($event)">
             <mat-option *ngFor="let lang of langList" [value]="lang.lang">

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

@@ -19,12 +19,14 @@ import {
     MatMenuModule,
     MatPaginatorIntl,
     MatPaginatorModule,
+    MatProgressBarModule,
     MatSelectModule,
     MatSliderModule,
     MatSlideToggleModule,
     MatSnackBarModule,
     MatSortModule,
     MatTableModule,
+    MatTabsModule,
     MatToolbarModule,
     MatTreeModule
 } from "@angular/material";
@@ -41,7 +43,7 @@ import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate
 import {TranslateHttpLoader} from "@ngx-translate/http-loader";
 import {TranslatedPaginator} from "./TranslatedPaginatorConfiguration";
 import {LoginComponent} from './login/login.component';
-import {CreateAccountComponent} from './create-account/create-account.component';
+import {AccountDetailsComponent} from './account-details/account-details.component';
 
 
 export function createTranslateLoader(http: HttpClient) {
@@ -59,7 +61,7 @@ export function createTranslateLoader(http: HttpClient) {
         UpdateProjectComponent,
         SnackBarComponent,
         LoginComponent,
-        CreateAccountComponent,
+        AccountDetailsComponent,
     ],
     imports: [
         BrowserModule,
@@ -94,7 +96,9 @@ export function createTranslateLoader(http: HttpClient) {
                 }
             }
         ),
-        MatSelectModule
+        MatSelectModule,
+        MatProgressBarModule,
+        MatTabsModule
 
     ],
     exports: [],

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

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

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

@@ -1,30 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-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/create-project/create-project.component.ts

@@ -12,7 +12,7 @@ import {Router} from "@angular/router";
 })
 export class CreateProjectComponent implements OnInit {
 
-    project = new Project();
+    project = <Project>{};
 
     constructor(private apiService: ApiService,
                 private messengerService: MessengerService,

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

@@ -1,3 +1,8 @@
 .mat-form-field {
     width: 100%;
 }
+
+.pad {
+    padding-top: 2em;
+}
+

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

@@ -1,8 +1,8 @@
 <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-tab-group>
+            <mat-tab [label]="'login.title' | translate" class="pad">
                 <mat-form-field appearance="outline">
                     <mat-label>{{"login.username" | translate}}</mat-label>
                     <input type="text" matInput [(ngModel)]="credentials.username">
@@ -12,11 +12,32 @@
                     <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>
+
+                <button mat-raised-button color="primary"
+                        (click)="login()">{{"login.login" | translate}}</button>
+            </mat-tab>
+            <mat-tab [label]="'create_account.title' | translate" class="pad">
+                <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>
+
+                <button mat-raised-button color="primary" [disabled]="!canCreate()"
+                        (click)="register()">{{"create_account.create" | translate}}</button>
+            </mat-tab>
+        </mat-tab-group>
     </mat-card>
 </div>

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

@@ -1,5 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {Credentials} from "../models/credentials";
+import {ApiService} from "../api.service";
+import {MessengerService} from "../messenger.service";
+import {Router} from "@angular/router";
+import {AuthService} from "../auth.service";
 
 @Component({
     selector: 'app-login',
@@ -10,13 +14,34 @@ export class LoginComponent implements OnInit {
 
     credentials: Credentials = <Credentials>{};
 
-    constructor() {
+    constructor(private apiService: ApiService,
+                private messengerService: MessengerService,
+                private router: Router,
+                private authService: AuthService) {
     }
 
     ngOnInit() {
     }
 
-    onClick() {
+    login() {
+        this.authService.login(this.credentials)
+    }
 
+    register() {
+        this.apiService.register(this.credentials)
+            .subscribe(
+                () => {
+                    this.router.navigateByUrl("/account")
+                },
+                error => {
+                    console.log(error);
+                    this.messengerService.show(error.error.message);
+                }
+            )
+    }
+
+    canCreate(): boolean {
+        return this.credentials.username && this.credentials.username != "" &&
+            this.credentials.password == this.credentials.repeatPassword
     }
 }

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

@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {ApiService} from "../api.service";
+import {LogEntry} from "../models/logentry";
 
 import _ from "lodash"
 import * as moment from "moment";

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

@@ -1,4 +1,4 @@
-interface LogEntry {
+export interface LogEntry {
     level: string,
     message: string,
     data: any,

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

@@ -0,0 +1,3 @@
+interface Manager {
+    username: string
+}

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

@@ -1,11 +1,10 @@
-export class Project {
-
-    public id: number;
-    public priority: number;
-    public motd: string;
-    public name: string;
-    public clone_url: string;
-    public git_repo: string;
-    public version: string;
-    public public: boolean;
+export interface Project {
+    id: number;
+    priority: number;
+    motd: string;
+    name: string;
+    clone_url: string;
+    git_repo: string;
+    version: string;
+    public: boolean;
 }

web/angular/src/app/project-list/project-list.component.html

@@ -19,6 +19,11 @@
                             <mat-icon>build</mat-icon>{{"project.update" | translate}}</button>
                     </div>
                 </mat-expansion-panel>
+                <span *ngIf="projects && projects.length == 0">
+                    {{"projects.empty" | translate}}
+                </span>
+                <mat-progress-bar mode="indeterminate"
+                                  *ngIf="projects == null"></mat-progress-bar>
             </mat-accordion>
         </mat-card-content>
     </mat-card>

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

@@ -4,7 +4,8 @@
         "langSelect": "Language",
         "logs": "Logs",
         "project_list": "Projects",
-        "new_project": "New Project"
+        "new_project": "New Project",
+        "login": "Login"
     },
     "logs": {
         "filter": "Filter",
@@ -21,7 +22,8 @@
     },
     "projects": {
         "projects": "Projects",
-        "dashboard": "Dashboard"
+        "dashboard": "Dashboard",
+        "empty": "No projects"
     },
     "title": {
         "": "Index",
@@ -30,7 +32,8 @@
         "log": "Logs",
         "new_project": "New project",
         "login": "Login",
-        "new_account": "Create account"
+        "new_account": "Create account",
+        "account": "Account details"
     },
     "project": {
         "name": "Project name",
@@ -51,14 +54,15 @@
         "metadata": "Project metadata"
     },
     "login": {
-        "title": "Manager login",
+        "title": "Login",
         "login": "Login",
         "username": "Username",
         "password": "Password",
-        "repeat_password": "Repeat password"
+        "repeat_password": "Repeat password",
+        "create_account": ""
     },
     "create_account": {
-        "title": "Create manager account",
+        "title": "Register",
         "create": "Create account"
     }
 }

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

@@ -4,7 +4,8 @@
         "langSelect": "Langue",
         "logs": "Journal",
         "project_list": "Projets",
-        "new_project": "Nouveau projet"
+        "new_project": "Nouveau projet",
+        "login": "Ouvrir un session"
     },
     "logs": {
         "filter": "Filtrer",
@@ -21,7 +22,8 @@
     },
     "projects": {
         "projects": "Projets",
-        "dashboard": "Tableau de bord"
+        "dashboard": "Tableau de bord",
+        "empty": "Pas de projets"
     },
     "title": {
         "": "Accueil",
@@ -31,7 +33,8 @@
         "new_project": "Nouveau projet",
         "update": "Modifier",
         "login": "Ouverture de session",
-        "new_account": "Création de compte"
+        "new_account": "Création de compte",
+        "account": "Compte"
     },
     "project": {
         "name": "Nom du projet",
@@ -52,14 +55,15 @@
         "metadata": "Métadonnés du projet"
     },
     "login": {
-        "title": "Identification - chef de projet",
+        "title": "Ouvrir un session",
         "login": "Ouvrir un session",
         "username": "Nom d'utilisateur",
         "password": "Mot de passe",
-        "repeat_password": "Répéter le mot de passe"
+        "repeat_password": "Répéter le mot de passe",
+        "create_account": "Créer un compte"
     },
     "create_account": {
-        "title": "Création d'un compte de chef de projet",
+        "title": "Créer un compte",
         "create": "Créer un compte"
     }
 }

web/angular/src/styles.css

@@ -70,3 +70,11 @@ body {
         max-width: 720px;
     }
 }
+
+.mat-tab-label {
+    width: 100%;
+}
+
+.mat-tab-body {
+    padding-top: 1em;
+}