From a57b158bc59f7552269aa30449d558ee64f16640 Mon Sep 17 00:00:00 2001
From: Paulo <pimenta@cines.fr>
Date: Mon, 19 Oct 2020 09:06:06 +0200
Subject: [PATCH] refactor(layout): modification du layout de la page
---
.vscode/launch.json | 15 ++
angular.json | 1 +
package-lock.json | 36 +++-
package.json | 9 +-
src/app/account/account.component.html | 28 +++
src/app/account/account.component.scss | 0
src/app/account/account.component.spec.ts | 25 +++
src/app/account/account.component.ts | 15 ++
src/app/account/account.module.ts | 25 +++
.../admin/account.admin.component.html | 11 +
.../admin/account.admin.component.scss | 6 +
.../admin/account.admin.component.spec.ts | 25 +++
.../account/admin/account.admin.component.ts | 22 ++
.../login/account.login.component.html | 35 +++
.../login/account.login.component.scss | 16 ++
.../account/login/account.login.component.ts | 39 ++++
.../login/acount.login.component.spec.ts | 25 +++
src/app/account/services/auth.guard.spec.ts | 16 ++
src/app/account/services/auth.guard.ts | 17 ++
src/app/account/services/auth.service.spec.ts | 16 ++
src/app/account/services/auth.service.ts | 23 ++
src/app/app-routing.module.ts | 15 +-
src/app/app.component.html | 203 +++---------------
src/app/app.component.scss | 135 ++++++++++++
src/app/app.component.ts | 89 +++++++-
src/app/app.module.ts | 30 ++-
src/app/publishapi/publishapi.component.html | 49 ++++-
src/app/publishapi/publishapi.component.scss | 4 +
src/app/publishapi/publishapi.component.ts | 10 +-
src/app/search/search.component.html | 14 +-
src/app/search/search.component.ts | 1 +
src/app/user/model/user.ts | 4 +
src/styles.scss | 10 +
src/themes.scss | 4 +
34 files changed, 770 insertions(+), 203 deletions(-)
create mode 100644 .vscode/launch.json
create mode 100644 src/app/account/account.component.html
create mode 100644 src/app/account/account.component.scss
create mode 100644 src/app/account/account.component.spec.ts
create mode 100644 src/app/account/account.component.ts
create mode 100644 src/app/account/account.module.ts
create mode 100644 src/app/account/admin/account.admin.component.html
create mode 100644 src/app/account/admin/account.admin.component.scss
create mode 100644 src/app/account/admin/account.admin.component.spec.ts
create mode 100644 src/app/account/admin/account.admin.component.ts
create mode 100644 src/app/account/login/account.login.component.html
create mode 100644 src/app/account/login/account.login.component.scss
create mode 100644 src/app/account/login/account.login.component.ts
create mode 100644 src/app/account/login/acount.login.component.spec.ts
create mode 100644 src/app/account/services/auth.guard.spec.ts
create mode 100644 src/app/account/services/auth.guard.ts
create mode 100644 src/app/account/services/auth.service.spec.ts
create mode 100644 src/app/account/services/auth.service.ts
create mode 100644 src/app/user/model/user.ts
create mode 100644 src/themes.scss
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..1348ba4a6
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // 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
diff --git a/angular.json b/angular.json
index 1dba31818..5a1e390ed 100644
--- a/angular.json
+++ b/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": [
diff --git a/package-lock.json b/package-lock.json
index b3b3941b2..12679cd61 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index c1ca1f9f5..f5ab63c06 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/account/account.component.html b/src/app/account/account.component.html
new file mode 100644
index 000000000..4cbb4ffbd
--- /dev/null
+++ b/src/app/account/account.component.html
@@ -0,0 +1,28 @@
+<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
diff --git a/src/app/account/account.component.scss b/src/app/account/account.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/account/account.component.spec.ts b/src/app/account/account.component.spec.ts
new file mode 100644
index 000000000..140216daa
--- /dev/null
+++ b/src/app/account/account.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/src/app/account/account.component.ts b/src/app/account/account.component.ts
new file mode 100644
index 000000000..40c9da940
--- /dev/null
+++ b/src/app/account/account.component.ts
@@ -0,0 +1,15 @@
+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 {
+ }
+
+}
diff --git a/src/app/account/account.module.ts b/src/app/account/account.module.ts
new file mode 100644
index 000000000..17df96694
--- /dev/null
+++ b/src/app/account/account.module.ts
@@ -0,0 +1,25 @@
+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 {
+
+ }
diff --git a/src/app/account/admin/account.admin.component.html b/src/app/account/admin/account.admin.component.html
new file mode 100644
index 000000000..64a870deb
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.html
@@ -0,0 +1,11 @@
+<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
diff --git a/src/app/account/admin/account.admin.component.scss b/src/app/account/admin/account.admin.component.scss
new file mode 100644
index 000000000..ad28dead2
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.scss
@@ -0,0 +1,6 @@
+button{
+ background: rgb(1, 29, 51);
+ border-color: transparent;
+ color: #fff;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/account/admin/account.admin.component.spec.ts b/src/app/account/admin/account.admin.component.spec.ts
new file mode 100644
index 000000000..70787e000
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/src/app/account/admin/account.admin.component.ts b/src/app/account/admin/account.admin.component.ts
new file mode 100644
index 000000000..073f0fc12
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.ts
@@ -0,0 +1,22 @@
+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');
+ }
+
+}
diff --git a/src/app/account/login/account.login.component.html b/src/app/account/login/account.login.component.html
new file mode 100644
index 000000000..6833b9353
--- /dev/null
+++ b/src/app/account/login/account.login.component.html
@@ -0,0 +1,35 @@
+<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>
diff --git a/src/app/account/login/account.login.component.scss b/src/app/account/login/account.login.component.scss
new file mode 100644
index 000000000..90851c06c
--- /dev/null
+++ b/src/app/account/login/account.login.component.scss
@@ -0,0 +1,16 @@
+@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
diff --git a/src/app/account/login/account.login.component.ts b/src/app/account/login/account.login.component.ts
new file mode 100644
index 000000000..61fb1015c
--- /dev/null
+++ b/src/app/account/login/account.login.component.ts
@@ -0,0 +1,39 @@
+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');
+ }
+
+
+
+
+}
diff --git a/src/app/account/login/acount.login.component.spec.ts b/src/app/account/login/acount.login.component.spec.ts
new file mode 100644
index 000000000..8847824b1
--- /dev/null
+++ b/src/app/account/login/acount.login.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/src/app/account/services/auth.guard.spec.ts b/src/app/account/services/auth.guard.spec.ts
new file mode 100644
index 000000000..68889d22d
--- /dev/null
+++ b/src/app/account/services/auth.guard.spec.ts
@@ -0,0 +1,16 @@
+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();
+ });
+});
diff --git a/src/app/account/services/auth.guard.ts b/src/app/account/services/auth.guard.ts
new file mode 100644
index 000000000..32ffbb581
--- /dev/null
+++ b/src/app/account/services/auth.guard.ts
@@ -0,0 +1,17 @@
+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();
+ }
+
+}
diff --git a/src/app/account/services/auth.service.spec.ts b/src/app/account/services/auth.service.spec.ts
new file mode 100644
index 000000000..f1251cacf
--- /dev/null
+++ b/src/app/account/services/auth.service.spec.ts
@@ -0,0 +1,16 @@
+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();
+ });
+});
diff --git a/src/app/account/services/auth.service.ts b/src/app/account/services/auth.service.ts
new file mode 100644
index 000000000..1da746919
--- /dev/null
+++ b/src/app/account/services/auth.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { User } from 'src/app/user/model/user';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthService {
+
+ constructor() { }
+
+ public login(userInfo: User){
+ localStorage.setItem('ACCESS_TOKEN', "access_token");
+ }
+
+ public isLoggedIn(){
+ return localStorage.getItem('ACCESS_TOKEN') !== null;
+
+ }
+
+ public logout(){
+ localStorage.removeItem('ACCESS_TOKEN');
+ }
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e5e37ddbf..9cdbae048 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -12,8 +12,9 @@ import { SettingsmartapiComponent } from './settingsmartapi/settingsmartapi.comp
import { RepositoryinfoComponent } from './repositoryinfo/repositoryinfo.component';
import { SwaggereditorComponent } from './swaggereditor/swaggereditor.component';
import { ElasticsearchComponent } from './elasticsearch/elasticsearch.component'
-import { PublishapiComponent } from './publishapi/publishapi.component'
+import { PublishApiComponent } from './publishapi/publishapi.component'
import { SearchComponent } from './search/search.component';
+import { AccountLoginComponent } from './account/login/account.login.component';
const routes: Routes = [
@@ -29,11 +30,15 @@ const routes: Routes = [
{path: 'settingsmartharvester', component : SettingsmartapiComponent},
{path: 'swaggerapi', component : SwaggereditorComponent},
{path: 'elasticsearch', component : ElasticsearchComponent},
- {path: 'publishapi', component : PublishapiComponent},
+ {path: 'publishapi', component : PublishApiComponent},
{path: 'simplesearch', component : SearchComponent},
- {path: 'advancedsearch', component : SearchComponent}
- ];
-
+ {path: 'advancedsearch', component : SearchComponent},
+ {path: 'auth/login',component: AccountLoginComponent},
+ //{ path: 'register',component: NbRegisterComponent},
+ //{ path: 'logout', component: NbLogoutComponent},
+ //{ path: 'request-password', component: NbRequestPasswordComponent},
+ //{ path: 'reset-password', component: NbRequestPasswordComponent}
+ ]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4a59e3f98..c97df7a10 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,177 +1,28 @@
-<style>
- :host {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- font-size: 14px;
- color: #333;
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- margin: 8px 0;
- }
-
- p {
- margin: 0;
- }
-
- .spacer {
- flex: 1;
- }
-
- .toolbar {
- height: 60px;
- margin: -8px;
- display: flex;
- align-items: center;
- background-color: #badcfd;
- font-weight: 600;
- }
-
- .toolbar img {
- margin: 0 16px;
- }
-
-
- .toolbar #twitter-logo:hover {
- opacity: 0.8;
- }
-
- .content {
- display: flex;
- margin: 32px auto;
- padding: 0 16px;
- max-width: 960px;
- flex-direction: column;
- align-items: center;
- }
-
- svg.material-icons {
- height: 24px;
- width: auto;
- }
-
- svg.material-icons:not(:last-child) {
- margin-right: 8px;
- }
-
-
- a,
- a:visited,
- a:hover {
- color: #1976d2;
- text-decoration: none;
- }
-
- a:hover {
- color: #125699;
- }
-
-
-
-
- footer {
- margin-top: 8px;
- display: flex;
- align-items: center;
- line-height: 20px;
- }
-
- footer a {
- display: flex;
- align-items: center;
- }
-
-
- /* Responsive Styles */
- @media screen and (max-width: 767px) {
-
- .card-container > *:not(.circle-link) ,
- .terminal {
- width: 100%;
- }
-
- .card:not(.highlight-card) {
- height: 16px;
- margin: 8px 0;
- }
-
- .card.highlight-card span {
- margin-left: 72px;
- }
-
- svg#rocket-smoke {
- right: 120px;
- transform: rotate(-5deg);
- }
- }
-
- @media screen and (max-width: 575px) {
- svg#rocket-smoke {
- display: none;
- visibility: hidden;
- }
- }
-</style>
-
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
- <a routerLink="/" routerLinkActive="active">
- <img
- width="80"
- alt="Angular Logo"
- src="assets/images/logo.png"
- />
- </a>
-
-
-
- <button class="menu-button" mat-button [matMenuTriggerFor]="menu">Register</button>
- <mat-menu #menu="matMenu">
-
- <button mat-menu-item routerLink="/login" routerLinkActive="active">Login</button>
- <mat-divider></mat-divider>
-
- <button mat-menu-item [matMenuTriggerFor]="subMenuRepo">Describe your repository</button>
- <mat-menu #subMenuRepo="matMenu">
- <button mat-menu-item routerLink="/repositoryinfo" routerLinkActive="active">SDT administrative information </button>
- <button mat-menu-item routerLink="/repository" routerLinkActive="active">Technical information</button>
- </mat-menu>
-
- <button mat-menu-item routerLink="/publishapi" routerLinkActive="active">Describe access to datasets</button>
-
- <mat-divider></mat-divider>
- <button mat-menu-item [matMenuTriggerFor]="subMenuSetting">Settings</button>
- <mat-menu #subMenuSetting="matMenu">
- <button mat-menu-item routerLink="/settingfdp" routerLinkActive="active">FDP setting</button>
- <button mat-menu-item routerLink="/settingsmartharvester" routerLinkActive="active">SmartHarvester setting</button>
- <button mat-menu-item routerLink="/elasticsearch" routerLinkActive="active">Elasticsearch setting</button>
- </mat-menu>
- </mat-menu>
-
-
- <button class="menu-button" routerLink="/simplesearch" routerLinkActive="active">Search</button>
-
- <h3 style="color:#1f77ac; margin-left: auto; margin-right: auto"> <strong>Publish your datasets in the Federated FAIR Data Space</strong></h3>
-
-</div>
-
-
-
-<div class="content" role="main">
-
- <router-outlet></router-outlet>
-
-
-
-</div>
-
-
-
+<nb-layout>
+
+ <nb-layout-header fixed>
+ <nb-icon (click)="toggleSidebar()" class="sidebar-toggle" icon="menu-2-outline"></nb-icon>
+ <a routerLink="/" routerLinkActive="active">
+ <img width="80"alt="Angular Logo" src="assets/images/logo.png"/>
+ </a>
+ <nb-user style="margin-left:75%; white-space: pre;" name="Paulo Pimenta"
+ title="CINES"
+ [nbContextMenu]="items"
+ nbContextMenuTag="my-context-menu">
+ </nb-user>
+ <button routerLink="/auth/login" nbContextMenuPlacement="right" outline nbButton >Login</button>
+ </nb-layout-header>
+
+ <nb-sidebar responsive start state="compacted">
+ <!--Menu Items-->
+ <nb-menu [items]="items" autoCollapse="true"></nb-menu>
+ </nb-sidebar>
+
+ <nb-layout-column>
+ <router-outlet></router-outlet>
+ </nb-layout-column>
+
+ <nb-layout-footer fixed>Contact us</nb-layout-footer>
+</nb-layout>
+<div class="footer">TEST</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29bb..1eb7c89a4 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,135 @@
+:host {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-size: 14px;
+ color: #333;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin: 8px 0;
+ }
+
+ p {
+ margin: 0;
+ }
+
+ .spacer {
+ flex: 1;
+ }
+
+ .toolbar {
+ height: 60px;
+ margin: -8px;
+ display: flex;
+ align-items: center;
+ background-color: #badcfd;
+ font-weight: 600;
+ }
+
+ .toolbar img {
+ margin: 0 16px;
+ }
+
+
+ .toolbar #twitter-logo:hover {
+ opacity: 0.8;
+ }
+
+ .content {
+ display: flex;
+ margin: 32px auto;
+ padding: 0 16px;
+ max-width: 960px;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ svg.material-icons {
+ height: 24px;
+ width: auto;
+ }
+
+ svg.material-icons:not(:last-child) {
+ margin-right: 8px;
+ }
+
+
+ a,
+ a:visited,
+ a:hover {
+ color: #1976d2;
+ text-decoration: none;
+ }
+
+ a:hover {
+ color: #125699;
+ }
+
+
+
+
+ footer {
+ margin-top: 8px;
+ display: flex;
+ align-items: center;
+ line-height: 20px;
+ }
+
+ footer a {
+ display: flex;
+ align-items: center;
+ }
+
+
+ /* Responsive Styles */
+ @media screen and (max-width: 767px) {
+
+ .card-container > *:not(.circle-link) ,
+ .terminal {
+ width: 100%;
+ }
+
+ .card:not(.highlight-card) {
+ height: 16px;
+ margin: 8px 0;
+ }
+
+ .card.highlight-card span {
+ margin-left: 72px;
+ }
+
+ svg#rocket-smoke {
+ right: 120px;
+ transform: rotate(-5deg);
+ }
+ }
+
+ @media screen and (max-width: 575px) {
+ svg#rocket-smoke {
+ display: none;
+ visibility: hidden;
+ }
+ }
+
+ .sidebar-toggle {
+ padding-right: 1.25rem;
+ text-decoration: none;
+ color: var(--text-hint-color);
+ font-size: 3.5rem;
+ }
+
+ .footer{
+ display: block;
+ margin-top: auto;
+ z-index: 99999!important;
+ overflow: hidden;
+ width: auto;
+ height: 100px;
+ }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 84be744e0..54d1792a1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,14 +1,99 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NbMenuItem, NbSidebarService } from '@nebular/theme';
@Component({
selector: 'app-root',
+ changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
-export class AppComponent {
+export class AppComponent {
title = 'register-front';
+
+ items: NbMenuItem[] = [
+ {
+ title: 'Home',
+ icon: 'home-outline',
+ link: '',
+ pathMatch:'full'
+ },
+ {
+ title: 'Register',
+ icon: 'file-text-outline',
+ link: '/register',
+ pathMatch:'full'
+ },
+ {
+ title: 'Login',
+ icon: 'person-outline',
+ link: '/login',
+ pathMatch:'full'
+ },
+ {
+ title: 'Search',
+ icon: 'search-outline',
+ link: '/simplesearch',
+ pathMatch:'full'
+ },
+ {
+ title: 'Describe your repository',
+ icon: 'cube-outline',
+
+ children: [
+ {
+ title: 'SDT information',
+ link: '/repositoryinfo',
+ pathMatch:'full',
+ icon: 'flash-outline',
+ },
+ {
+ title: 'Technical information',
+ link: '/repository',
+ pathMatch:'full',
+ icon: 'text-outline',
+ },
+ ],
+ },
+ {
+ title: 'Describe access to datasets',
+ icon: 'clipboard-outline',
+ link: '/publishapi',
+ pathMatch:'full'
+ },
+ {
+ title: 'Settings',
+ icon: 'options-2-outline',
+ children: [
+ {
+ title: 'FDP settings',
+ link: '/settingfdp',
+ pathMatch:'full'
+ },
+ {
+ title: 'SmartHarvester settings',
+ link: '/settingsmartharvester',
+ pathMatch:'full'
+ },
+ {
+ title: 'Elasticsearch settings',
+ link: '/elasticsearch',
+ pathMatch:'full'
+ }
+ ],
+ },
+ ];
+
+ constructor(private readonly sidebarService: NbSidebarService) {
+ }
+
+ toggleSidebar(): boolean {
+ this.sidebarService.toggle(true);
+ return false;
+ }
+
+
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b4cdc4183..16b0cb883 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,9 +32,16 @@ import { FileSaverModule } from 'ngx-filesaver';
import { SwaggereditorComponent } from './swaggereditor/swaggereditor.component';
import { AppConfiguration } from './AppConfiguration';
import { ElasticsearchComponent } from './elasticsearch/elasticsearch.component';
-import { PublishapiComponent } from './publishapi/publishapi.component';
+import { PublishApiComponent } from './publishapi/publishapi.component';
import { SearchComponent } from './search/search.component'
import { ParseXmlService } from './services/parse-xml.service';
+import { NbMenuModule,
+ NbThemeModule,NbStepperModule,
+ NbCardModule, NbSidebarModule, NbLayoutModule,
+ NbButtonModule, NbIconModule, NbInputModule, NbContextMenuModule, NbUserModule } from '@nebular/theme/';
+import { NbEvaIconsModule } from '@nebular/eva-icons';
+import { AccountComponent } from './account/account.component';
+import { AccountModule } from './account/account.module';
@@ -53,8 +60,9 @@ import { ParseXmlService } from './services/parse-xml.service';
RepositoryinfoComponent,
SwaggereditorComponent,
ElasticsearchComponent,
- PublishapiComponent,
- SearchComponent
+ PublishApiComponent,
+ SearchComponent,
+ AccountComponent
],
imports: [
BrowserModule,
@@ -69,8 +77,20 @@ import { ParseXmlService } from './services/parse-xml.service';
FormsModule,
ReactiveFormsModule,
HttpClientModule,
- FileSaverModule
-
+ FileSaverModule,
+ NbStepperModule,
+ NbCardModule,
+ NbThemeModule.forRoot({ name: 'default' }),
+ NbLayoutModule,
+ NbSidebarModule.forRoot(),
+ NbContextMenuModule,
+ NbButtonModule,
+ NbMenuModule.forRoot(),
+ NbIconModule,
+ NbEvaIconsModule,
+ NbInputModule,
+ NbUserModule,
+ AccountModule
],
providers: [
AppConfiguration,
diff --git a/src/app/publishapi/publishapi.component.html b/src/app/publishapi/publishapi.component.html
index ebded102e..1393c62ce 100644
--- a/src/app/publishapi/publishapi.component.html
+++ b/src/app/publishapi/publishapi.component.html
@@ -1,5 +1,46 @@
-<p>publishapi works!</p>
-<br><br>
-<br><br>
-<button class="next-step-button" routerLink="/datasets" routerLinkActive="active" >Next step</button>
+<!--<button class="next-step-button" routerLink="/datasets" routerLinkActive="active" >Next step</button>-->
+
+<!--Nebula example-->
+
+<nb-card>
+ <nb-card-body>
+ <nb-stepper orientation="horizontal" disableStepNavigation>
+ <nb-step [label]="labelOne">
+ <ng-template #labelOne>First step</ng-template>
+ <h4>Map Schema</h4>
+ <p class="lorem">
+ Map your metadata schema with FDP schema
+ </p>
+ <button class="prev-button" nbButton disabled nbStepperNext>prev</button>
+ <button class="next-button" nbButton nbStepperNext>next</button>
+ </nb-step>
+ <nb-step [label]="labelTwo">
+ <ng-template #labelTwo>Second step</ng-template>
+ <h4>Missing data</h4>
+ <p class="lorem">
+ Add missing informations
+ </p>
+ <button class="prev-button" nbButton nbStepperPrevious>prev</button>
+ <button class="next-button" nbButton nbStepperNext>next</button>
+ </nb-step>
+ <nb-step label="Third step">
+ <h4>Ontology match</h4>
+ <p class="lorem">
+ Align with ontologies
+ </p>
+ <button class="prev-button" nbButton nbStepperPrevious>prev</button>
+ <button class="next-button" nbButton nbStepperNext>next</button>
+ </nb-step>
+ <nb-step [label]="labelFour">
+ <ng-template #labelFour>Fourth step</ng-template>
+ <h4>Done</h4>
+ <p class="lorem">
+ Your API is FAIRFIED :-)
+ </p>
+ <button class="prev-button" nbButton nbStepperPrevious>prev</button>
+ <button class="next-button" nbButton disabled nbStepperNext>next</button>
+ </nb-step>
+ </nb-stepper>
+ </nb-card-body>
+ </nb-card>
\ No newline at end of file
diff --git a/src/app/publishapi/publishapi.component.scss b/src/app/publishapi/publishapi.component.scss
index e69de29bb..b4051cfb6 100644
--- a/src/app/publishapi/publishapi.component.scss
+++ b/src/app/publishapi/publishapi.component.scss
@@ -0,0 +1,4 @@
+
+.prev-button {
+ margin-right: 1rem;
+ }
\ No newline at end of file
diff --git a/src/app/publishapi/publishapi.component.ts b/src/app/publishapi/publishapi.component.ts
index 4a088e58c..f3ed41202 100644
--- a/src/app/publishapi/publishapi.component.ts
+++ b/src/app/publishapi/publishapi.component.ts
@@ -1,4 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { ComponentFactoryResolver, OnDestroy, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { Directive, ViewContainerRef } from '@angular/core';
+
+
+
@Component({
@@ -6,11 +11,12 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './publishapi.component.html',
styleUrls: ['./publishapi.component.scss']
})
-export class PublishapiComponent implements OnInit {
+export class PublishApiComponent implements OnInit {
constructor() { }
ngOnInit(): void {
+
}
goToLink() {
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
index aa5547fc6..c82011058 100644
--- a/src/app/search/search.component.html
+++ b/src/app/search/search.component.html
@@ -1,9 +1,15 @@
+
<form class="form-inline "[formGroup]="Form">
- <input class="form-control" type="text" placeholder="Search" aria-label="Search" formControlName="keyword">
- <button type="submit" (click)="simpleSearch()">Search</button>
+ <nb-card>
+ <nb-card-body class="example-items-col">
+ <input class="form-control" type="text" nbInput shape="round" placeholder="Search" formControlName="keyword">
+ <p>
+ <button type="submit" (click)="simpleSearch()">Search</button>
+ </p>
+ </nb-card-body>
+ </nb-card>
</form>
-
<div *ngIf="!isXmlItemsEmpty()" class="w3-container">
<table class="w3-table-all w3-card-4">
<thead>
@@ -15,7 +21,7 @@
<tr *ngFor="let item of xmlItems">
<td><a href="{{item.uri.value}}" target="blank">{{item.uri.value}}</a></td>
<td>{{item.title.value}}</td>
- <td>{{item.description.value.substr(0,250) }}... </td>
+ <td>{{item.description.value.substr(0,250)}}</td>
</tr>
</tbody>
</table>
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 354ae12c4..e6c43c643 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -54,6 +54,7 @@ FILTER (contains( ?description, "'+ this.Form.value.keyword +'") || contains( ?t
this.parserService.getXmlResult("http://10.6.10.9:8888/blazegraph/sparql",query).subscribe(
data=>{
+ console.error("Datta :", data)
if (data){
data.results.bindings.forEach(element => {
this.xmlItems.push(element);
diff --git a/src/app/user/model/user.ts b/src/app/user/model/user.ts
new file mode 100644
index 000000000..f2e545244
--- /dev/null
+++ b/src/app/user/model/user.ts
@@ -0,0 +1,4 @@
+export interface User {
+ email: string;
+ password: string;
+}
diff --git a/src/styles.scss b/src/styles.scss
index 34d6206b9..3c4e4a354 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -78,3 +78,13 @@ textarea {
* {
font-family: Arial, Helvetica, sans-serif;
}
+
+@import 'themes.scss';
+
+// framework component styles
+@import '~@nebular/theme/styles/globals';
+
+// install the framework styles
+@include nb-install() {
+ @include nb-theme-global();
+};
\ No newline at end of file
diff --git a/src/themes.scss b/src/themes.scss
new file mode 100644
index 000000000..50c7f9a44
--- /dev/null
+++ b/src/themes.scss
@@ -0,0 +1,4 @@
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/default';
+@import '~@nebular/theme/styles/themes/dark';
+
--
GitLab