Commit 06e3f333 authored by Thomas Frion's avatar Thomas Frion

[FEAT] Loader when we login

* We add a loader during loading time with api
* We add user information and logout feature in the left side bar
parent e11348ad
......@@ -19,3 +19,10 @@
</form>
</div>
</div>
<div class="loader-container" id="loader">
<div class="loader-box">
<div class="loader"></div>
<p>Chargement...</p>
</div>
</div>
......@@ -2,6 +2,15 @@ $border-color: #ccc;
$input-border-color: #000;
$shadow-color: rgb(200,200,200);
@keyframes spinner {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.global{
display: inline-block;
position: absolute;
......@@ -96,3 +105,42 @@ $shadow-color: rgb(200,200,200);
}
.loader-container{
display: none;
background: rgba($color: #000000, $alpha: .8);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 5;
.loader-box{
display: inline-block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
text-align: center;
padding: 50px;
color: #fff;
.loader{
display: inline-block;
box-sizing: border-box;
border: 3px solid #fff;
border-top-color: transparent;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spinner 1s infinite;
}
p{
font-size: 12pt;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
}
}
}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
/**
......@@ -21,6 +23,7 @@ export class AuthComponent implements OnInit {
loginForm: FormGroup;
error: any;
constructor(
private authService: AuthService,
private router: Router,
......@@ -36,6 +39,7 @@ export class AuthComponent implements OnInit {
}
onSignIn() {
document.getElementById('loader').style.display = "block";
const username = this.loginForm.get('username').value;
const password = this.loginForm.get('password').value;
this.authService.signIn({
......
......@@ -29,7 +29,7 @@ export interface UnitSetting{
export interface Unit{
readonly id?: number,
code: string,
name: string,
nom: string,
email: string,
geom: string,
dept: string,
......@@ -48,7 +48,7 @@ export class UnitModel {
constructor(unit : Unit) {
this.id = unit.id;
this.code = unit.code;
this.name = unit.name;
this.name = unit.nom;
this.email = unit.email;
this.geom = unit.geom;
this.dept = unit.dept;
......
......@@ -8,16 +8,16 @@ export interface User {
readonly id?: number,
password: string,
last_login?: Date,
isSuperuser?: boolean,
is_superuser?: boolean,
username : string,
firstName?: string,
lastName?: string,
first_name?: string,
last_name?: string,
email?: string,
isStaff?: boolean,
isActive?: boolean,
dateJoined?: Date,
is_staff?: boolean,
is_active?: boolean,
date_joined?: Date,
groups?: number[],
userPermissions?: number[],
user_permissions?: number[],
}
/**
......
......@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
import { AuthComponent } from '../auth-component/auth-component.component';
import { environment } from '../../environments/environment';
import { TokenApi } from './api/clients/token.api';
import { Token, TokenRefresh } from './api/models/token';
import { Token } from './api/models/token';
import { CookieService } from './cookie.service';
/**
* @Service :
......@@ -58,15 +58,24 @@ export class AuthService {
this.tokenApi.getUserFromJWT(res.access).then(
(usr) => {
localStorage.setItem(environment.localStorage.unit, JSON.stringify(usr.unit));
localStorage.setItem(
environment.localStorage.user,
JSON.stringify({
name: usr.user.first_name + ' ' + usr.user.last_name,
email: usr.user.email
})
);
this.router.navigate(['home']);
}
).catch(
(e) => {
authComp.error = e.error.detail;
document.getElementById('loader').style.display = "none";
}
);
},(err) => {
authComp.error = err.error.detail;
document.getElementById('loader').style.display = "none";
});
}
......
......@@ -80,10 +80,24 @@
<div class="tab" id="account">
<h1>Mon compte</h1>
<p>
Mes infos
</p>
<p class="logout">
<a [routerLink]="'/logout'"> <i class="fa fa-power-off"></i> Se déconnecter</a>
</p>
<div>
<div>
<b>{{user.name}}</b><br>
< {{user.email}} >
<p class="logout">
<a [routerLink]="'/logout'"> <i class="fa fa-power-off"></i> Se déconnecter</a>
</p>
</div>
<div>
<h2>Unité</h2>
<dl>
<dt><b>Code</b></dt>
<dd>{{unit.code}}</dd>
<dt><b>Nom</b></dt>
<dd>{{unit.nom}}</dd>
<dt><b>Email</b></dt>
<dd><a href="mailto:{{unit.email}}">{{unit.email}}</a></dd>
</dl>
</div>
</div>
</div>
......@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import {Fonctionnalite} from './fonctionnalite';
import { Unit } from '../services/api/models/unit';
import { environment } from '../../environments/environment';
/**
* @SidebarLeftComponent :
* Component for the side bar on the left of the screen
......@@ -16,6 +17,8 @@ export class SidebarLeftComponent implements OnInit {
searchForm: FormGroup;
mapMarkerForm: FormGroup;
user : any;
unit : Unit;
/* List of the different features available on the app */
fonctionnalites : Fonctionnalite[] = [
......@@ -30,7 +33,10 @@ export class SidebarLeftComponent implements OnInit {
constructor(
private fb: FormBuilder
) {}
) {
this.unit = JSON.parse(localStorage.getItem(environment.localStorage.unit));
this.user = JSON.parse(localStorage.getItem(environment.localStorage.user));
}
/**
* Function needed to display or hide tabs on click
......
......@@ -9,6 +9,7 @@ export const environment = {
refreshTokenLifeTime: 12, // The refresh token is valid during 12 hours
localStorage: {
unit: 'pghmUnit',
user: 'pghmUser'
}
};
......
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