Merge branch 'dev'

GendLoc/src/app/app-routing.module.ts

@@ -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'}
 ];

GendLoc/src/app/app.component.ts

-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 
 /**
 * @AppComponent :

GendLoc/src/app/app.module.ts

-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,

GendLoc/src/app/auth-component/auth-component.component.html

 <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>

GendLoc/src/app/auth-component/auth-component.component.scss

-.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);
 }
+

GendLoc/src/app/auth-component/auth-component.component.ts

 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() {

GendLoc/src/app/services/auth-guard.service.ts

@@ -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 {

GendLoc/src/app/services/auth.service.ts

+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;
+	} 
 }

GendLoc/src/app/services/authentication.ts

+/**
+ * @interface :
+ * Model expected from API when we try to log in
+ */
+export interface Token {
+    refresh: string;
+    access: string;
+}
\ No newline at end of file

GendLoc/src/app/sidebar-left/sidebar-left.component.html

@@ -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>
 

GendLoc/src/app/sidebar-left/sidebar-left.component.ts

 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 {
+
+  } 
+
 }

GendLoc/src/environments/environment.ts

@@ -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" 
 };
 
 /*

choucas/choucas/choucas/settings.py

@@ -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',