From 43c8b79edcc0a708caab38e8ecca10531325254f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 8 Aug 2023 20:48:07 +0530
Subject: [PATCH 1/2] Add Sign Up URL and auto login workaround

---
 kfone-website/.env.example           |  1 +
 kfone-website/src/config.js          |  6 ++++++
 kfone-website/src/layouts/Navbar.jsx |  6 ++++++
 kfone-website/src/pages/HomePage.jsx | 12 ++++++++++++
 4 files changed, 25 insertions(+)

diff --git a/kfone-website/.env.example b/kfone-website/.env.example
index bc302b3..5feaf40 100644
--- a/kfone-website/.env.example
+++ b/kfone-website/.env.example
@@ -10,3 +10,4 @@ REACT_APP_BASE_API_ENDPOINT=<BASE URL OF CHOREO HOSTED API>
 REACT_APP_CHOREO_ORGANIZATION=<ORGANIZATION OF CHOREO HOSTED API>
 REACT_APP_CHOREO_AUTH_TOKEN=<CHOREO AUTH TOKEN TO GET ACCESS TOKEN>
 REACT_APP_MY_ACCOUNT_URL=<MY ACCOUNT APP URL>
+REACT_APP_SIGN_UP_URL=<SELF SIGN UP URL ex: 'https://accounts.asgardeo.io/t/kfone/accountrecoveryendpoint/register.do?client_id=<CLIENT_ID>&sp=<SP_NAME>'>
diff --git a/kfone-website/src/config.js b/kfone-website/src/config.js
index eff7853..51e7246 100644
--- a/kfone-website/src/config.js
+++ b/kfone-website/src/config.js
@@ -23,6 +23,12 @@ const appConfig = {
   signInRedirectURL: process.env.REACT_APP_ASGARDEO_LOGIN_CALLBACK_URL ?? '',
   signOutRedirectURL: process.env.REACT_APP_ASGARDEO_LOGOUT_CALLBACK_URL ?? '',
   scope: ['openid', 'profile', 'email'],
+  signUpUrl: process.env.REACT_APP_SIGN_UP_URL
+    ? process.env.REACT_APP_SIGN_UP_URL.replace(
+        '{{clientId}}',
+        process.env.REACT_APP_ASGARDEO_CLIENT_ID ?? ''
+      )
+    : '',
   stsConfig: {
     client_id: process.env.REACT_APP_CHOREO_CLIENT_ID ?? '',
     orgHandle: process.env.REACT_APP_CHOREO_ORGANIZATION ?? '',
diff --git a/kfone-website/src/layouts/Navbar.jsx b/kfone-website/src/layouts/Navbar.jsx
index 8f80e8b..b74c216 100644
--- a/kfone-website/src/layouts/Navbar.jsx
+++ b/kfone-website/src/layouts/Navbar.jsx
@@ -22,6 +22,7 @@ import { HiMenuAlt3 } from 'react-icons/hi';
 import { GiCrossedAirFlows } from 'react-icons/gi';
 import { GrClose } from 'react-icons/gr';
 import RoundedIconButton from '../components/buttons/RoundedIconButton';
+import appConfig from '../config';
 
 const Navbar = (props) => {
   const { handleLogin, state } = props;
@@ -56,6 +57,11 @@ const Navbar = (props) => {
         </ul>
       </div>
       <ul className="flex justify-end items-center">
+        {!state?.isAuthenticated && (
+          <li className="px-4 text-red">
+            <a href={appConfig.signUpUrl}>Sign Up</a>
+          </li>
+        )}
         <li className="px-4">
           <RoundedIconButton
             handleLogin={handleLogin}
diff --git a/kfone-website/src/pages/HomePage.jsx b/kfone-website/src/pages/HomePage.jsx
index c9891f6..b67f9b3 100644
--- a/kfone-website/src/pages/HomePage.jsx
+++ b/kfone-website/src/pages/HomePage.jsx
@@ -50,6 +50,18 @@ const HomePage = () => {
     })();
   }, []);
 
+  /**
+   * This is a workaround to trigger a login request when users come
+   * from the Sign Up path with auto login enabled.
+   */
+  useEffect(() => {
+    const shouldAutoLogin = query.get('autologin');
+
+    if (shouldAutoLogin) {
+      signIn();
+    }
+  }, [query]);
+
   const handleLogin = () => {
     if (state?.isAuthenticated) {
       history.push('/my-kfone');

From 2d5184018363ba50b95752033b8214329a41a370 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 9 Aug 2023 09:01:29 +0530
Subject: [PATCH 2/2] Show a loading screen when auto login flow is active

---
 kfone-website/src/pages/HomePage.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/kfone-website/src/pages/HomePage.jsx b/kfone-website/src/pages/HomePage.jsx
index b67f9b3..8f8afa9 100644
--- a/kfone-website/src/pages/HomePage.jsx
+++ b/kfone-website/src/pages/HomePage.jsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useAuthContext } from '@asgardeo/auth-react';
 import { useLocation, useHistory } from 'react-router-dom';
 import BusinessPlansSection from '../layouts/BusinessPlansSection';
@@ -26,6 +26,7 @@ import Hero from '../layouts/Hero';
 import QuickActionsSection from '../layouts/QuickActionsSection';
 import UnlimitedPlansSection from '../layouts/UnlimitedPlansSection';
 import GeneralTemplate from '../templates/GeneralTemplate';
+import Loading from '../layouts/Loading';
 
 const HomePage = () => {
   const { state, signIn, getDecodedIDPIDToken, trySignInSilently } = useAuthContext();
@@ -33,6 +34,8 @@ const HomePage = () => {
   const reRenderCheckRef = useRef(false);
   const history = useHistory();
 
+  const [showAutoLoginLoader, setShowAutoLoginLoader] = useState(false);
+
   useEffect(() => {
     reRenderCheckRef.current = true;
 
@@ -58,6 +61,7 @@ const HomePage = () => {
     const shouldAutoLogin = query.get('autologin');
 
     if (shouldAutoLogin) {
+      setShowAutoLoginLoader(true);
       signIn();
     }
   }, [query]);
@@ -79,6 +83,10 @@ const HomePage = () => {
       });
   };
 
+  if (showAutoLoginLoader) {
+    return <Loading />;
+  }
+
   return (
     <GeneralTemplate handleLogin={handleLogin} state={state}>
       <Hero />