Merge pull request #50 from OpenLXP/origin/sso

Origin/sso

src/config/endpoints.js

@@ -13,4 +13,7 @@ export const login_url = `${host}${api}auth/login`
 export const register_url = `${host}${api}auth/register`
 
 //configs
-export const configUrl = `${host}${api}config/catalogs/`
+export const configUrl = `${host}${api}config/catalogs/`
+
+//sso configs
+export const ssoURL = `${host}${api}config/sso/`

src/config/timeConstants.js

@@ -0,0 +1,8 @@
+export const oneMinute = 60 * 1000;
+export const fiveMinutes = 5 * 60 * 1000;
+export const tenMinutes = 10 * 60 * 1000;
+export const twentyMinutes = 20 * 60 * 1000;
+export const thirtyMinutes = 30 * 60 * 1000;
+export const fortyFiveMinutes = 45 * 60 * 1000;
+export const oneHour = 60 * 60 * 1000;
+export const twentyFourHours = 24 * 60 * 60 * 1000;

src/hooks/useConfig.js

@@ -0,0 +1,19 @@
+import { axiosInstance } from '../config/axiosInstance';
+import { ssoURL } from '../config/endpoints';
+import { twentyFourHours } from '../config/timeConstants';
+import { useQuery } from 'react-query';
+
+/**
+ * @description Reaches out to the backend and gets the configuration data required for the application. Valid for 24hrs
+ */
+
+export function useConfig() {
+  return useQuery(
+    'ui-config',
+    () => axiosInstance.get(ssoURL).then((res) => res.data),
+    {
+      staleTime: twentyFourHours,
+      cacheTime: twentyFourHours,
+    }
+  );
+}

src/pages/login.js

@@ -8,10 +8,12 @@ import logoImage from "../public/dodLogo.png";
 import Image from 'next/image';
 import DefaultLayout from "../components/layouts/DefaultLayout";
 import { useRouter } from "next/router";
+import { useConfig } from '@/hooks/useConfig';
 
 
 export default function Login(){
     const { user, login } = useAuth();
+    const config = useConfig();
     const [credentials, setCredentials] = useState({username:"", password:""});
     const router = useRouter();
 
@@ -93,6 +95,26 @@ export default function Login(){
                             className='mt-4 mx-auto max-w-max items-center inline-flex gap-2 bg-blue-200 rounded-md hover:shadow-md hover:bg-blue hover:text-white px-4 py-2 transform transition-all duration-75 ease-in-out border-bg-blue border-2 outline-none focus:ring-2 ring-blue-400'
                             type="submit" >Login</button>
                     </div>
+
+                    <p className={'my-8 relative border-b-2 w-full'}>
+                        <span className='absolute top-1/2 left-1/2 transform text-center -translate-x-1/2 -translate-y-1/2 bg-white px-2 w-max'>
+                        or continue with
+                        </span>
+                    </p>
+                    {config.isSuccess &&
+                        config.data.single_sign_on_options?.map(({ name, path }) => {
+                        return (
+                            <div className='flex flex-col mx-auto content-center'>
+                                <a
+                                href={path}
+                                className='mx-auto max-w-max items-center inline-flex gap-2 bg-blue-200 rounded-md hover:shadow-md hover:bg-blue hover:text-white px-4 py-2 transform transition-all duration-75 ease-in-out border-bg-blue border-2 outline-none focus:ring-2 ring-blue-400'
+                                key={name}
+                                >
+                                {name}
+                                </a>
+                            </div>
+                        );
+                        })}
                 </form>
             </div>
         </DefaultLayout>