package-lock.json

@@ -12189,9 +12189,9 @@
       }
     },
     "rxjs": {
-      "version": "6.5.5",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz",
-      "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==",
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
+      "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
       "requires": {
         "tslib": "^1.9.0"
       }

package.json

@@ -26,7 +26,7 @@
     "file-saver": "^2.0.2",
     "ng2-cookies": "^1.0.12",
     "ngx-filesaver": "^9.0.0",
-    "rxjs": "^6.5.5",
+    "rxjs": "^6.6.3",
     "stream": "0.0.2",
     "swagger-editor-dist": "^3.11.5",
     "timers": "^0.1.1",

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.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/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/services/auth.service.ts

-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');
-  }
-}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { LoginComponent } from './login/login.component';
+import { Routes, RouterModule, Route } from '@angular/router';
 import { UserComponent } from './user/user.component';
 import { RepositoryComponent } from './repository/repository.component';
 import { AccessapiComponent } from './accessapi/accessapi.component';
@@ -14,33 +13,49 @@ import { SwaggereditorComponent } from './swaggereditor/swaggereditor.component'
 import { ElasticsearchComponent } from './elasticsearch/elasticsearch.component'
 import { PublishApiComponent } from './publishapi/publishapi.component'
 import { SearchComponent } from './search/search.component';
-import { AccountLoginComponent } from './account/login/account.login.component';
+import { AuthenticationComponent } from './authentication/authentication.component';
+import { SigninComponent } from './authentication/signin/signin.component';
+import { SignupComponent } from './authentication/signup/signup.component';
 import { AppComponent } from './app.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { AuthGuardService } from './authentication/services/auth.guard';
 import { StatsComponent } from './stats/stats.component';
 
+export interface ICustomRoute extends Route {
+  name?: string;
+}
 
-const routes: Routes = [
-                        {path: '', component : StatsComponent},
-                        {path: 'login', component : LoginComponent},
-                        {path: 'user', component : UserComponent},
-                        {path: 'repository', component : RepositoryComponent},
-                        {path: 'repositoryinfo', component : RepositoryinfoComponent},
-                        {path: 'accessapi', component : AccessapiComponent},
-                        {path: 'datasets', component : DatasetsComponent},
-                        {path: 'ontologie', component : OntologieComponent},
-                        {path: 'publish', component : PublishComponent},
-                        {path: 'settingfdp', component : SettingfdpComponent},
-                        {path: 'settingsmartharvester', component : SettingsmartapiComponent},
-                        {path: 'swaggerapi', component : SwaggereditorComponent},
-                        {path: 'elasticsearch', component : ElasticsearchComponent},
-                        {path: 'publishapi', component : PublishApiComponent},
-                        {path: 'simplesearch', component : SearchComponent},
-                        {path: 'advancedsearch', component : SearchComponent},
-                        {path: 'auth/login',component: AccountLoginComponent},
-                       // {path: 'auth/admin', component: AdminComponent, canActivate: [AuthGuard] }
-                        ]
+const routes: ICustomRoute[] = [
+  { path: '', redirectTo: '/auth/signin', pathMatch: 'full' },
+  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuardService],
+      children: [
+        { path: 'simplesearch', component: SearchComponent },
+        { path: 'user', component: UserComponent },
+        { path: 'repository', component: RepositoryComponent },
+        { path: 'repositoryinfo', component: RepositoryinfoComponent },
+        { path: 'accessapi', component: AccessapiComponent },
+        { path: 'datasets', component: DatasetsComponent },
+        { path: 'ontology', component: OntologieComponent },
+        { path: 'publish', component: PublishComponent },
+        { path: 'stats', component: StatsComponent },
+        { path: 'settingfdp', component: SettingfdpComponent },
+        { path: 'settingsmartharvester', component: SettingsmartapiComponent },
+        { path: 'swaggerapi', component: SwaggereditorComponent },
+        { path: 'elasticsearch', component: ElasticsearchComponent },
+        { path: 'publishapi', component: PublishApiComponent },
+        { path: 'advancedsearch', component: SearchComponent },
+      ]
+  },
+  { path: 'auth', component: AuthenticationComponent,name:'',
+      children: [
+        { path: 'signup', component: SignupComponent, data: { animation: 'SignUp'} },
+        { path: 'signin', component: SigninComponent, data: { animation: 'SignIn'} },
+    ]
+  }
+
+]
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule { }
\ No newline at end of file

src/app/app.component.html

-
-<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>
-    <h3 style="width: 100%;text-align: center;"> <strong>{{settingtitle}}</strong></h3>
-
-
-    <nb-user style="white-space: pre;" name="User"
-              title="CINES"
-              badgePosition="right">
-    </nb-user>
-    <button routerLink="/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>
-   <!--<hr style="border-bottom: 1px solid gray; width: 80%; position: absolute;margin-top: 25%;">
-    <p>Test</p>-->
-
-  </nb-layout-column>
-  <nb-layout-footer>Contact us</nb-layout-footer>
-    
-    <!--<div style="background-color: aqua; height: 60px;">Contact us</div>-->
-</nb-layout>
+<router-outlet></router-outlet>

src/app/app.component.ts

-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { NbMenuItem, NbSidebarService } from '@nebular/theme';
-import { AppConfiguration } from './AppConfiguration';
-
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent  {
-  title = 'register-front';
-
-  settingtitle =   this.appConfig.title ;
 
-  items: NbMenuItem[] = [
-    {
-      title: 'Home',
-      icon: 'home-outline',
-      link: '/',
-      pathMatch:'full'
-    },
-    {
-      title: 'Integrate 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: 'Search',
-      icon: 'search-outline',
-      link: '/simplesearch',
-      pathMatch:'full'
-    },
-    {
-      title: 'Settings',
-      icon: 'options-2-outline',
-      children: [
-        {
-          title: 'FFDS settings',
-          link: '/settingfdp',
-          pathMatch:'full'
-        },
-        {
-          title: 'SmartHarvester settings',
-          link: '/settingsmartharvester',
-          pathMatch:'full'
-        }
-      ],
-    },
-  ];
+  constructor() { }
 
-  constructor(
-    private readonly sidebarService: NbSidebarService,
-    private appConfig: AppConfiguration
-    ) {}
+  ngOnInit(): void {
+    
 
-  toggleSidebar(): boolean {
-    this.sidebarService.toggle(true);
-    return false;
   }
 
 
+
 }
 
 

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 
-
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { LoginComponent } from './login/login.component';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatCardModule } from '@angular/material/card';
@@ -35,21 +32,23 @@ import { ElasticsearchComponent } from './elasticsearch/elasticsearch.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, NbSpinnerModule } from '@nebular/theme/';
-import { NbEvaIconsModule } from '@nebular/eva-icons';
-import { AccountComponent } from './account/account.component';
-import { AccountModule } from './account/account.module';
+
+import { AuthenticationComponent } from './authentication/authentication.component';
+import { AuthenticationModule } from './authentication/authentication.module';
 import { SearchModule} from './search/search.module';
 import { StatsComponent } from './stats/stats.component';
+import { NebularModule } from './nebular.module';
+
+import { AppRoutingModule } from './app-routing.module';
+import { NbLayoutModule, NbThemeModule } from '@nebular/theme';
+import { NbAuthModule } from '@nebular/auth/auth.module';
+import { NbDummyAuthStrategy } from '@nebular/auth/strategies/dummy/dummy-strategy';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent,
     RepositoryComponent,
     AccessapiComponent,
     DatasetsComponent,
@@ -63,12 +62,11 @@ import { StatsComponent } from './stats/stats.component';
     ElasticsearchComponent,
     PublishApiComponent,
     SearchComponent,
-    AccountComponent,
-    StatsComponent
+    StatsComponent,
+    DashboardComponent,
     ],
   imports: [
     BrowserModule,
-    AppRoutingModule,
     BrowserAnimationsModule,
     MatMenuModule,
     MatDividerModule,
@@ -80,22 +78,15 @@ import { StatsComponent } from './stats/stats.component';
     ReactiveFormsModule,
     HttpClientModule,
     FileSaverModule,
-    NbStepperModule,
-    NbCardModule,
-    NbThemeModule.forRoot(),
-    NbLayoutModule,
-    NbSidebarModule.forRoot(),
-    NbContextMenuModule,
-    NbButtonModule,
-    NbMenuModule.forRoot(),
-    NbIconModule,
-    NbEvaIconsModule,
-    NbInputModule,
-    NbUserModule,
-    AccountModule,
     SearchModule,
-    NbSpinnerModule
+    AppRoutingModule,
+    AuthenticationModule,
+    NebularModule,    
+    BrowserAnimationsModule,
+    NbThemeModule.forRoot({ name: 'default' }),
+    NbLayoutModule
   ],
+
   providers: [
     AppConfiguration,
     ParseXmlService,

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

+<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>
+    <h3 style="width: 100%;text-align: center;"> <strong>{{settingtitle}}</strong></h3>
+
+
+    <nb-user style="white-space: pre;" name="User"
+              title="CINES"
+              badgePosition="right">
+    </nb-user>
+    <button routerLink="/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>
+   <!--<hr style="border-bottom: 1px solid gray; width: 80%; position: absolute;margin-top: 25%;">
+    <p>Test</p>-->
+
+  </nb-layout-column>
+  <nb-layout-footer>Contact us</nb-layout-footer>
+    
+    <!--<div style="background-color: aqua; height: 60px;">Contact us</div>-->
+</nb-layout>

src/app/authentication/authentication.component.html

+<nb-layout >
+    <nb-layout-column >
+        <div style="text-align: center; margin: auto;">
+            <img width="180" alt="ESOC-PILLAR" src="assets/images/logo.png" />
+            <br><br>
+        </div>
+        <div [@routeAnimations]="o && o.activatedRouteData && o.activatedRouteData['animation']">
+        <router-outlet #o="outlet"></router-outlet>
+        </div>
+    </nb-layout-column>
+</nb-layout>
\ No newline at end of file

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

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