refactor(layout): modification du layout de la page

.vscode/launch.json

+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file

angular.json

@@ -30,6 +30,7 @@
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/swagger-editor-dist/swagger-editor.css",
+              "node_modules/@nebular/theme/styles/prebuilt/default.css",
               "src/styles.scss"
             ],
             "scripts": [

package-lock.json

@@ -409,9 +409,9 @@
       }
     },
     "@angular/animations": {
-      "version": "9.1.11",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.11.tgz",
-      "integrity": "sha512-VKAExUnEJfo1PDQKagpx2pn+QMZCsPLRiADzTdl4U0VPylK3ALbn4ZNY9UbdwyE2plitz++LkH7sEGGfh+PNrQ=="
+      "version": "9.1.12",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.12.tgz",
+      "integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA=="
     },
     "@angular/cdk": {
       "version": "9.2.4",
@@ -2841,6 +2841,25 @@
         }
       }
     },
+    "@nebular/auth": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-6.2.1.tgz",
+      "integrity": "sha512-s2xiyT5zUxVxz3UULZCjbHpaouPjAfUhPJKjQ5kl92YLIyj1PqFC5+ONiJh27i92rb90iuO0OatvrH//jSoZUA=="
+    },
+    "@nebular/eva-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-5.1.0.tgz",
+      "integrity": "sha512-vyX39xTLpckw44m6vQvdrP0Fz2h2y9PSMTEJj+QXfnaiFrpkaOdyKdzXWmmX4uZugC1qJmuGLQjk5KckQW9UBQ==",
+      "dev": true
+    },
+    "@nebular/theme": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-5.1.0.tgz",
+      "integrity": "sha512-tKhXeEv6d8HUdA0GrXNQxaHNme8KtassYSfH5NIpGHBRNt95t03S3YeQnz/YK5RPfipm+hxYh24PkbdEkOe4hA==",
+      "requires": {
+        "intersection-observer": "0.7.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "9.1.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.9.tgz",
@@ -6152,6 +6171,12 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "eva-icons": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/eva-icons/-/eva-icons-1.1.3.tgz",
+      "integrity": "sha512-QBSEWNbEx1H0numXP1qgxKVCZHonRaky5ft4pGzQBcO4cy7mEja6TuJ8rc7BqX2pmkvetVQWKDH+DK/8y7GTag==",
+      "dev": true
+    },
     "eventemitter3": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
@@ -7616,6 +7641,11 @@
         "ipaddr.js": "^1.9.0"
       }
     },
+    "intersection-observer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz",
+      "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",

package.json

@@ -11,8 +11,8 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.11",
-    "@angular/cdk": "~9.2.4",
+    "@angular/animations": "^9.1.12",
+    "@angular/cdk": "^9.2.4",
     "@angular/common": "~9.1.11",
     "@angular/compiler": "~9.1.11",
     "@angular/core": "~9.1.11",
@@ -21,6 +21,8 @@
     "@angular/platform-browser": "~9.1.11",
     "@angular/platform-browser-dynamic": "~9.1.11",
     "@angular/router": "~9.1.11",
+    "@nebular/auth": "^6.2.1",
+    "@nebular/theme": "^5.1.0",
     "file-saver": "^2.0.2",
     "ngx-filesaver": "^9.0.0",
     "rxjs": "~6.5.5",
@@ -35,10 +37,13 @@
     "@angular/cli": "^9.1.9",
     "@angular/compiler-cli": "~9.1.11",
     "@angular/language-service": "~9.1.11",
+    "@nebular/eva-icons": "^5.1.0",
+    "@schematics/angular": "^9.1.9",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^8.10.64",
     "codelyzer": "^5.0.0",
+    "eva-icons": "^1.1.3",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",

src/app/account/account.component.html

+<div class="card">
+    <h4 class="card-header">Login</h4>
+    <div class="card-body">
+        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
+                <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
+                    <div *ngIf="f.username.errors.required">Username is required</div>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
+                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
+                    <div *ngIf="f.password.errors.required">Password is required</div>
+                </div>
+            </div>
+            <div class="form-group">
+                <button [disabled]="loading" class="btn btn-primary">
+                    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+                    Login
+                </button>
+                <a routerLink="../register" class="btn btn-link">Register</a>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file

src/app/account/account.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/account/account.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/account/account.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AccountLoginComponent } from './login/account.login.component';
+import { NbAlertModule,NbCardModule, NbCheckboxModule,NbButtonModule, NbInputModule } from '@nebular/theme';
+import { AccountAdminComponent } from './admin/account.admin.component';
+
+  
+
+@NgModule({
+  declarations: [AccountLoginComponent, AccountAdminComponent],
+  imports: [
+    CommonModule,
+    NbAlertModule,
+    NbCheckboxModule,
+    FormsModule,
+    NbButtonModule,
+    NbInputModule,
+    ReactiveFormsModule,
+    NbCardModule
+      ],
+})
+export class AccountModule {
+  
+ }

src/app/account/admin/account.admin.component.html

+<div style="text-align:center">
+    <h1>
+      Welcome Super Admin!
+    </h1>
+    <p>
+      <button (click)="logout()">
+        Logout
+      </button>
+    </p>
+    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  </div>
\ No newline at end of file

src/app/account/admin/account.admin.component.scss

+button{
+    background: rgb(1, 29, 51);
+    border-color: transparent;
+    color: #fff;
+    cursor: pointer;
+}
\ No newline at end of file

src/app/account/admin/account.admin.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Account.AdminComponent } from './account.admin.component';
+
+describe('Account.AdminComponent', () => {
+  let component: Account.AdminComponent;
+  let fixture: ComponentFixture<Account.AdminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Account.AdminComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Account.AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/account/admin/account.admin.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+@Component({
+  selector: 'app-account.admin',
+  templateUrl: './account.admin.component.html',
+  styleUrls: ['./account.admin.component.scss']
+})
+export class AccountAdminComponent implements OnInit {
+
+  constructor(private authService: AuthService, private router: Router) { }
+
+  ngOnInit(): void {
+  }
+  
+  logout(){
+    this.authService.logout();
+    this.router.navigateByUrl('/auth/login');
+  }
+
+}

src/app/account/login/account.login.component.html

+<h1 style="text-align:center">AAI EOSC-Pillar</h1>
+<nb-card status="info" style="width: 50%;height: auto; margin: auto;" >
+  <nb-card-header style="text-align: center;">Welcome to the API register</nb-card-header>
+  <nb-card-body class="example-items-col">
+
+<div class="login" style="text-align: center;">
+  <h2 class="login-header">Log in</h2>
+  <form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">
+
+    <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
+      <label class="label" for="email">Email:</label>
+    <input style="margin: auto;" type="email" nbInput shape="semi-round" placeholder="Email" formControlName="email">
+    </p>
+
+    <div *ngIf="isSubmitted && formControls.email.errors" class="help-block">
+      <div *ngIf="formControls.email.errors.required">Email is required</div>
+    </div>
+
+    <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
+      <label class="label" for="passord">Password:</label>
+      <input type="password" nbInput shape="semi-round" placeholder="Password" formControlName="password">
+    </p>
+
+    <div *ngIf="isSubmitted && formControls.password.errors" class="help-block">
+      <div *ngIf="formControls.password.errors.required">Password is required</div>
+    </div>
+
+    <p>
+      <input type="submit" nbButton shape="rectangle" status="info" value="Log in" style="width: auto;height: auto;">
+    </p>
+  </form>
+</div>
+</nb-card-body>
+
+</nb-card>

src/app/account/login/account.login.component.scss

+@import  url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+body {
+    background: #456;
+    font-family: 'Open Sans', sans-serif;
+}
+
+
+.has-error input[type="email"],
+.has-error input[type="password"] {
+    border-color: rgb(216, 12, 12);
+    color: rgb(230, 14, 14);
+}
+
+label {
+width: auto;
+}
\ No newline at end of file

src/app/account/login/account.login.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+@Component({
+  selector: 'app-account-login',
+  templateUrl: './account.login.component.html',
+  styleUrls: ['./account.login.component.scss']
+})
+export class AccountLoginComponent implements OnInit {
+  loginForm: FormGroup;
+  isSubmitted  =  false;
+
+  constructor(private authService: AuthService, private router: Router, private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.loginForm  =  this.formBuilder.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required]
+  });
+  }
+
+  get formControls() { return this.loginForm.controls; }
+
+  login(){
+    console.log(this.loginForm.value);
+    this.isSubmitted = true;
+    if(this.loginForm.invalid){
+      return;
+    }
+    this.authService.login(this.loginForm.value);
+    this.router.navigateByUrl('/admin');
+  }
+  
+
+  
+
+}

src/app/account/login/acount.login.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountLoginComponent } from './account.login.component';
+
+describe('LoginComponent', () => {
+  let component: AccountLoginComponent;
+  let fixture: ComponentFixture<AccountLoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountLoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/account/services/auth.guard.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/account/services/auth.guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService){}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      return this.authService.isLoggedIn();
+  }
+  
+}

src/app/account/services/auth.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});