From 199dd95169cc59963c28992393537aaeea98be62 Mon Sep 17 00:00:00 2001
From: Vineeth Voruganti <13438633+VVoruganti@users.noreply.github.com>
Date: Mon, 2 Sep 2024 12:37:42 -0400
Subject: [PATCH] Loading Icons and API .env template

---
 api/.env.template              | 14 +++++++++++++
 api/dependencies.py            |  2 +-
 www/components/auth/signIn.tsx | 36 ++++++++++++++++++++++------------
 www/components/auth/signUp.tsx | 29 +++++++++++++++++++++++----
 4 files changed, 64 insertions(+), 17 deletions(-)
 create mode 100644 api/.env.template

diff --git a/api/.env.template b/api/.env.template
new file mode 100644
index 0000000..b8f3a18
--- /dev/null
+++ b/api/.env.template
@@ -0,0 +1,14 @@
+# Azure Mirascope Keys
+AZURE_OPENAI_ENDPOINT=
+AZURE_OPENAI_API_KEY=
+AZURE_OPENAI_API_VERSION=
+AZURE_OPENAI_DEPLOYMENT=
+
+# Supabase Settings
+SUPABASE_URL=
+SUPABASE_KEY=
+
+# NextJS & fastAPI
+URL=http://localhost:3000
+HONCHO_URL=https://demo.honcho.dev
+HONCHO_APP_NAME=
diff --git a/api/dependencies.py b/api/dependencies.py
index 3d2ac1f..c422af3 100644
--- a/api/dependencies.py
+++ b/api/dependencies.py
@@ -7,4 +7,4 @@
 
 LOCK = asyncio.Lock()
 honcho = Honcho(base_url=getenv("HONCHO_URL"))
-app = honcho.apps.get_or_create("Tutor-GPT")
+app = honcho.apps.get_or_create(getenv("HONCHO_APP_NAME"))
diff --git a/www/components/auth/signIn.tsx b/www/components/auth/signIn.tsx
index 985fb3d..9c9745a 100644
--- a/www/components/auth/signIn.tsx
+++ b/www/components/auth/signIn.tsx
@@ -7,24 +7,29 @@ export default function SignIn(props: any) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
   const formRef = useRef<HTMLFormElement>(null);
 
   const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!formRef.current) return;
 
+    setIsLoading(true)
     const formData = new FormData(formRef.current);
-
-    const error = await handler(formData);
-    if (error) {
-      setError(true)
-      Swal.fire({
-        title: 'Error!',
-        text: 'Incorrect Credentials',
-        icon: 'error',
-        confirmButtonText: 'Close',
-        confirmButtonColor: "#3085d6",
-      })
+    try {
+      const error = await handler(formData);
+      if (error) {
+        setError(true)
+        Swal.fire({
+          title: 'Error!',
+          text: 'Incorrect Credentials',
+          icon: 'error',
+          confirmButtonText: 'Close',
+          confirmButtonColor: "#3085d6",
+        })
+      }
+    } finally {
+      setIsLoading(false)
     }
   };
 
@@ -67,7 +72,14 @@ export default function SignIn(props: any) {
         <button
           className="inline-block shrink-0 rounded-md border border-neon-green bg-neon-green px-12 py-3 text-sm font-medium transition hover:bg-transparent hover:text-blue-600 focus:outline-none focus:ring active:text-blue-500"
         >
-          Login
+          {isLoading ? (
+          <>
+            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          </>
+          ): 'Login'}
         </button>
 
         <p className="mt-4 text-sm text-gray-500 sm:mt-0">
diff --git a/www/components/auth/signUp.tsx b/www/components/auth/signUp.tsx
index aa68b7a..581639a 100644
--- a/www/components/auth/signUp.tsx
+++ b/www/components/auth/signUp.tsx
@@ -11,17 +11,22 @@ export default function SignUp(props: any) {
   const [passwordConfirmation, setPasswordConfirmation] = useState('');
   const [opt, setOpt] = useState<boolean>(true)
   const [age, setAge] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState(false)
   const formRef = useRef<HTMLFormElement>(null);
 
   const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!formRef.current) return;
-    const formData = new FormData(formRef.current);
-    if (!age) {
+    setIsLoading(true)
+    try {
+      const formData = new FormData(formRef.current);
+      if (!age) {
       await Swal.fire({
         title: "Age Verification Required",
         icon: 'error',
         text: 'Please confirm that you are 13 years or older',
+        confirmButtonText: 'Close',
+        confirmButtonColor: "#3085d6",
       })
       return
     }
@@ -31,6 +36,8 @@ export default function SignUp(props: any) {
         title: "Passwords don't match",
         icon: 'error',
         text: 'Re-confirm you password and try again',
+        confirmButtonText: 'Close',
+        confirmButtonColor: "#3085d6",
       })
       return
     }
@@ -39,6 +46,8 @@ export default function SignUp(props: any) {
         title: "Insufficient Password",
         icon: 'error',
         text: 'Make sure the password is atleast 6 characters long',
+        confirmButtonText: 'Close',
+        confirmButtonColor: "#3085d6",
       })
       return
     }
@@ -49,15 +58,22 @@ export default function SignUp(props: any) {
         title: "Something went wrong",
         icon: "error",
         text: "Please try again and make sure the password is atleast 6 characters long",
+        confirmButtonText: 'Close',
+        confirmButtonColor: "#3085d6",
       })
       console.error(error);
     } else {
       Swal.fire({
         title: "Success",
         icon: "success",
-        text: "Please check your email for a verification link"
+        text: "Please check your email for a verification link",
+        confirmButtonText: 'Close',
+        confirmButtonColor: "#3085d6",
       })
     }
+    } finally {
+      setIsLoading(false)
+    }
   }
 
 
@@ -164,7 +180,12 @@ export default function SignUp(props: any) {
         <button
           className="inline-block shrink-0 rounded-md border border-neon-green bg-neon-green px-12 py-3 text-sm font-medium transition hover:bg-transparent hover:text-blue-600 focus:outline-none focus:ring active:text-blue-500"
         >
-          Create an account
+          {isLoading ? (  
+            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          ) : 'Create an account'}
         </button>
 
         <p className="mt-4 text-sm text-gray-500 sm:mt-0">