minor login # refactoring and navbar revamped

djangoindia · Feb 9, 2025 · 03e17b1 · 03e17b1
1 parent 1566b11
commit 03e17b1
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 102 deletions.
diff --git a/backend/djangoindia/db/admin.py b/backend/djangoindia/db/admin.py
@@ -299,9 +299,16 @@ class UserAdmin(admin.ModelAdmin):
                     "first_name",
                     "last_name",
                     "avatar",
+                    "cover_image",
                     "gender",
-                    "organization",
                     "mobile_number",
+                    "bio",
+                    "about",
+                    "website",
+                    "linkedin",
+                    "github",
+                    "twitter",
+                    "instagram",
                 )
             },
         ),

diff --git a/frontend/src/containers/#/#.tsx b/frontend/src/containers/#/#.tsx
@@ -10,8 +10,7 @@ import { useRouter } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 import { enqueueSnackbar } from 'notistack';
 import { type SubmitHandler, useForm } from 'react-hook-form';
-import { AiFillGoogleCircle, AiFillGoogleSquare } from 'react-icons/ai';
-import { FaGoogle, FaHome } from 'react-icons/fa';
+import { FaHome, FaGoogle } from 'react-icons/fa';
 
 import { Button, Input, Label } from '@/components';
 import { LOGIN_FORM_SCHEMA } from '@/constants';
@@ -58,7 +57,7 @@ const Page = () => {
       >
         <FaHome className='text-2xl text-[#06038D] transition-transform duration-300 group-hover:scale-110' />
       </Link>
-      <div className='flex-1'>
+      <div className='flex-1 hidden sm:block'>
         <motion.div
           className='h-full'
           initial={{ x: -100 }}
@@ -79,7 +78,7 @@ const Page = () => {
       </div>
       <div className='z-10 flex flex-1 items-center justify-center'>
         <motion.div
-          className='w-3/5'
+          className='w-4/5 sm:w-3/5'
           initial={{ x: 100 }}
           animate={{ x: 0 }}
           transition={{
@@ -94,7 +93,7 @@ const Page = () => {
             Enter your details to continue
           </span>
           <form
-            className='flex w-full flex-col gap-2'
+            className='flex w-full flex-col'
             onSubmit={handleSubmit(onSubmit)}
           >
             <div className='grid w-full items-center gap-1.5'>
@@ -146,19 +145,19 @@ const Page = () => {
             <Button
               onClick={async () =>
                 await signIn('google', {
-                  callbackUrl: '/users/me  ',
+                  callbackUrl: '/users/me',
                 })
               }
-              className='mx-auto flex items-center gap-4 pl-0'
+              className='w-full flex items-center gap-4 pl-0'
             >
-              <AiFillGoogleSquare size={42} />
+              <FaGoogle size={20} />
               # with Google
             </Button>
           </div>
         </motion.div>
       </div>
       <motion.div
-        className='absolute left-1/2 top-1/3 z-0 size-[1400px]'
+        className='absolute left-1/6 sm:left-1/2 top-1/3 z-0 size-[1400px]'
         initial={{ x: 100, y: 100 }}
         animate={{ x: 20, y: 0 }}
         transition={{

diff --git a/frontend/src/containers/#/#.tsx b/frontend/src/containers/#/#.tsx
@@ -8,8 +8,9 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { type SubmitHandler, useForm } from 'react-hook-form';
+import { signIn } from 'next-auth/react';
 import { enqueueSnackbar } from 'notistack';
-import { FaHome } from "react-icons/fa";
+import { FaHome, FaGoogle } from "react-icons/fa";
 
 import { Button, Input, Label } from '@/components';
 import { #_FORM_SCHEMA } from '@/constants';
@@ -48,15 +49,15 @@ const #Form = () => {
     <section className='relative flex size-full overflow-hidden'>
       <Link 
         href='/home' 
-        className='absolute top-4 left-4 p-3 rounded-full transition-all duration-300 hover:bg-blue-100 hover:shadow-xl group z-50 pointer-events-auto'
+        className='absolute top-4 right-4 sm:left-4 p-3 rounded-full transition-all duration-300 hover:bg-blue-100 hover:shadow-xl group z-50 pointer-events-auto'
       >
         <FaHome 
           className='text-[#06038D] text-2xl transition-transform duration-300 group-hover:scale-110' 
         />
       </Link>
       <div className='z-10 flex flex-1 items-center justify-center'>
         <motion.div
-          className='w-3/5'
+          className='w-4/5 sm:w-3/5'
           initial={{ x: -100 }}
           animate={{ x: 0 }}
           transition={{
@@ -78,7 +79,7 @@ const #Form = () => {
             Become a member
           </span>
           <form
-            className='flex w-full flex-col gap-2'
+            className='flex w-full flex-col'
             onSubmit={handleSubmit(onSubmit)}
           >
             <div className='grid w-full items-center gap-1.5'>
@@ -137,11 +138,25 @@ const #Form = () => {
             </div>
             <Button type='submit'>Create Account</Button>
           </form>
+          <div className='my-4 flex w-full flex-col gap-3 text-center'>
+            <span>Or</span>
+            <Button
+              onClick={async () =>
+                await signIn('google', {
+                  callbackUrl: '/users/me  ',
+                })
+              }
+              className='w-full flex items-center gap-4 pl-0'
+            >
+              <FaGoogle size={20} />
+              # with Google
+            </Button>
+            </div>
           <div>
           </div>
         </motion.div>
       </div>
-      <div className='flex-1'>
+      <div className='flex-1 hidden sm:block'>
       <motion.div
           className='h-full'
           initial={{ x: 100 }}
@@ -161,7 +176,7 @@ const #Form = () => {
         </motion.div>
       </div>
       <motion.div
-        className='absolute bottom-1/3 right-1/2 z-0 size-[1400px]'
+        className='absolute bottom-1/3 right-1/4 sm:right-1/2 z-0 size-[1400px]'
         initial={{ x: -100, y: -100 }}
         animate={{ x: -20, y: 0 }}
         transition={{

diff --git a/frontend/src/containers/SupportUsDialog/SupportUsDialog.tsx b/frontend/src/containers/SupportUsDialog/SupportUsDialog.tsx
@@ -24,7 +24,7 @@ const SupportUsDialog = ({
   return (
     <Dialog>
       <DialogTrigger asChild onClick={onClose}>
-        <Button className='text-xs md:text-base'>Support Us</Button>
+        <Button className='text-xs md:text-base w-full'>Support Us</Button>
       </DialogTrigger>
       <DialogContent className='sm:max-w-[730px]'>
         <DialogHeader>

diff --git a/frontend/src/containers/Users/User.tsx b/frontend/src/containers/Users/User.tsx
@@ -22,7 +22,14 @@ type UserData = {
   username: string;
   is_password_autoset: boolean;
   gender: string;
-  organization: string | null;
+  bio: string | null;
+  about: string | null;
+  website: string | null;
+  linkedin: string | null;
+  github: string | null;
+  twitter: string | null;
+  instagram: string | null;
+  cover_image: string | null;
 };
 
 const UserContainer = async ({
@@ -36,25 +43,23 @@ const UserContainer = async ({
     },
   });
 
-  console.log(userData);
-
   return (
     <section className='container py-10'>
       <div className='relative h-64 w-full rounded-2xl'>
         <Image
-          src='https://picsum.photos/1300/250'
+          src={userData?.cover_image || 'https://picsum.photos/1300/250'}
           fill
           alt='Profile Cover'
           objectFit='cover'
           className='rounded-2xl'
         />
-        <UserAvatar avatarUrl={userData?.avatar} />
+        <UserAvatar avatarUrl={userData?.avatar || 'https://github.com/shadcn.png'} />
       </div>
       <div className='mt-36 flex flex-col'>
-        <h3 className='text-3xl font-bold'>{userData?.username}</h3>
+        <h3 className='text-3xl font-bold'>{userData?.first_name}{' '}{userData?.last_name}</h3>
+        <h3>@{userData?.username}</h3>
         {/* Uncomment when API cahnges are done */}
-        {/* <span className='text-sm'>Senior Frontend Developer @JTG</span>
-        <span className='text-xs'>Gurugram, India</span> */}
+        <span className='text-sm'>{userData?.bio}</span>
       </div>
     </section>
   );