From 77116aeb813bb3ffaff1f31a03c310d90ac6a03e Mon Sep 17 00:00:00 2001
From: Muthukrishnanmatriot
<76949556+muthukrishnanmatriot@users.noreply.github.com>
Date: Wed, 29 Sep 2021 10:21:49 +0530
Subject: [PATCH] TMSS-937 - update the code for access request and forgot pass
---
.../tmss_webapp/src/authenticate/auth.js | 13 +++++++++----
.../tmss_webapp/src/authenticate/login.js | 18 +++++++++++++++---
.../tmss_webapp/src/layout/sass/_login.scss | 5 ++++-
.../tmss_webapp/src/services/auth.service.js | 6 ++++++
.../src/services/reservation.service.js | 9 ---------
.../tmss_webapp/src/utils/ui.constants.js | 1 +
6 files changed, 35 insertions(+), 17 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js b/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js
index d8f7191c119..fd9e89a35ce 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js
@@ -7,21 +7,26 @@ const axios = require('axios');
* Global functions to authenticate user and get user details from browser local storage.
*/
const Auth = {
- /** To check if user already logged in and the token is available in the browser local storage */
+ /** To check if user already logged in
+ * - First it will check the API token is available in the browser local storage
+ * - If not then check the Keycloak authendication
+ * - Return false if no authentication found
+ */
isAuthenticated: async () => {
let user = localStorage.getItem("user");
if (user) {
user = JSON.parse(user);
return Auth.getUserPermission(user);
- }else {
+ } else {
+ //Keycloak authendication
const res = await AuthService.keycloakAuthenticate();
- if(res && res.is_authenticated){
+ if (res && res.is_authenticated) {
localStorage.setItem("loginType", 'Keycloak');
const cookies = document.cookie.split(';').reduce((prev, current) => {
const [name, value] = current.split(/\s?(.*?)=(.*)/).splice(1, 2);
prev[name] = value;
return prev;
- }, {});
+ }, {});
const userDetails = {'name':res.username, 'token': cookies.csrftoken};
axios.defaults.headers.common['Authorization'] = `Token ${cookies.csrftoken}`;
localStorage.setItem("user", JSON.stringify(userDetails));
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/authenticate/login.js b/SAS/TMSS/frontend/tmss_webapp/src/authenticate/login.js
index b753bc278a5..a7fdb5d9ef7 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/authenticate/login.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/authenticate/login.js
@@ -24,6 +24,7 @@ export class Login extends Component {
this.formSubmit = this.formSubmit.bind(this);
this.doKeyCloakLogin = this.doKeyCloakLogin.bind(this);
this.forgetPassword = this.forgetPassword.bind(this);
+ this.requestAccess = this.requestAccess.bind(this);
}
/**
@@ -89,6 +90,13 @@ export class Login extends Component {
window.location.href = UIConstants.FORGET_PASSWORD_URL;
}
+ /**
+ * Redirect to Request access page
+ */
+ async requestAccess() {
+ window.location.href = UIConstants.REQUEST_ACCESS_URL;
+ }
+
render() {
if (this.state.redirect) {
return (<Redirect to={{pathname: this.state.redirect}} />);
@@ -139,15 +147,19 @@ export class Login extends Component {
<div className="row form-footer">
<div className="col-md-6 button-div" style={{textAlign: 'left'}} >
<button className="btn btn-primary"
- onClick={this.doKeyCloakLogin}>Login with KeyCloak</button>
+ onClick={this.doKeyCloakLogin}>Login with Keycloak</button>
</div>
<div className="col-md-6 button-div">
<button className="btn btn-primary" style={{marginLeft: '1em'}}
disabled={Object.keys(this.state.validFields).length<2}
onClick={this.login}>Login</button>
</div>
- <div className="col-md-6 forget-paswd" style={{marginTop: '10px'}}>
- <a href="#" onClick={this.forgetPassword}>Forget Password?</a>
+
+ <div className="col-md-6 login-form-link">
+ <a href="#" onClick={this.requestAccess}>Request access</a>
+ </div>
+ <div className="col-md-6 forget-paswd login-form-link">
+ <a href="#" onClick={this.forgetPassword}>Forgot Password?</a>
</div>
</div>
{this.state.error &&
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_login.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_login.scss
index d1df063e62e..f4bdc19ca37 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_login.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_login.scss
@@ -48,7 +48,7 @@
background-color: #cccccc38;
}
.form-footer .forget-paswd{
- text-align: left;
+ text-align: right;
}
.button-div{
text-align: right;
@@ -82,6 +82,9 @@
.login-form .form-field i {
padding-right: 5px;
}
+.login-form-link {
+ margin-top: 10px;
+}
@media screen and (max-width: 1100px){
.bg-login{
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js
index b5ebebf66c0..7565cda27e2 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js
@@ -24,6 +24,11 @@ const AuthService = {
return null;
}
},
+ /**
+ * Deauthenticate the user login
+ * - Based on login type it will access the API/Keycloak url
+ * @param {*} token
+ */
deAuthenticate: async(token) => {
let contentType = '';
try {
@@ -31,6 +36,7 @@ const AuthService = {
if (loginType && loginType === 'Application') {
await axios.delete("/api/token-deauth/");
} else {
+ //If logintype is keycloak set Content-Type to 'application/x-www-form-urlencoded; charset=UTF-8'
let token = '';
let user = localStorage.getItem("user");
if (user) {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js
index 3ca64af657c..b150f448db2 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js
@@ -109,15 +109,6 @@ const ReservationService = {
console.error(error);
}
},
- getReservationStrategyTemplates: async function () {
- try {
- const url = `/api/reservation_strategy_template/?ordering=id`;
- const response = await axios.get(url);
- return response.data.results;
- } catch (error) {
- console.error(error);
- }
- },
}
export default ReservationService;
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/utils/ui.constants.js b/SAS/TMSS/frontend/tmss_webapp/src/utils/ui.constants.js
index 3cc679dfc5e..8c305945d2d 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/utils/ui.constants.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/utils/ui.constants.js
@@ -2,6 +2,7 @@ const UIConstants = {
KEYCLOAK_AUTH_URL: '/oidc/authenticate/',
KEYCLOAK_LOGOUT_URL: '/oidc/logout/',
KEYCLOAK_AUTHENTICATE_URL: '/api/authentication_state/',
+ REQUEST_ACCESS_URL: '',
FORGET_PASSWORD_URL: 'https://webportal.astron.nl/pwm/private/Login',
tooltipOptions: {position: 'left', event: 'hover', className:"p-tooltip-custom"},
timeline: {
--
GitLab