Ignore:
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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/pages/Register.tsx

    r0792d02 r3de009b  
    44import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
    55import { useAuth } from "../context/authContext";
    6 import type { User } from "../utils/types";
     6import type { User, UserRegisterType } from "../utils/types";
    77
    88const Register = () => {
    … …  
    1111        const [password, setPassword] = useState("");
    1212        const [fullname, setFullname] = useState("");
     13        const [userType, setUserType] = useState<UserRegisterType[]>([]);
    1314        const [email, setEmail] = useState("");
    1415        const [profilePhotoFile, setProfilePhotoFile] = useState<File | null>(null);
    … …  
    4344                }
    4445
    45                 if (username === "" || password === "" || fullname === "" || email === "") {
     46                if (
     47                        username === "" ||
     48                        password === "" ||
     49                        fullname === "" ||
     50                        email === "" ||
     51                        userType.length === 0
     52                ) {
    4653                        setError("Please fill in all required fields.");
    4754                        return;
    4855                }
    49 
    5056                if (profilePhotoFile && !profilePhotoFile.type.startsWith("image/")) {
    5157                        alert("Only images allowed");
    … …  
    5864                formData.append("email", email);
    5965                formData.append("password", password);
     66                userType.forEach((type) => formData.append("userType", type));
    6067
    6168                try {
    … …  
    7784                <div className="flex flex-col items-center justify-center min-h-[90vh] bg-gray-100">
    7885                        <h2 className="text-2xl mb-4">Register</h2>
    79                         <form className="bg-white p-6 rounded shadow-md w-full max-w-md">
     86                        <form
     87                                className="bg-white p-6 rounded shadow-md w-full max-w-md"
     88                                onSubmit={handleRegister}
     89                        >
    8090                                {error && <p className="text-red-500 mb-4">{error}</p>}
    8191                                <div className="mb-4">
    … …  
    126136                                                onChange={(e) => setEmail(e.target.value)}
    127137                                        />
     138                                </div>
     139                                <div className="mb-4">
     140                                        <label className="block text-gray-700 mb-2" htmlFor="userType">
     141                                                User Type
     142                                        </label>
     143                                        <input
     144                                                type="checkbox"
     145                                                id="artist"
     146                                                value="ARTIST"
     147                                                onChange={(e) => {
     148                                                        if (e.target.checked) {
     149                                                                setUserType((prev) => [...prev, "ARTIST"]);
     150                                                        } else {
     151                                                                setUserType((prev) => prev.filter((type) => type !== "ARTIST"));
     152                                                        }
     153                                                }}
     154                                        />
     155                                        <label htmlFor="artist" className="ml-2 mr-4">
     156                                                Artist
     157                                        </label>
     158                                        <input
     159                                                type="checkbox"
     160                                                id="listener"
     161                                                value="LISTENER"
     162                                                onChange={(e) => {
     163                                                        if (e.target.checked) {
     164                                                                setUserType((prev) => [...prev, "LISTENER"]);
     165                                                        } else {
     166                                                                setUserType((prev) =>
     167                                                                        prev.filter((type) => type !== "LISTENER"),
     168                                                                );
     169                                                        }
     170                                                }}
     171                                        />
     172                                        <label htmlFor="listener" className="ml-2">
     173                                                Listener
     174                                        </label>
    128175                                </div>
    129176                                <div className="mb-4">
Note: See TracChangeset for help on using the changeset viewer.