fix: socket IO port login and signup

BacPacNet · Dec 15, 2024 · 38ed0cc · 38ed0cc
1 parent ef51c55
commit 38ed0cc
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 34 deletions.
diff --git a/src/components/atoms/InputWarningText/index.tsx b/src/components/atoms/InputWarningText/index.tsx
@@ -6,7 +6,7 @@ interface InputWarningTextProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export default function InputWarningText({ children, className = '', ...rest }: InputWarningTextProps) {
   return (
-    <span className={`text-red-500 font-normal ${className}`} {...rest}>
+    <span className={`text-red-500 font-normal text-2xs py-1 ${className}`} {...rest}>
       {children}
     </span>
   )

diff --git a/src/components/atoms/SelectUniversityDropDown/index.tsx b/src/components/atoms/SelectUniversityDropDown/index.tsx
@@ -86,12 +86,17 @@ const SelectUniversityDropdown = ({ onChange, value, placeholder, icon, search =
                 <div
                   className={`${
                     key === 0 ? '' : 'border-t'
-                  } border-neutral-300 text-sm text-neutral-900 p-2 cursor-pointer hover:bg-gray-200 flex gap-2 items-center`}
+                  } border-neutral-300 text-sm text-neutral-900 p-2 cursor-pointer hover:bg-gray-200 flex gap-3 items-center`}
                   onClick={() => handleSelect(item)}
                   key={key}
                 >
-                  <img className="rounded-full" width={40} height={40} alt="logo" src={item?.logos?.[0] || (ImagePlaceholder as unknown as string)} />
-                  <p> {item?.name}</p>
+                  <img
+                    className="rounded-full"
+                    style={{ width: '40px', height: '40px' }}
+                    alt="logo"
+                    src={item?.logos?.[0] || (ImagePlaceholder as unknown as string)}
+                  />
+                  <p className="text-2xs"> {item?.name}</p>
                 </div>
               ))
             ) : isFetching ? (

diff --git a/src/components/organism/Login/LoginBox.tsx b/src/components/organism/Login/LoginBox.tsx
@@ -82,7 +82,7 @@ const LoginBox = () => {
               Password
             </label>
             <InputBox
-              placeholder="*******************"
+              placeholder="*********"
               type={showPassword ? 'text' : 'password'}
               {...registerLogin('password', { required: true })}
               err={!!loginErrors.password}
@@ -95,14 +95,16 @@ const LoginBox = () => {
               )}
             </div>
             {loginErrors.password && <InputWarningText>Please enter your password!</InputWarningText>}
-            <label className="text-neutral-500 text-xs">Forgot Password?</label>
+            <label className="w-fit text-neutral-500 text-xs cursor-pointer hover:text-primary hover:underline">Forgot Password?</label>
           </div>
 
-          <div className="flex gap-2 items-center">
+          {/*<div className="flex gap-2 items-center">
             <input className="w-4 h-4 border-neutral-300" type="checkbox" />
             <p className="text-neutral-900 text-sm">Remember device for 30 days</p>
-          </div>
-          <Button variant="primary">{isPending ? <Spinner /> : 'Log in'}</Button>
+          </div>*/}
+          <Button disabled={isPending} variant="primary">
+            {isPending ? <Spinner /> : 'Log in'}
+          </Button>
           <InputWarningText>{isAxiosError(error) && error.response?.data?.message}</InputWarningText>
         </form>
       </div>

diff --git a/src/components/organism/Register/forms/AccountCreationForm.tsx b/src/components/organism/Register/forms/AccountCreationForm.tsx
@@ -53,7 +53,7 @@ const AccountCreationForm = ({ isPending }: Props) => {
         <Title>Join Our Community</Title>
         <SupportingText>Enter your credentials to create an account</SupportingText>
       </div>
-      <div className="w-10/12 flex flex-col gap-2 ">
+      <div className="w-10/12 flex flex-col gap-3 ">
         <div className="w-full flex flex-col">
           <InputBox
             placeholder="Email Address"
@@ -88,7 +88,7 @@ const AccountCreationForm = ({ isPending }: Props) => {
             </InputWarningText>
           )}
         </div>
-        <div className="relative w-full flex flex-col gap-2">
+        <div className="relative w-full flex flex-col">
           <InputBox
             placeholder="Create password"
             type={showPassword ? 'text' : 'password'}
@@ -110,7 +110,7 @@ const AccountCreationForm = ({ isPending }: Props) => {
             {/* <PasswordToggleIcon showPassword={showPassword} onClick={(value: any) => setShowPassword(value)} /> */}
           </div>
           {password?.length ? (
-            <div className="flex w-full gap-1 ">
+            <div className="flex w-full gap-1 py-2 ">
               {[1, 2, 3, 4].map((item) => (
                 <span
                   key={item}
@@ -129,7 +129,7 @@ const AccountCreationForm = ({ isPending }: Props) => {
             registerFormErrors.password && <InputWarningText>Please enter your password!</InputWarningText>
           )}
         </div>
-        <div className="relative w-full flex flex-col gap-2">
+        <div className="relative w-full flex flex-col">
           <InputBox
             placeholder="Confirm password"
             type={showConfirmPassword ? 'text' : 'password'}
@@ -147,25 +147,26 @@ const AccountCreationForm = ({ isPending }: Props) => {
             <InputWarningText>{registerFormErrors.confirmpassword.message?.toString() || 'Please enter your password'}</InputWarningText>
           )}
 
-          <label className="text-neutral-500 text-xs">must be at least 8 characters</label>
+          <label className="text-neutral-500 text-xs py-1">must be at least 8 characters</label>
         </div>
       </div>
-      <div className="w-10/12 flex flex-col gap-2">
+      <div className="w-10/12 flex flex-col gap-4">
         <Button disabled={isPending} variant="primary">
           {isPending ? <Spinner /> : ' Create an account'}
         </Button>
         <Button type="button" variant="border" className="flex items-center justify-center gap-2 h-10">
           <Image src={googleIcon} alt="go" /> Sign up with Google
         </Button>
-      </div>
-      <div className="mt-4 mx-auto">
-        <p>
-          Already have an account?{' '}
-          <span onClick={() => router.push('/login')} className="text-primary-500 cursor-pointer">
-            {' '}
-            Log in
-          </span>
-        </p>
+
+        <div className="mx-auto">
+          <p>
+            Already have an account?{' '}
+            <span onClick={() => router.push('/login')} className="text-primary-500 cursor-pointer">
+              {' '}
+              Log in
+            </span>
+          </p>
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/organism/Register/forms/ProfileFacultyForm.tsx b/src/components/organism/Register/forms/ProfileFacultyForm.tsx
@@ -100,7 +100,7 @@ const ProfileFacultyForm = () => {
           {ProfileFormErrors.department && <InputWarningText>{ProfileFormErrors?.department?.message?.toString()}</InputWarningText>}
         </div>
       </div>
-      <div className="w-10/12 xl:wGender-9/12 flex flex-col gap-2">
+      <div className="w-10/12 xl:w-9/12 flex flex-col gap-2">
         <Button variant="primary">Next Step</Button>
       </div>
 

diff --git a/src/components/organism/Register/forms/ProfileSetupForm.tsx b/src/components/organism/Register/forms/ProfileSetupForm.tsx
@@ -26,7 +26,7 @@ const ProfileSetupForm = () => {
         <Title>Profile Setup</Title>
         <SupportingText>Enter your profile information for networking</SupportingText>
       </div>
-      <div className="w-10/12 xl:w-9/12 flex flex-col gap-2 ">
+      <div className="w-10/12 xl:w-9/12 flex flex-col gap-3 ">
         <div className="w-full flex flex-col">
           <InputBox
             placeholder="First Name"

diff --git a/src/components/organism/Register/forms/ProfileStudentForm.tsx b/src/components/organism/Register/forms/ProfileStudentForm.tsx
@@ -36,7 +36,7 @@ const ProfileStudentForm = () => {
         <Title>University Setup</Title>
         <SupportingText>Enter your university information for networking</SupportingText>
       </div>
-      <div className="w-10/12 xl:w-9/12 flex flex-col gap-2 ">
+      <div className="w-10/12 xl:w-9/12 flex flex-col gap-3 ">
         <div className="w-full flex flex-col relative">
           <Controller
             name="universityName"
@@ -62,13 +62,13 @@ const ProfileStudentForm = () => {
           <Controller
             name="year"
             control={control}
-            rules={{ required: 'Year is required!' }}
+            rules={{ required: 'year is required!' }}
             render={({ field }) => (
               <SelectDropdown
                 options={currYear}
                 value={field.value}
                 onChange={field.onChange}
-                placeholder="year"
+                placeholder="Year"
                 icon={'single'}
                 err={!!ProfileFormErrors.year}
               />
@@ -117,7 +117,7 @@ const ProfileStudentForm = () => {
           {ProfileFormErrors.major && <InputWarningText>{ProfileFormErrors?.major?.message?.toString()}</InputWarningText>}
         </div>
       </div>
-      <div className="w-10/12 xl:wGender-9/12 flex flex-col gap-2">
+      <div className="w-10/12 xl:w-9/12 flex flex-col gap-2">
         <Button variant="primary">Next Step</Button>
       </div>
 

diff --git a/src/store/socketSlice/socketSlice.ts b/src/store/socketSlice/socketSlice.ts
@@ -39,8 +39,7 @@ export const createSocketSlice: StateCreator<SocketSlice> = (set, get) => ({
   ...initialState,
 
   initializeSocket: (userId, refetchUserData, refetchNotification, refetchUserProfileData, refetchMessageNotification, isRouteMessage) => {
-    const newSocket = io('http://localhost:8000')
-    // console.log('url', process.env.NEXT_PUBLIC_API_BASE_URL)
+    const newSocket = io(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000')
 
     newSocket.on('connect', () => {
       console.log('Connected to the server')

diff --git a/src/types/RegisterForm/index.ts b/src/types/RegisterForm/index.ts
@@ -65,8 +65,8 @@ export enum userTypeEnum {
 }
 
 export enum userCheckError {
-  emailNotAvailable = 'Email is already taken',
-  userNameNotAvailable = 'userName Already taken',
+  emailNotAvailable = 'email is already taken',
+  userNameNotAvailable = 'username already taken',
 }
 
 export const badgeData = [