Merge branch 'ms3-frontend' into ms3-jmsandiegoo/frontend-onboarding

Author: jmsandiegoo

backend/auth-service/src/app.service.ts

@@ -56,6 +56,7 @@ export class AppService {
       const tokens = await this.generateTokens({
         id: userId,
         email: newUser.email,
+        isOnboarded: newUser.isOnboarded,
         roles: newUser.roles,
       });
       await this.updateRefreshToken({
@@ -93,6 +94,7 @@ export class AppService {
       const tokens = await this.generateTokens({
         id: userId,
         email: user.email,
+        isOnboarded: user.isOnboarded,
         roles: user.roles,
       });
       await this.updateRefreshToken({
@@ -141,6 +143,7 @@ export class AppService {
       const tokens = await this.generateTokens({
         id: id,
         email: user.email,
+        isOnboarded: user.isOnboarded,
         roles: user.roles,
       });
       await this.updateRefreshToken({ id, refreshToken: tokens.refresh_token });
@@ -286,25 +289,23 @@ export class AppService {
 
   // Could include other fields like roles in the future
   private async generateTokens(payload: TokenPayload): Promise<Token> {
-    const { id, email, roles } = payload;
+    const { id, ...rest } = payload;
 
     const [accessToken, refreshToken] = await Promise.all([
       this.jwtService.signAsync(
-        {
-          sub: id,
-          email,
-          roles,
-        },
-        {
-          secret: process.env.JWT_SECRET,
-          expiresIn: '15m', // 15 minute
+      {
+        sub: id,
+        ...rest,
+      },
+      {
+        secret: process.env.JWT_SECRET,
+        expiresIn: '15m', // 15 minutes
         },
       ),
       this.jwtService.signAsync(
         {
           sub: id,
-          email,
-          roles,
+          ...rest,
         },
         {
           secret: process.env.JWT_REFRESH_SECRET,
@@ -365,6 +366,7 @@ export class AppService {
       const jwtTokens = await this.generateTokens({
         id: user._id.toString(),
         email: user.email,
+        isOnboarded: user.isOnboarded,
         roles: user.roles,
       });
 
@@ -467,6 +469,7 @@ export class AppService {
     const jwtTokens = await this.generateTokens({
       id: user._id.toString(),
       email: user.email,
+      isOnboarded: user.isOnboarded,
       roles: user.roles,
     });
 

backend/auth-service/src/interfaces/token-payload.interface.ts

@@ -1,5 +1,6 @@
 export interface TokenPayload {
   id: string;
   email: string;
+  isOnboarded: boolean;
   roles: string[];
 }

backend/gateway-service/src/modules/auth/auth.controller.ts

@@ -19,7 +19,7 @@ import {
 import { AuthDto, ResetPasswordDto, ResetPasswordRequestDto } from './dto';
 import { Token } from './interfaces';
 import { ClientProxy } from '@nestjs/microservices';
-import { first, firstValueFrom } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { RtAuthGuard } from '../../common/guards';
 import { GetCurrentUserId } from 'src/common/decorators/get-current-user-id.decorator';
 import { GetCurrentUser, Public } from 'src/common/decorators';

frontend/src/app/profile/_components/EditProfile.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import React, { useCallback } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Form, FormLabel } from "@/components/ui/form";
+import { Button } from "@/components/ui/button";
+import { TextInput } from "@/components/form/TextInput";
+import { RadioGroupInput } from "@/components/form/RadioGroupInput";
+import { useToast } from "@/hooks/use-toast";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CodeXml } from "lucide-react";
+import { updateProfile } from "@/services/profileService";
+import { useRouter } from "next/navigation";
+
+interface EditProfileModalProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  userProfile: {
+    displayName: string;
+    username: string;
+    email: string;
+    proficiency: string;
+  };
+}
+
+const FormSchema = z.object({
+  displayName: z.string().min(1, "Display Name is required"),
+  username: z.string().min(1, "Username is required"),
+  email: z.string().email("Invalid email format"),
+  proficiency: z.enum(["Beginner", "Intermediate", "Advanced"]),
+});
+
+export function EditProfile({
+  isOpen,
+  setIsOpen,
+  userProfile,
+}: EditProfileModalProps) {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      displayName: userProfile.displayName,
+      username: userProfile.username,
+      email: userProfile.email,
+    },
+  });
+
+  const onSubmit = useCallback(
+    async (data: z.infer<typeof FormSchema>) => {
+      const response = await updateProfile(data);
+
+      if (response.statusCode !== 200) {
+          toast({
+            variant: "destructive",
+            title: "Error updating profile",
+            description: response.message,
+          });
+          return;
+        } else {
+        toast({
+          title: "Profile updated!",
+          description: "Your profile has been updated successfully.",
+        });
+        setIsOpen(false);
+        router.refresh();
+        }
+    },
+
+    [toast, setIsOpen, router]
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-primary">Edit Profile</DialogTitle>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col space-y-4"
+            >
+            {/* Profile Image Upload */}
+            {/*<FormLabel className="pt-8">Profile Image</FormLabel>
+             <div className="flex flex-row justify-center items-center p-2">
+                <input
+                    type="file"
+                    className="hidden"
+                    id="profile-upload"
+                    accept="image/*"
+                />
+                
+                <Avatar>
+                    <AvatarImage/>
+                    <AvatarFallback className="text-base font-normal text-foreground">
+                        <CodeXml/>
+                    </AvatarFallback>
+                </Avatar>
+
+                <div className="pl-6">
+                    <label
+                        htmlFor="profile-upload"
+                        className="bg-background-200 text-sm rounded-lg font-bold p-2 cursor-pointer"
+                    >
+                        Upload Image
+                    </label>
+                    <DialogDescription className="pt-2">.png, .jpeg files up to 2MB. Recommended size is 256x256px.</DialogDescription>
+                </div>
+            </div> */}
+
+            {/* Display Name */}
+            <TextInput label="Display Name" name="displayName" placeholder="Display Name" />
+
+            {/* Username */}
+            <TextInput label="Username" name="username" placeholder="Username" />
+            {form.formState.errors.username && (
+            <p className="text-destructive text-sm">
+                {form.formState.errors.username.message || "Username already taken"}
+            </p>
+            )}
+
+            {/* Email */}
+            {/* <TextInput label="Email" name="email" placeholder="Email" /> */}
+
+            {/* Proficiency Radio Buttons */}
+            <RadioGroupInput
+            label="Proficiency"
+            name="proficiency"
+            options={[
+                { value: "Beginner", optionLabel: "Beginner" },
+                { value: "Intermediate", optionLabel: "Intermediate" },
+                { value: "Advanced", optionLabel: "Advanced" },
+            ]}
+            />
+
+            <Button className="p-5" type="submit">
+            {form.formState.isSubmitting
+                ? "Updating Profile"
+                : "Save"}
+            </Button>
+            </form>
+          </Form>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/app/profile/_components/EditProfileButton.tsx

@@ -0,0 +1,33 @@
+'use client'; // Make only this component a client component
+
+import { useState } from 'react';
+import { EditProfile } from './EditProfile';
+import { Profile } from '@/types/Profile';
+
+interface EditProfileButtonProps {
+  profileDetails: Profile;
+}
+
+export default function EditProfileButton({ profileDetails }: EditProfileButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="bg-primary text-sm font-semibold py-2 rounded-md"
+      >
+        Edit Profile
+      </button>
+
+      {/* Edit Profile Modal */}
+      {isOpen && (
+        <EditProfile
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          userProfile={profileDetails}
+        />
+      )}
+    </>
+  );
+}

frontend/src/app/profile/_components/GitGraph.tsx

@@ -0,0 +1,59 @@
+import { Card } from "@/components/ui/card";
+import CollaborationHeatmap from "./HeatMap";
+
+export default function GitGraph() {
+    const monthsData = [
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // January
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // February
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // March
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // April
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // May
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // June
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // July
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // August
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // Sept
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // Oct
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // Nov
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // Dec
+      ];
+
+    return (
+        <Card className="flex flex-col rounded-md p-6 gap-4">
+            <StatsHeader />
+            <div className="flex flex-row"> 
+                <StatsDetails/>
+                <CollaborationHeatmap
+                    monthsData={monthsData}
+                    year={2024}
+                />
+            </div>
+        </Card>
+    )
+}
+
+function StatsHeader() {
+    return (
+        <div className="flex flex-row gap-2">
+            <big className="font-bold">15</big>
+            <big className="text-card-foreground-100"> collaborations done in the past one year</big>
+        </div>
+    )
+}
+function StatsDetails() {
+    return (
+        <div className="flex flex-col gap-2 pt-2 pl-2 pr-4">
+            <div className="flex flex-col p-1">
+                <small className="font-bold"> Total Active: </small>
+                <small className="text-card-foreground-100"> 15 Days </small>
+            </div>
+            <div className="flex flex-col p-1">
+                <small className="font-bold"> Max Streaks: </small>
+                <small className="text-card-foreground-100"> 3 Days </small>
+            </div>
+        </div>
+    )
+}
+
+function MonthlyCommits({ month } : { month: string }) {
+
+}

frontend/src/app/profile/_components/HeatMap.tsx

@@ -0,0 +1,50 @@
+interface CollaborationHeatmapProps {
+  monthsData: Array<Array<number>>;
+  year: number;
+}
+
+export default function CollaborationHeatmap({
+  monthsData,
+  year,
+}: CollaborationHeatmapProps) {
+  return (
+    <section className="flex flex-row gap-8 rounded-lg max-w-4xl">
+      <div className="grid grid-cols-12 gap-2 mt-4">
+        {monthsData.map((month, monthIndex) => (
+          <div key={monthIndex} className="flex flex-col items-center">
+            <div className="grid grid-cols-3 gap-1">
+              {month.map((active, dayIndex) => (
+                <div
+                  key={dayIndex}
+                  className={`w-4 h-4 ${active ? "bg-primary" : "bg-background-100"}`}
+                />
+              ))}
+            </div>
+            <p className="text-sm text-card-foreground-100 pt-4">{getMonthName(monthIndex)}</p>
+          </div>
+        ))}
+      </div>
+
+        <div className="flex flex-col items-center">
+          {[2024, 2023, 2022, 2021].map((yr) => (
+            <button
+              key={yr}
+              className={`w-20 py-1 font-bold my-1 rounded-md ${year === yr ? "bg-primary" : "text-card-foreground-100"}`}
+            >
+              {yr}
+            </button>
+          ))}
+        </div>
+
+    </section>
+  );
+}
+
+// Convert month index to name
+function getMonthName(index: number): string {
+  const months = [
+    "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
+    "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+  ];
+  return months[index];
+}