Random avatar generator for profiles #154 (#207)

Co-authored-by: Sanchit Bajaj <55249639+Sanchitbajaj02@users.noreply.github.com>

Author: DaSeeker67

src/backend/auth.api.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { account, db, ID, palettegramDB, usersCollection, Query } from "./appwrite.config";
+import { generateAvatar } from './avatarGenerator';
 
 /**
  * @description Register the user into the database
@@ -9,6 +10,18 @@ import { account, db, ID, palettegramDB, usersCollection, Query } from "./appwri
  */
 const registerUser = async (userData: any) => {
   try {
+
+    // console.log("register: ", userData.email, userData.password, userData.fullName);
+    if (userData.password != userData.confirmpassword) {
+      throw Error("not matching");
+    }
+    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; //it will check that password must contain atleast one digit ,atleast one alphabet , atleast one special character and must be of atleast length 8
+
+    if (!passwordRegex.test(userData.password)) {
+      throw Error("password is not strong");
+    }
+    const avatar = generateAvatar(userData.fullName);
+
     const authResponse = await account.create(
       ID.unique(),
       userData.email,
@@ -191,12 +204,14 @@ const saveDataToDatabase = async (session: any) => {
   try {
     let username = session.email.split("@")[0];
     console.log(username);
+    const avatar = generateAvatar(session.name);
     const resp = await db.createDocument(palettegramDB, usersCollection, ID.unique(), {
       email: session.email,
       fullName: session.name,
       isVerified: session.emailVerification,
       accountId: session.$id,
       username: username,
+      avatarURL: avatar, 
     });
     if (!resp) {
       throw new Error("Database not working");

src/backend/avatarGenerator.ts

@@ -0,0 +1,13 @@
+export const generateAvatar = (name: string, variant: string = 'marble', size: number = 120, colors: string[] = []): string => {
+    const encodedName = encodeURIComponent(name);
+    const baseUrl = 'https://source.boringavatars.com/';
+    
+    let url = `${baseUrl}${variant}/${size}/${encodedName}`;
+  
+    if (colors.length > 0) {
+      const encodedColors = colors.map(color => encodeURIComponent(color)).join(',');
+      url += `?colors=${encodedColors}`;
+    }
+  
+    return url;
+  };

src/components/pages/user/index.tsx

@@ -48,15 +48,17 @@ export default function User({ userId }: { userId: string }) {
               className="object-center object-cover rounded-md"
             />
           </div>
-          <section className="-mt-20 px-2">
-            <div className="flex justify-between items-end">
-              <Image
-                src="/assets/user.png"
-                alt="user"
-                width={135}
-                height={135}
-                className=" border-4 border-white dark:border-slate-800 rounded-full object-contain"
-              />
+
+          <section className="-mt-20 px-3">
+            <div className="flex justify-between items-end ">
+            <Image
+    src={user && user?.documents[0].avatarURL}
+    alt="user"
+    width={125}
+    height={125}
+    className="border-4 border-white dark:border-slate-800 rounded-full object-contain "
+  />
+
               <div className="h-fit flex gap-4">
                 <Mail className="h-7 w-7 sm:h-9 sm:w-9 border-2 p-1 rounded-full text-slate-700 dark:text-slate-400 border-slate-700 dark:border-slate-400" />
                 <ButtonLong href="#" size="normal">

src/redux/reducers/authReducer.ts

@@ -10,6 +10,7 @@ const initialState: userDetail = {
     email: "",
     createdAt: "",
     isVerified: false,
+    avatarURL: "",
   },
   error: false,
   loading: false,

src/types/index.d.ts

@@ -25,6 +25,7 @@ export type userDetail = {
     email: string;
     createdAt: string;
     isVerified: boolean;
+    avatarURL: string; 
   };
   error: boolean;
   loading: boolean;