TMSS-937 - Initial process

SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js

@@ -12,18 +12,32 @@ const Auth = {
         let user = localStorage.getItem("user");
         if (user) {
             user = JSON.parse(user);
-            if (user.token) {
-                axios.defaults.headers.common['Authorization'] = `Token ${user.token}`;
-                const permissions = await AuthStore.getState();
-                if(!permissions.userRolePermission.project) {
-                    await PermissionStackUtil.getPermissions(true);
+            return Auth.getUserPermission(user);
+        }else {
+            user = sessionStorage.getItem("user");
+            console.log('Keycloak:',user);
+            if (user) {
+                user = JSON.parse(user);
+                const res = await AuthService.keycloakAuthenticate();
+                if(res && res.is_authenticated){
+                    localStorage.setItem("loginType", 'Keycloak');
+                    return Auth.getUserPermission(user);
                 }
-                return true;
-            }
+            } 
         }
         await PermissionStackUtil.getPermissions(false);
         return false;
     },
+    getUserPermission: async (user) => {
+        if (user.token) {
+            axios.defaults.headers.common['Authorization'] = `Token ${user.token}`;
+            const permissions = await AuthStore.getState();
+            if(!permissions.userRolePermission.project) {
+                await PermissionStackUtil.getPermissions(true);
+            }
+            return true;
+        }
+    },
     /** Gets user details from browser local storage */
     getUser: () => {
         return JSON.parse(localStorage.getItem("user"));
@@ -32,7 +46,8 @@ const Auth = {
     login: async(user, pass) => {
         const authData = await AuthService.authenticate(user, pass);
         if (authData) {
-            localStorage.setItem("user", JSON.stringify({name:user, token: authData.token}));
+            localStorage.setItem("user", JSON.stringify({name:user, token: authData.token},));
+            localStorage.setItem("loginType", 'Application');
             await PermissionStackUtil.getPermissions(true);
             return true;
         }   else {

SAS/TMSS/frontend/tmss_webapp/src/authenticate/login.js

@@ -3,6 +3,7 @@ import React, {Component} from 'react';
 import { Redirect } from 'react-router-dom';
 import Auth from '../authenticate/auth';
 import { CustomPageSpinner } from '../components/CustomPageSpinner';
+import UIConstants from '../utils/ui.constants';
 
 /**
  * Component to authenticate users in the application.
@@ -21,6 +22,7 @@ export class Login extends Component {
         this.login = this.login.bind(this);
         this.setCredentials = this.setCredentials.bind(this);
         this.formSubmit = this.formSubmit.bind(this);
+        this.doKeyCloakLogin = this.doKeyCloakLogin.bind(this);
     }
 
     /**
@@ -71,6 +73,14 @@ export class Login extends Component {
         }
     }
 
+    async doKeyCloakLogin(e) {
+        /** For testing */
+            //sessionStorage.setItem("user", JSON.stringify({name:'test',"token":"eaa9a75f31339955cfaca1f7c94b01b1dd327d04"},));
+        /** End */
+
+        this.setState({redirect: UIConstants.KEYCLOAK_AUTH_URL});
+    }
+
     render() {
         if (this.state.redirect) {
             return (<Redirect to={{pathname: this.state.redirect}} />);
@@ -120,10 +130,13 @@ export class Login extends Component {
                                                 </div>
                                                 <div className="row form-footer">
                                                     <div className="col-md-6 forget-paswd">
-                                                        
+                                                        <button className="btn btn-primary" 
+                                                            onClick={this.doKeyCloakLogin}>Forget Password?</button>
                                                     </div>
                                                     <div className="col-md-6 button-div">
-                                                        <button className="btn btn-primary" 
+                                                            <button className="btn btn-primary"
+                                                                onClick={this.doKeyCloakLogin}>Keycloak</button>
+                                                            <button className="btn btn-primary" style={{marginLeft: '1em'}}
                                                                 disabled={Object.keys(this.state.validFields).length<2} 
                                                                 onClick={this.login}>Login</button>
                                                     </div>

SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js

+import UIConstants from '../utils/ui.constants';
+
 const axios = require('axios');
 
 const AuthService = {
@@ -12,9 +14,29 @@ const AuthService = {
             return null;
         }
     },
+    keycloakAuthenticate: async() => {
+        try {
+            delete axios.defaults.headers.common['Authorization'];
+            const response = await axios.post(UIConstants.KEYCLOAK_AUTHENTICATE_URL);
+            console.log('keycloakAuthenticate =>',response)
+            //axios.defaults.headers.common['Authorization'] = `Token ${response.data.token}`;
+            return response.data;
+        }   catch(error) {
+            console.error('Error [keycloakAuthenticate]',error);
+            return null;
+        }
+    },
     deAuthenticate: async(token) => {
         try {
-            await axios.delete("/api/token-deauth/");
+            const loginType = localStorage.getItem("loginType");
+            if (loginType && loginType === 'Application') {
+                await axios.delete("/api/token-deauth/");
+            }   else {
+                console.log('deAuthenticate url:', UIConstants.KEYCLOAK_LOGOUT_URL);
+                await axios.post(UIConstants.KEYCLOAK_LOGOUT_URL);
+                sessionStorage.removeItem("user");
+            }
+            localStorage.removeItem("loginType");
         }   catch(error) {
             console.error(error);
         }

SAS/TMSS/frontend/tmss_webapp/src/utils/ui.constants.js

 const UIConstants = {
+    KEYCLOAK_AUTH_URL: '/oidc/authenticate',
+    KEYCLOAK_LOGOUT_URL: '/oidc/logout/',
+    KEYCLOAK_AUTHENTICATE_URL: '/api/authentication_state/',
     tooltipOptions: {position: 'left', event: 'hover', className:"p-tooltip-custom"},
     timeline: {
         types: { NORMAL: "NORMAL", WEEKVIEW:"WEEKVIEW"}