Requested Changes

backend/models/userModel.js

@@ -21,8 +21,7 @@ const userSchema = new Schema({
         minlength: 6
     },
     userRole:{
-        type: String,
-        required: true
+        type: String, default: 'Developer'
     },
     startTime:{
         type:String, default: ''
@@ -43,7 +42,7 @@ const userSchema = new Schema({
 
 userSchema.statics.signup = async function(name, email, password, userRole, startTime, endTime) {
 
-    if (!name || !email || !password || !userRole) {
+    if (!name || !email || !password) {
         throw Error('All fields must be filled')
       }
       if (!validator.isEmail(email)) {

frontend/src/components/UserDetails.jsx

@@ -1,4 +1,15 @@
+import useChangeRole from "../hooks/useChangeRole";
+
 function UserDetails({ user }) {
+  const { setUserRole, error, isLoading } = useChangeRole();
+  const handleRoleChange = async (e) => {
+    e.preventDefault();
+    const user_id = user._id // eslint-disable-line
+    const userRole = user.userRole === 'Developer' ? 'Admin' : 'Developer';
+    await setUserRole(user_id, userRole);
+    alert(`Role of ${user.name} has been changed to ${userRole}`);// eslint-disable-line
+  };
+
   return (
     <div className='user-details'>
       <h4>{user.name}</h4>
@@ -25,6 +36,10 @@ function UserDetails({ user }) {
         <strong> Last Message :</strong>
         {user.lastMessage}
       </p>
+      <form onSubmit={handleRoleChange}>
+        <button type='submit' disabled={isLoading}>Change Role</button>
+        {error && <div className='error'>{error}</div>}
+      </form>
     </div>
   );
 }

frontend/src/hooks/useChangeRole.js

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+const useChangeRole = () => {
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(null);
+
+  const setUserRole = async (user_id, userRole) => {// eslint-disable-line
+    setIsLoading(true);
+    setError(null);
+
+    const response = await fetch(`${process.env.REACT_APP_BACKEND_URL}/user/`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ user_id, userRole }),// eslint-disable-line
+    });
+    const json = await response.json();
+
+    if (!response.ok) {
+      setIsLoading(false);
+      setError(json.error);
+    }
+    if (response.ok) {
+      setIsLoading(false);
+    }
+  };
+
+  return { setUserRole, isLoading, error };
+};
+
+export default useChangeRole;

frontend/src/pages/Signup.jsx

@@ -24,11 +24,6 @@ function Signup() {
       <input type='email' onChange={(e) => setEmail(e.target.value)} value={email} />
       <label>Password:</label>
       <input type='password' onChange={(e) => setPassword(e.target.value)} value={password} />
-      <label>User Role:</label>
-      <select style={{ width: "100%" }} onChange={(e) => setUserRole(e.target.value)} value={userRole}>
-        <option value='Admin'>Admin</option>
-        <option value='Developer'>Developer</option>
-      </select>
 
       <button disabled={isLoading} type='submit'>
         Sign up