From c8cff9cbb4489eb6e8a6f7ec0b13b7f75324a9dd Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 15 Jun 2024 15:19:11 +0100
Subject: [PATCH] chore: misc improvements

---
 apps/web/app/auth/forgot/forgot.tsx           |  1 +
 apps/web/app/auth/login/login.tsx             | 17 +++++--
 .../Create/NewActivityModal/DynamicCanva.tsx  |  2 +-
 .../Dash/OrgAccess/OrgInviteCodeGenerate.tsx  | 49 ++++++++++++-------
 4 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/apps/web/app/auth/forgot/forgot.tsx b/apps/web/app/auth/forgot/forgot.tsx
index 8b3cb7c2..ecfce06e 100644
--- a/apps/web/app/auth/forgot/forgot.tsx
+++ b/apps/web/app/auth/forgot/forgot.tsx
@@ -42,6 +42,7 @@ function ForgotPasswordClient() {
             email: ''
         },
         validate,
+        validateOnBlur: true,
         onSubmit: async (values) => {
             setIsSubmitting(true)
             let res = await sendResetLink(values.email, org?.id)
diff --git a/apps/web/app/auth/login/login.tsx b/apps/web/app/auth/login/login.tsx
index e766cf51..49dd7161 100644
--- a/apps/web/app/auth/login/login.tsx
+++ b/apps/web/app/auth/login/login.tsx
@@ -51,8 +51,17 @@ const LoginClient = (props: LoginClientProps) => {
       password: '',
     },
     validate,
-    onSubmit: async (values) => {
+    validateOnBlur: true,
+    validateOnChange: true,
+    onSubmit: async (values, {validateForm, setErrors, setSubmitting}) => {
       setIsSubmitting(true)
+      const errors = await validateForm(values);
+      if (Object.keys(errors).length > 0) {
+        setErrors(errors);
+        setSubmitting(false);
+        return;
+      }
+      
       const res = await signIn('credentials', {
         redirect: false,
         email: values.email,
@@ -139,7 +148,7 @@ const LoginClient = (props: LoginClientProps) => {
                   onChange={formik.handleChange}
                   value={formik.values.email}
                   type="email"
-                  required
+                  
                 />
               </Form.Control>
             </FormField>
@@ -155,7 +164,7 @@ const LoginClient = (props: LoginClientProps) => {
                   onChange={formik.handleChange}
                   value={formik.values.password}
                   type="password"
-                  required
+                  
                 />
               </Form.Control>
             </FormField>
@@ -170,7 +179,7 @@ const LoginClient = (props: LoginClientProps) => {
             </div>
             <div className="flex  py-4">
               <Form.Submit asChild>
-                <button className="w-full bg-black text-white font-bold text-center p-2 rounded-md shadow-md hover:cursor-pointer">
+                <button  className="w-full bg-black text-white font-bold text-center p-2 rounded-md shadow-md hover:cursor-pointer">
                   {isSubmitting ? 'Loading...' : 'Login'}
                 </button>
               </Form.Submit>
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx
index faff1760..7d6082ab 100644
--- a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx
+++ b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx
@@ -59,7 +59,7 @@ function DynamicCanvaModal({ submitActivity, chapterId, course }: any) {
           </FormMessage>
         </Flex>
         <Form.Control asChild>
-          <Textarea onChange={handleActivityDescriptionChange} required />
+          <Textarea onChange={handleActivityDescriptionChange}  />
         </Form.Control>
       </FormField>
 
diff --git a/apps/web/components/Objects/Modals/Dash/OrgAccess/OrgInviteCodeGenerate.tsx b/apps/web/components/Objects/Modals/Dash/OrgAccess/OrgInviteCodeGenerate.tsx
index d2b46a11..6e202626 100644
--- a/apps/web/components/Objects/Modals/Dash/OrgAccess/OrgInviteCodeGenerate.tsx
+++ b/apps/web/components/Objects/Modals/Dash/OrgAccess/OrgInviteCodeGenerate.tsx
@@ -1,5 +1,5 @@
 import { useOrg } from '@components/Contexts/OrgContext'
-import { getAPIUrl } from '@services/config/config'
+import { getAPIUrl, getUriWithOrg } from '@services/config/config'
 import { createInviteCode, createInviteCodeWithUserGroup } from '@services/organizations/invites'
 import { swrFetcher } from '@services/utils/ts/requests'
 import { Ticket } from 'lucide-react'
@@ -7,6 +7,7 @@ import { useLHSession } from '@components/Contexts/LHSessionContext'
 import React, { useEffect } from 'react'
 import toast from 'react-hot-toast'
 import useSWR, { mutate } from 'swr'
+import Link from 'next/link'
 
 type OrgInviteCodeGenerateProps = {
     setInvitesModal: any
@@ -56,24 +57,34 @@ function OrgInviteCodeGenerate(props: OrgInviteCodeGenerateProps) {
                     <h1 className='mx-auto pt-4 text-gray-600 font-medium'>Invite Code linked to a UserGroup</h1>
                     <h2 className='mx-auto text-xs text-gray-600 font-medium'>On Signup, Users will be automatically linked to a UserGroup of your choice</h2>
                     <div className='flex items-center space-x-4 pt-3 mx-auto'>
-                        <select
-                            defaultValue={usergroup_id}
-                            className='flex p-2 w-fit  rounded-md text-sm bg-gray-100'>
-                            {usergroups?.map((usergroup: any) => (
-                                <option key={usergroup.id} value={usergroup.id}>
-                                    {usergroup.name}
-                                </option>
-                            ))}
-                        </select>
-                        <div className=''>
-                            <button
-                                onClick={createInviteWithUserGroup}
-                                className="flex space-x-2 w-fit hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
-                            >
-                                <Ticket className="w-4 h-4" />
-                                <span> Generate </span>
-                            </button>
-                        </div>
+                        {usergroups?.length >= 1 &&
+                            <div className='flex space-x-4 items-center'>
+                                <select
+                                    defaultValue={usergroup_id}
+                                    className='flex p-2 w-fit  rounded-md text-sm bg-gray-100'>
+                                    {usergroups?.map((usergroup: any) => (
+                                        <option key={usergroup.id} value={usergroup.id}>
+                                            {usergroup.name}
+                                        </option>
+                                    ))}
+
+                                </select>
+
+                                <div className=''>
+                                    <button
+                                        onClick={createInviteWithUserGroup}
+                                        className="flex space-x-2 w-fit hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
+                                    >
+                                        <Ticket className="w-4 h-4" />
+                                        <span> Generate </span>
+                                    </button>
+                                </div>
+                            </div>}
+                        {usergroups?.length == 0 &&
+                            <div className='flex space-x-3 items-center text-xs pt-3'>
+                                <span className='px-3 text-yellow-700 font-bold rounded-full py-1 mx-3'>No UserGroups available </span>
+                                <Link className='px-3 text-blue-700 font-bold rounded-full py-1 bg-blue-100 mx-1' target='_blank' href={getUriWithOrg(org.slug, '/dash/users/settings/usergroups')}>Create a UserGroup </Link>
+                            </div>}
                     </div>
                 </div>
             </div>