Commit 88d2e626 authored by Thomas Frion's avatar Thomas Frion

Merge branch 'dev'

parents f41dc3c8 f481f480
......@@ -17,8 +17,7 @@ import {AuthGuard} from './services/auth-guard.service';
const routes: Routes = [
{ path: 'auth', component: AuthComponent},
{ path: 'home', canActivate:[AuthGuard],component: AppFrontComponent},
{ path: 'demo',component: AppFrontComponent},
{ path: '', redirectTo: 'auth', pathMatch: 'full'},
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'not-found', component: ErrorPageComponent },
{ path: '**', redirectTo: 'not-found'}
];
......
import { Component } from '@angular/core';
import { Component, NgModule } from '@angular/core';
/**
* @AppComponent :
......
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import { SidebarLeftComponent } from './sidebar-left/sidebar-left.component';
import { CoordMapComponent } from './coord-map/coord-map.component';
import { AuthComponent} from './auth-component/auth-component.component';
import { AppFrontComponent } from './app-front/app-front.component';
import { ErrorPageComponent } from './error-page/error-page.component';
import { CoordMapComponent } from './coord-map/coord-map.component';
import { AuthComponent} from './auth-component/auth-component.component';
import { AppFrontComponent } from './app-front/app-front.component';
import { ErrorPageComponent } from './error-page/error-page.component';
import {AuthService} from './services/auth.service';
import {AuthGuard} from './services/auth-guard.service';
import {AuthService} from './services/auth.service';
import {AuthGuard} from './services/auth-guard.service';
import { SidebarRightComponent } from './sidebar-right/sidebar-right.component';
......@@ -28,7 +30,9 @@ import { SidebarRightComponent } from './sidebar-right/sidebar-right.component';
],
imports: [
BrowserModule,
AppRoutingModule
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule
],
providers: [
AuthService,
......
<div class="global">
<h1> Authentification GendLoc </h1>
<div class="authentification_box">
<form action="" method="post">
<label>Nom</label>
<input type="text" name="username" class="input" autocomplete="off" id="username"/>
<label>Mot de passe </label>
<input type="password" name="password" class="input" autocomplete="off" id="password"/><br/>
<button type="submit" class="login" *ngIf="!authStatus" (click)="onSignIn()">CONNEXION</button>
</form>
</div>
<h1> Authentification GendLoc </h1>
<div class="container-alert" *ngIf="error">
<p>{{error}}</p>
</div>
<div class="authentification_box">
<form [formGroup]="loginForm" (ngSubmit)="onSignIn()">
<div class="input-group">
<label>Nom d'utilisateur</label><br>
<input type="text" name="username" class="input" autocomplete="off" id="username" formControlName="username"/>
</div>
<div class="input-group">
<label>Mot de passe </label><br>
<input type="password" name="password" class="input" autocomplete="off" id="password" formControlName="password"/>
</div>
<button type="submit" class="login" *ngIf="!authStatus">CONNEXION</button>
</form>
</div>
</div>
.global
{
margin:0 auto;
width:800px;
text-align:center;
font-family: "Helvetica",Arial,sans-serif;
font-weight: 500;
}
.authentification_box
{
font-weight: bold;
width: 224px;
margin: 0px auto;
font-size:13px;
text-align: left;
padding: 20px;
background-color: #ffffff;
color: #333;
border: 1px solid #e5e5e5;
box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;
/* vertical center */
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
h1
{
margin-top:10%;
}
.input
{
padding:10px;
border:1px solid #999999;
width:200px;
margin-bottom:10px;
border: 1px solid #e5e5e5;
background: #fbfbfb;
box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
}
$border-color: #e5e5e5;
$shadow-color: rgb(200,200,200);
.login {
font-weight: bold;
padding: 12px 15px;
background: #33CC33;
color: #fff;
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 0px rgba(0,0,0,0.15);
border-width: 1px 1px 3px;
border-style: solid;
border-color: #336600;
text-overflow: ellipsis;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
-moz-box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
}
.login:hover {background-color: #3e8e41}
.global{
display: inline-block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
width:800px;
text-align:center;
font-family: "Helvetica",Arial,sans-serif;
font-weight: 500;
h1{
margin: 20px 0;
}
.container-alert{
margin: 20px auto;
font-size: 11pt;
color: #f00;
font-style: italic;
}
.authentification_box{
display: inline-block;
font-weight: bold;
font-size: 13px;
text-align: left;
padding: 20px;
background: #fff;
color: #333;
border: 1px solid $border-color;
box-shadow: rgba($color: $shadow-color, $alpha: .7) 0 4px 10 -1px;
form{
display: inline-grid;
.input-group{
margin: 10px;
display: inline-block;
}
.input{
padding: 10px;
border: 1px solid $border-color;
width: 200px;
margin-top: 5px;
background: #fbfbfb;
box-shadow: inset 1px 1px 2px rgba($color: $shadow-color, $alpha: .2);
}
.login{
margin-top: 20px;
font-weight: bold;
padding: 12px 15px;
background: #33CC33;
color: #fff;
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 0px rgba($color: #000, $alpha: .15);
border-width: 1px 1px 3px;
border-style: solid;
border-color: #336600;
text-overflow: ellipsis;
display: -moz-inline-stack;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 -1px 0 rgba($color: #fff, $alpha: .1) inset;
-moz-box-shadow: 0 -1px 0 rgba($color: #fff, $alpha: .1) inset;
box-shadow: 0 -1px 0 rgba($color: #fff, $alpha: .1)inset;
}
.login:hover {background-color: #3e8e41}
.login:active{
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
}
}
.login:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
......@@ -17,21 +18,30 @@ import { AuthService } from '../services/auth.service';
export class AuthComponent implements OnInit {
authStatus: boolean;
loginForm: FormGroup;
error: any;
constructor(private authService: AuthService, private router: Router) { }
constructor(
private authService: AuthService,
private router: Router,
private fb: FormBuilder
) { }
ngOnInit() {
this.authStatus = this.authService.isAuth;
this.loginForm = this.fb.group({ // We create the login form
username: [],
password: [],
});
}
onSignIn() {
this.authService.signIn().then(
() => {
console.log('Sign in successful!');
this.authStatus = this.authService.isAuth;
this.router.navigate(['home']);
}
);
const username = this.loginForm.get('username').value;
const password = this.loginForm.get('password').value;
this.authService.signIn({
username: username,
password: password
}, this);
}
onSignOut() {
......
......@@ -15,7 +15,7 @@ export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, public router: Router) { }
canActivate(): boolean{
if(!this.authService.isAuth) {
if(!this.authService.loggedIn()) {
this.router.navigate(['auth']);
return false;
} else {
......
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthComponent } from '../auth-component/auth-component.component';
import { environment } from '../../environments/environment';
import { Token } from './authentication';
/**
* @Service :
*
* Service used for authentification (will need to be update with the API part) =
* Check if the value of the boolean isAuth is true or else wait 2sec before being true
*
* !!!!! Service not complete, needs to be adjusted to our needs, this is only for DEMONSTRATION
* Service used for authentification.
* Get the JWT generated by the API and save it in localStorage.
* If the API returns an error, the service will show the error message on the login page.
*/
@Injectable()
export class AuthService {
isAuth = false;
// Connection
signIn() {
return new Promise(
(resolve, reject) => {
setTimeout(
() => {
this.isAuth = true;
resolve(true);
}, 2000
);
}
);
}
// Disconnection
signOut() {
this.isAuth = false;
}
isAuth = false;
baseUrl = environment.pghmApi;
header = new HttpHeaders({'Content-Type':'application/json'});
constructor(private http: HttpClient, private router : Router) {}
/**
* This method will call /token resource of the PGHM Api (choucas) to get a token
* If the return is a token, we save it and we redirect to the home page, otherwise we show the error message returned by the API.
*
* @param user Object which contains the username and password, required by the api
* @param authComp The graphical component (login page) to print the error message if is necessary
*/
signIn(user : any, authComp: AuthComponent) {
const result = this.http.post<Token>(this.baseUrl + '/token/', JSON.stringify(user),
{headers: this.header}
).toPromise();
result.then((res) => {
localStorage.setItem('pghmToken', JSON.stringify(res));
this.isAuth = true;
this.router.navigate(['home']);
},(err) => {
authComp.error = err.error.detail;
});
}
/**
* We remove the token saved earlier. After that we are disconnected
*/
signOut() {
this.isAuth = false;
localStorage.removeItem('pghmToken');
}
/**
* This method detect if we are connected.
* To know if we are connected, we look for a saved token.
* @returns true if we are connected false otherwise.
*/
loggedIn() : boolean {
return (this.isAuth = localStorage.getItem('pghmToken') != null);
}
/**
* We get the token reach the API
* @returns the access token
*/
getToken() : string{
const token = localStorage.getItem('pghmToken');
let res = null;
if(token){
res = (JSON.parse(token)).access;
}
return res;
}
}
/**
* @interface :
* Model expected from API when we try to log in
*/
export interface Token {
refresh: string;
access: string;
}
\ No newline at end of file
......@@ -9,7 +9,7 @@
<button class="links" (click)="mvtTab($event,'messages')"><i class="fa fa-envelope"></i></button>
</div>
<!--tab HOME-->
<!--tab HOME -->
<div class="tab" id="home">
<h1>DEMO GENDLOC - CORG</h1>
<h1>Fonctionnalités proposées</h1>
......@@ -18,34 +18,34 @@
</ul>
</div>
<!--tab SEARCH-->
<!--tab SEARCH -->
<div class="tab" id="search">
<h1>Recherche</h1>
<h3>Attention vue écran</h3>
<form method="post" action="console.log('It's working!')">
<!--TODO: replace console.log() with the API part-->
<input type="search" placeholder="Tapez la recherche" autofocus/>
<h3>Attention vue écran</h3>
<form [formGroup]="searchForm" (ngSubmit)="search()" method="post">
<!--TODO: replace console.log() with the API part -->
<input type="search" placeholder="Tapez la recherche" name="search" id="search" formControlName="search" autofocus/>
<input type="submit" value="Rechercher"/>
</form>
<p> Recherche floue IGN, base adresse nationale et nominatim </p>
<p> Recherche floue IGN, base adresse nationale et nominatim </p>-
</div>
<!--tab MAP-MARKER-->
<!--tab MAP-MARKER -->
<div class="tab" id="map-marker">
<h1>Géolocalisation</h1>
<form method="post" action="TODO">
<!-- TODO: connect with the code for the telephone number-->
<input id="phone" type="tel"/><br/>
<form [formGroup]="mapMarkerForm" (ngSubmit)="sendSms()" method="post">
<!-- TODO: connect with the code for the telephone number -->
<input id="phone" type="tel" name="phone" formControlName=""/><br/>
<label for="typeMsg">Type du message :</label>
<select name="message">
<select name="message" name="messageType" formControlName="messageType">
<option value="Geoloc">Geoloc</option>
<option value="Tracking">Tracking</option>
<option value="APN">Photo</option>
</select><br/>
<label for="langue">Choix de la langue :</label>
<select name="lang">
<select name="lang" formControlName="language" name="language">
<option value="Français">Français</option>
<option value="Anglais" disabled >Anglais</option>
<option value="Espagnol" disabled >Espagnol</option>
......@@ -55,14 +55,16 @@
</select><br/>
<p>Temps :<br/>
<input type="radio" name="val" value="1" checked/><label for="2H">2 HEURES</label><br/>
<input type="radio" name="val" value="2"/><label for="24H">24 HEURES</label><br/>
<input type="radio" name="val" value="3" disabled/><label for="DEF">DEFINITIF</label><br/>
<input type="radio" name="val" value="1" formControlName="time" checked/><label for="2H">2 HEURES</label><br/>
<input type="radio" name="val" value="2" formControlName="time"/><label for="24H">24 HEURES</label><br/>
<input type="radio" name="val" value="3" formControlName="time" disabled/><label for="DEF">DEFINITIF</label><br/>
</p><br/>
<input type="button" onclick="TODO" value="Envoyer SMS" />
<button type="submit">Evoyer SMS</button>
<!-- <input type="button" onclick="TODO" value="Envoyer SMS" /> -->
</form>
<!--TODO : doing the function for sms-->
<!--TODO : doing the function for sms -->
</div>
......
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import {Fonctionnalite} from './fonctionnalite';
/**
......@@ -10,9 +12,11 @@ import {Fonctionnalite} from './fonctionnalite';
templateUrl: './sidebar-left.component.html',
styleUrls: ['./sidebar-left.component.scss']
})
export class SidebarLeftComponent implements OnInit {
searchForm: FormGroup;
mapMarkerForm: FormGroup;
export class SidebarLeftComponent implements OnInit {
/* List of the different features available on the app */
fonctionnalites : Fonctionnalite[] = [
{title:'Fond de carte IGN et OSM'},
......@@ -24,6 +28,10 @@ export class SidebarLeftComponent implements OnInit {
{title:'Affichage couche accueil gendarmerie'}
]
constructor(
private fb: FormBuilder
) {}
/**
* Function needed to display or hide tabs on click
* @param : observed event and name of the tab {string} on which it is observed
......@@ -50,6 +58,24 @@ export class SidebarLeftComponent implements OnInit {
}
ngOnInit(): void {
this.searchForm = this.fb.group({
keyword: [],
});
this.mapMarkerForm = this.fb.group({
phone: [],
messageType :[],
language: [],
time: [],
});
}
search() : void {
}
sendSms() : void {
}
}
......@@ -3,7 +3,8 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
production: false,
pghmApi: "http://127.0.0.1:8000"
};
/*
......
......@@ -46,9 +46,10 @@ INSTALLED_APPS += [
'drf_yasg',
'leaflet',
'djgeojson',
'choucas',
'corsheaders',
# Submodule
'choucas',
'pghm',
'external_service',
'unit',
......@@ -84,10 +85,17 @@ MIDDLEWARE_CLASSES = [
#'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware',
]
MIDDLEWARE = MIDDLEWARE_CLASSES
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'http://localhost:4200',
)
SERIALIZATION_MODULES = {
'geojson': 'djgeojson.serializers'
}
......
......@@ -8,3 +8,4 @@ djangorestframework==3.11.0
Django==3.0.4
djangorestframework-simplejwt==4.4.0
whitenoise==5.0.1
django-cors-headers==3.2.1
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