Commit a57b158b authored by Paulo's avatar Paulo
Browse files

refactor(layout): modification du layout de la page

parent 31ce970f
{
// 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
......@@ -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": [
......
......@@ -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",
......
<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
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();
});
});
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 {
}
}
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 {
}
<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
button{
background: rgb(1, 29, 51);
border-color: transparent;
color: #fff;
cursor: pointer;
}
\ No newline at end of file
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();
});
});
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');
}
}
<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>
@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
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');
}
}
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();
});
});
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();
});
});
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();
}
}
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();
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment