TMSS-937 - update the code for access request and forgot pass

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

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

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{

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

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;

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