Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Projets-INFO4
19-20
8
app-pghm
Commits
88d2e626
Commit
88d2e626
authored
May 18, 2020
by
Thomas Frion
Browse files
Merge branch 'dev'
parents
f41dc3c8
f481f480
Changes
14
Hide whitespace changes
Inline
Side-by-side
GendLoc/src/app/app-routing.module.ts
View file @
88d2e626
...
...
@@ -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
View file @
88d2e626
import
{
Component
}
from
'
@angular/core
'
;
import
{
Component
,
NgModule
}
from
'
@angular/core
'
;
/**
* @AppComponent :
...
...
GendLoc/src/app/app.module.ts
View file @
88d2e626
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
View file @
88d2e626
<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
View file @
88d2e626
.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
View file @
88d2e626
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
View file @
88d2e626
...
...
@@ -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
View file @
88d2e626
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
0 → 100644
View file @
88d2e626
/**
* @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
View file @
88d2e626
...
...
@@ -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
View file @
88d2e626
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
View file @
88d2e626
...
...
@@ -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
View file @
88d2e626
...
...
@@ -46,9 +46,10 @@ INSTALLED_APPS += [
'drf_yasg'
,
'leaflet'
,
'djgeojson'
,
'c
houca
s'
,
'c
orsheader
s'
,
# 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
=
(