From 207a5394f583bfc69e73be89c7b249c114c65e31 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 4 Apr 2024 10:41:45 -0400
Subject: [PATCH 1/2] fixed label input warnings

---
 app/components/Input.tsx                            | 13 ++++++++++---
 app/components/Textarea.tsx                         | 10 +++++++++-
 app/components/Typography.tsx                       | 12 ++++++++++--
 .../comps/SidePanelTabs/TabStylization.tsx          |  6 ++++--
 app/utilities.tsx                                   |  4 ++++
 5 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 app/utilities.tsx

diff --git a/app/components/Input.tsx b/app/components/Input.tsx
index a8ce2232f9..2d5ebbfe6d 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input.tsx
@@ -2,17 +2,23 @@ import { twMerge } from "tailwind-merge";
 import { IconDefinition } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Label } from "./Typography";
+import { kebabCase } from "~/utilities";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
-  className?: string;
   icon?: IconDefinition
 }
 
-export function Input({label, icon, className, ...rest }: InputProps) {
+export function Input({
+  label, icon, className, id, ...rest
+}: InputProps) {
   return (
     <div className={twMerge("flex flex-col gap-2", className)}>
-      {label && <Label>{label}</Label>}
+      {label && 
+        <Label htmlFor={id ? id : kebabCase(label)}>
+          {label}
+        </Label>
+      }
 
       <div className="relative w-full">
         {icon && (
@@ -22,6 +28,7 @@ export function Input({label, icon, className, ...rest }: InputProps) {
           />
         )}
         <input
+          id={id ? id : (label ? kebabCase(label) : undefined)}
           className={twMerge(
             "w-full h-10 rounded-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary",
             icon? "pl-12" : "",
diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
index 4d85c98782..278b54a7cb 100644
--- a/app/components/Textarea.tsx
+++ b/app/components/Textarea.tsx
@@ -1,6 +1,7 @@
 import { TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { Label } from "./Typography";
+import { kebabCase } from "~/utilities";
 
 type ResizeType =
   | "none"
@@ -15,6 +16,7 @@ export const Textarea = ({
   className,
   label,
   resize = "vertical",
+  id,
   ...rest
 }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
   label?: string;
@@ -22,8 +24,14 @@ export const Textarea = ({
 }) => {
   return (
     <div className="flex flex-col">
-      {label && <Label>{label}</Label>}
+      {label && 
+        <Label htmlFor={id ? id : kebabCase(label)}>
+          {label}
+        </Label>
+      }
+      
       <textarea
+        id={id ? id : (label ? kebabCase(label) : undefined)}
         className={twMerge(
           "rounded-lg border border-ui-panel-border bg-ui-controls p-3",
           className,
diff --git a/app/components/Typography.tsx b/app/components/Typography.tsx
index a4c4d997d6..0bb645e383 100644
--- a/app/components/Typography.tsx
+++ b/app/components/Typography.tsx
@@ -1,4 +1,5 @@
 import { NavLink, NavLinkProps } from "@remix-run/react";
+import { LabelHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
 interface TypoProps {
@@ -23,8 +24,15 @@ export const H4 = ({ className, children }: TypoProps) => (
   <h4 className={twMerge(baseTypo, "text-base font-medium", className)}>{children}</h4>
 );
 
-export const Label = ({ className, children }: TypoProps) => (
-  <label className={twMerge(baseTypo, "mb-2 text-base font-medium", className)}>{children}</label>
+export const Label = ({ 
+  className, children, ...rest
+}: LabelHTMLAttributes<HTMLLabelElement>) => (
+  <label
+    className={twMerge(baseTypo, "mb-2 text-base font-medium", className)}
+    {...rest}
+  >
+      {children}
+  </label>
 );
 
 export const H5 = ({ className, children }: TypoProps) => (
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
index ac7c6204b5..eeb5b4ee4d 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from "react";
 
-import { Button, ItemPicker, Label, Textarea } from "~/components";
+import { Button, ItemPicker, Label, H4, Textarea } from "~/components";
 
 import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers";
@@ -62,7 +62,7 @@ export const TabStylization = () => {
   return (
     <div className="flex h-full w-full flex-col gap-3">
       <div className="flex flex-col">
-        <Label>Select Base Style</Label>
+        <H4>Select Base Style</H4>
         <div className="grid grid-cols-4 gap-2">
           <ItemPicker
             label="Anime"
@@ -98,6 +98,7 @@ export const TabStylization = () => {
       <Textarea
         label="Positive Prompt"
         className="h-32 w-full"
+        name="positive-prompt"
         placeholder="Type here to describe your scene"
         onChange={onChangeHandlerPositive}
         resize="none"
@@ -105,6 +106,7 @@ export const TabStylization = () => {
       <Textarea
         label="Negative Prompt"
         className="h-32 w-full"
+        name="negative-prompt"
         placeholder="Type here to filter out the things you don't want in the scene"
         onChange={onChangeHandlerNegative}
         resize="none"
diff --git a/app/utilities.tsx b/app/utilities.tsx
new file mode 100644
index 0000000000..2edfe517a7
--- /dev/null
+++ b/app/utilities.tsx
@@ -0,0 +1,4 @@
+export const kebabCase = (str:string) => str
+  .replace(/([a-z])([A-Z])/g, "$1-$2")
+  .replace(/[\s_]+/g, '-')
+  .toLowerCase();
\ No newline at end of file

From e183e60fe23d01e7948b40e591e2a2907eb8092f Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 4 Apr 2024 16:10:14 -0400
Subject: [PATCH 2/2] protected routes, 404 page, auth with localstorage, login
 redirects

---
 .../Authentication/Authentication.tsx         | 115 +++++++++++-------
 app/contexts/Authentication/types.tsx         |   6 +-
 app/modules/withProtectedRoute/index.tsx      |  26 ++++
 app/routes/$.tsx                              |  27 ++++
 app/routes/IdealEnigma.tsx                    |   8 +-
 app/routes/Login.tsx                          |  20 +--
 6 files changed, 141 insertions(+), 61 deletions(-)
 create mode 100644 app/modules/withProtectedRoute/index.tsx
 create mode 100644 app/routes/$.tsx

diff --git a/app/contexts/Authentication/Authentication.tsx b/app/contexts/Authentication/Authentication.tsx
index 27d0d7594f..8e770955d1 100644
--- a/app/contexts/Authentication/Authentication.tsx
+++ b/app/contexts/Authentication/Authentication.tsx
@@ -1,7 +1,7 @@
 import {
   createContext,
-  useEffect,
   useCallback,
+  useEffect,
   useState, 
   ReactNode,
   Dispatch,
@@ -12,52 +12,43 @@ import { useCookies } from 'react-cookie';
 import {
   SessionResponse,
   AuthState,
+  STORAGE_KEYS
 } from "./types";
 
 import { CreateSession, DestroySession, GetSession } from "./utilities";
 
 export const AuthenticationContext = createContext<{
-  authState?: AuthState,
-  setAuthState?: Dispatch<SetStateAction<AuthState | undefined>>,
-  persistLoginOrOut?: ()=>void,
+  authState: AuthState,
+  setAuthState?: Dispatch<SetStateAction<AuthState>>,
   loginAndGetUserInfo?: (
     usernameOrEmail: string,
     password:string,
     failureCallback?:()=>void
   )=>void;
   logout?: ()=>void;
-}>({});
+}>({
+  authState:{}
+});
 
 export const AuthenticationProvider = ({children}:{children:ReactNode})=>{
-  const [authCookies, setAuthCookie, removeAuthCookie] = useCookies(['userInfo']);
-  const [authState, setAuthState] = useState<AuthState | undefined>(undefined);
+  console.log('auth provider rerender');
+  const [authCookies, setAuthCookie, removeAuthCookie] = useCookies([STORAGE_KEYS.USER_INFO]);
+  const [authState, setAuthState] = useState<AuthState>({});
 
-  const persistLoginOrOut = useCallback(()=>{
-    GetSession().then((
-      res: SessionResponse
-    )=>{
-      if(res.success && res.user){ 
-        setAuthCookie('userInfo', res.user);
-        setAuthState({
-          isLoggedIn: true,
-          userInfo: res.user
-        });
-      }else{
-        removeAuthCookie('userInfo');
-      }
-    });
-  }, []);
-
-  const loginAndGetUserInfo = (usernameOrEmail: string, password:string, failureCallback?:()=>void)=>{
+  const loginAndGetUserInfo = useCallback((
+    usernameOrEmail: string,
+    password:string,
+    failureCallback?:()=>void
+  )=>{
     CreateSession({usernameOrEmail, password})
       .then((respond)=>{
         GetSession().then((
           res: SessionResponse
         )=>{
           if(res.success && res.user && setAuthState){
-            setAuthCookie('userInfo', res.user);
             setAuthState({
               isLoggedIn: true,
+              sessionData: JSON.stringify(res.user),
               userInfo: res.user
             });
           }else{
@@ -65,29 +56,69 @@ export const AuthenticationProvider = ({children}:{children:ReactNode})=>{
           }
         });
       });
-  }
-
-  const logout = ()=>{
-    DestroySession().then((res)=>{
-      if (res && setAuthState) {
-        setAuthState({
-          isLoggedIn: false,
-          userInfo: undefined
-        });
-      }
-    });
-  }
-  useEffect(()=>{
-    if (authCookies !== undefined && authState===undefined){
-      persistLoginOrOut();
-    }
   },[]);
 
+  const setLogoutState = useCallback(()=>{
+    setAuthState({
+      isLoggedIn: false,
+      sessionData: null,
+      userInfo: undefined
+    });
+  },[]);
+
+  const logout = useCallback(()=>{
+    DestroySession().then((res)=>{
+      if (res) setLogoutState(); 
+    });
+  },[]);
+
+  //Set Session upon Auth State Changes
+  useEffect(()=>{
+    //On First Load
+    if(authState.isLoggedIn === undefined){
+      //Persist Login if Session Data exist
+      const sessionData = localStorage.getItem(STORAGE_KEYS.USER_INFO);
+      console.log(`Session Data: ${sessionData?.substring(0, 30)}${sessionData ? '...':''}`);
+      if (sessionData !== null){
+        console.log('Getting session to persist login');
+        GetSession().then((
+          res: SessionResponse
+        )=>{
+          console.log('Session Returned');
+          console.log(res);
+          if(res.success && res.user){
+            console.log('Setting Auth State');
+            setAuthState({
+              isLoggedIn: true,
+              sessionData: JSON.stringify(res.user),
+              userInfo: res.user
+            });
+          }else{
+            console.log('Session expired, setting State');
+            setLogoutState(); 
+          }
+        });
+      }else{
+        setLogoutState(); 
+      }
+    }
+
+    // Propagate session data to localstorage
+    if(authState.sessionData !== null && authState.sessionData !== undefined){
+      localStorage.setItem(STORAGE_KEYS.USER_INFO, authState.sessionData);
+      setAuthCookie(STORAGE_KEYS.USER_INFO, authState.userInfo);
+    }
+    // Propagate Logout
+    else if (authState.sessionData === null){
+      localStorage.removeItem(STORAGE_KEYS.USER_INFO);
+      removeAuthCookie(STORAGE_KEYS.USER_INFO);
+    }
+  },[authState]);
+
   return(
     <AuthenticationContext.Provider value={{
       authState,
       setAuthState,
-      persistLoginOrOut,
       loginAndGetUserInfo,
       logout,
     }}>
diff --git a/app/contexts/Authentication/types.tsx b/app/contexts/Authentication/types.tsx
index 2daea795e5..b1e05ae494 100644
--- a/app/contexts/Authentication/types.tsx
+++ b/app/contexts/Authentication/types.tsx
@@ -1,3 +1,6 @@
+export enum STORAGE_KEYS{
+  USER_INFO = "user_info",
+}
 export enum AUTH_STATUS {
   LOGGED_IN = "logged_in",
   LOGGING = "logging",
@@ -5,7 +8,8 @@ export enum AUTH_STATUS {
 }
 
 export type AuthState = {
-  isLoggedIn: boolean;
+  isLoggedIn?: boolean;
+  sessionData?: string | null;
   userInfo?: UserInfo;
 }
 export interface UserInfo {
diff --git a/app/modules/withProtectedRoute/index.tsx b/app/modules/withProtectedRoute/index.tsx
new file mode 100644
index 0000000000..823f77a476
--- /dev/null
+++ b/app/modules/withProtectedRoute/index.tsx
@@ -0,0 +1,26 @@
+import { useContext, useEffect, ComponentType } from "react";
+import { useNavigate, useLocation } from "@remix-run/react";
+import { AuthenticationContext } from "~/contexts/Authentication";
+
+export const withProtectionRoute = <P extends {}>(Component: ComponentType<P>) => (rest:P) => {
+  const { authState } = useContext(AuthenticationContext);
+  console.log(authState);
+  if (authState.isLoggedIn === undefined ) {
+    return <>waiting</>;
+  }
+  if (authState.isLoggedIn === false) {
+    return <RedirectToLogin />
+  }
+  return (
+    <Component  {...rest}/>
+  );
+}
+
+const RedirectToLogin = ()=>{
+  const navigate = useNavigate();
+  const {pathname} = useLocation();
+  useEffect(()=>{
+    navigate(`/login?redirect=${pathname}`);
+  },[]);
+  return  <>redirecting</>
+}
\ No newline at end of file
diff --git a/app/routes/$.tsx b/app/routes/$.tsx
new file mode 100644
index 0000000000..78d0f29049
--- /dev/null
+++ b/app/routes/$.tsx
@@ -0,0 +1,27 @@
+import { json } from "@remix-run/router";
+import { withProtectionRoute } from "~/modules/withProtectedRoute";
+
+import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons";
+import { P, H1, ButtonLink } from "~/components";
+export const loader = () => {
+  return json(null, { status: 404 });
+};
+
+const Page404 = withProtectionRoute(()=>{
+  return(
+    <div
+    className="fixed w-full overflow-scroll"
+    style={{height: "calc(100% - 72px)"}}
+    >
+      <div
+        className='bg-ui-panel w-10/12 max-w-7xl h-1/2 mx-auto my-24 rounded-lg p-6 flex flex-col items-center justify-center gap-8 text-center'
+      >
+        <P>Oops, seems like this is not a page that exists!</P>
+        <H1>Server Error: 404</H1>
+
+        <ButtonLink to="/" icon={faChevronLeft}>Back to Dashboard</ButtonLink>
+      </div>
+    </div>
+  )
+});
+export default Page404;
diff --git a/app/routes/IdealEnigma.tsx b/app/routes/IdealEnigma.tsx
index 087f2297a7..e27f9b2ca5 100644
--- a/app/routes/IdealEnigma.tsx
+++ b/app/routes/IdealEnigma.tsx
@@ -1,5 +1,5 @@
-import { PageEnigma } from "../pages/PageEnigma";
+import { withProtectionRoute } from "~/modules/withProtectedRoute";
+import { PageEnigma } from "~/pages/PageEnigma";
 
-export default function IdealEnigma() {
-  return <PageEnigma />;
-}
+const IdealEnigma = withProtectionRoute(()=><PageEnigma />);
+export default IdealEnigma;
\ No newline at end of file
diff --git a/app/routes/Login.tsx b/app/routes/Login.tsx
index 4843521b2a..eb1205dcf3 100644
--- a/app/routes/Login.tsx
+++ b/app/routes/Login.tsx
@@ -1,29 +1,19 @@
 import { useContext, useEffect, useState, useRef } from "react";
-import { useNavigate } from "@remix-run/react";
-import { useCookies } from 'react-cookie';
+import { useNavigate, useSearchParams } from "@remix-run/react";
 import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
-
 import { AuthenticationContext } from "~/contexts/Authentication";
 
-import {
-  Button,
-  H1,
-  Input,
-  Link,
-  P,
-} from '~/components';
-
+import { Button,H1,Input,Link,P } from '~/components';
 import { LoadingDots } from "~/components";
 
 export default function LoginScreen() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   const [showLoader, setShowLoader] = useState<string|undefined>(undefined);
   const formRef = useRef<HTMLFormElement | null>(null);
-  const [authCookies, setAuthCookie, removeAuthCookie] = useCookies(['userInfo']);
   const {authState, loginAndGetUserInfo} = useContext(AuthenticationContext);
 
-
   const handleOnSumbit = (ev: React.FormEvent<HTMLFormElement>)=>{
     ev.preventDefault();
     if(formRef.current){
@@ -43,8 +33,9 @@ export default function LoginScreen() {
   }// end handleOnSubmit
 
   useEffect(()=>{
+    const redirectPath = searchParams.get('redirect');
     if(authState && authState.isLoggedIn)
-      navigate("/");
+      navigate(redirectPath ? redirectPath:'/');
   },[authState]);
 
   return (
@@ -64,6 +55,7 @@ export default function LoginScreen() {
             icon={faUser}
             name="usernameOrEmail"
             placeholder="Username or Email"
+            autoComplete="username"
             required
           />
           <br />