Changeset 3de009b for frontend/src

Timestamp:

02/05/26 16:11:26 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

929e93c

Parents:

0792d02

Message:

enable registering as listener and artist

Location:

frontend/src

Files:

• pages/Register.tsx (modified) (6 diffs)
• utils/types.ts (modified) (1 diff)

frontend/src/pages/Register.tsx

@@ -4 +4 @@
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
-import type { User } from "../utils/types";
+import type { User, UserRegisterType } from "../utils/types";
 
 const Register = () => {
@@ -11 +11 @@
         const [password, setPassword] = useState("");
         const [fullname, setFullname] = useState("");
+        const [userType, setUserType] = useState<UserRegisterType[]>([]);
         const [email, setEmail] = useState("");
         const [profilePhotoFile, setProfilePhotoFile] = useState<File | null>(null);
@@ -43 +44 @@
                 }
 
-                if (username === "" || password === "" || fullname === "" || email === "") {
+                if (
+                        username === "" ||
+                        password === "" ||
+                        fullname === "" ||
+                        email === "" ||
+                        userType.length === 0
+                ) {
                         setError("Please fill in all required fields.");
                         return;
                 }
-
                 if (profilePhotoFile && !profilePhotoFile.type.startsWith("image/")) {
                         alert("Only images allowed");
@@ -58 +64 @@
                 formData.append("email", email);
                 formData.append("password", password);
+                userType.forEach((type) => formData.append("userType", type));
 
                 try {
@@ -77 +84 @@
                 <div className="flex flex-col items-center justify-center min-h-[90vh] bg-gray-100">
                         <h2 className="text-2xl mb-4">Register</h2>
-                        <form className="bg-white p-6 rounded shadow-md w-full max-w-md">
+                        <form
+                                className="bg-white p-6 rounded shadow-md w-full max-w-md"
+                                onSubmit={handleRegister}
+                        >
                                 {error && <p className="text-red-500 mb-4">{error}</p>}
                                 <div className="mb-4">
@@ -126 +136 @@
                                                 onChange={(e) => setEmail(e.target.value)}
                                         />
+                                </div>
+                                <div className="mb-4">
+                                        <label className="block text-gray-700 mb-2" htmlFor="userType">
+                                                User Type
+                                        </label>
+                                        <input
+                                                type="checkbox"
+                                                id="artist"
+                                                value="ARTIST"
+                                                onChange={(e) => {
+                                                        if (e.target.checked) {
+                                                                setUserType((prev) => [...prev, "ARTIST"]);
+                                                        } else {
+                                                                setUserType((prev) => prev.filter((type) => type !== "ARTIST"));
+                                                        }
+                                                }}
+                                        />
+                                        <label htmlFor="artist" className="ml-2 mr-4">
+                                                Artist
+                                        </label>
+                                        <input
+                                                type="checkbox"
+                                                id="listener"
+                                                value="LISTENER"
+                                                onChange={(e) => {
+                                                        if (e.target.checked) {
+                                                                setUserType((prev) => [...prev, "LISTENER"]);
+                                                        } else {
+                                                                setUserType((prev) =>
+                                                                        prev.filter((type) => type !== "LISTENER"),
+                                                                );
+                                                        }
+                                                }}
+                                        />
+                                        <label htmlFor="listener" className="ml-2">
+                                                Listener
+                                        </label>
                                 </div>
                                 <div className="mb-4">

frontend/src/utils/types.ts

@@ -1 +1 @@
 export interface User {
-  username: string;
-  fullName: string;
-  email?: string;
-  profilePhoto?: string | null;
-  role?: "ADMIN" | "NONADMIN";
+        username: string;
+        fullName: string;
+        email?: string;
+        profilePhoto?: string | null;
+        role?: "ADMIN" | "NONADMIN";
 }
 
 export interface ArtistContribution {
-  id: number;
-  title: string;
-  genre: string;
-  role: string;
-  entityType: string;
-  isLikedByCurrentUser: boolean;
+        id: number;
+        title: string;
+        genre: string;
+        role: string;
+        entityType: string;
+        isLikedByCurrentUser: boolean;
 }
 
 export interface MusicalEntity {
-  id: number;
-  title: string;
-  genre: string;
-  type: string;
-  releasedBy: string;
-  isLikedByCurrentUser?: boolean;
+        id: number;
+        title: string;
+        genre: string;
+        type: string;
+        releasedBy: string;
+        isLikedByCurrentUser?: boolean;
 }
 
 export interface Song extends MusicalEntity {
-  type: "SONG";
+        type: "SONG";
 }
 
 export interface Album extends MusicalEntity {
-  type: "ALBUM";
-  songs: Song[];
+        type: "ALBUM";
+        songs: Song[];
 }
 
 export interface Playlist {
-  id: number;
-  name: string;
-  cover: string;
-  creatorName: string;
-  songsInPlaylist: Song[];
-  isSavedByCurrentUser: boolean;
+        id: number;
+        name: string;
+        cover: string;
+        creatorName: string;
+        songsInPlaylist: Song[];
+        isSavedByCurrentUser: boolean;
 }
 
 export interface BaseNonAdminUser {
-  username: string;
-  fullName: string;
-  userType: string;
-  profilePhoto: string;
-  followers: number;
-  following: number;
-  isFollowedByCurrentUser: boolean;
+        username: string;
+        fullName: string;
+        userType: string;
+        profilePhoto: string;
+        followers: number;
+        following: number;
+        isFollowedByCurrentUser: boolean;
 }
+
+export type UserRegisterType = "ARTIST" | "LISTENER";