Refine login error code handling and description

Author: SelwynAng

frontend/app/auth/auth-context.tsx

@@ -75,7 +75,16 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
     );
 
     if (!response.ok) {
-      throw new Error("Not OK");
+      switch (response.status) {
+        case 400:
+          throw new Error("Email and/or password is missing.");
+        case 401:
+          throw new Error("Invalid email or password.");
+        case 500:
+          throw new Error("Internal server error. Please try again later.");
+        default:
+          throw new Error("Unexpected error occurred.");
+      }
     }
 
     const resJson = await response.json();

frontend/components/auth/login-form.tsx

@@ -41,11 +41,26 @@ export function LoginForm() {
           description: "Login Failed.",
         });
       }
-    } catch (err) {
+    } catch (err: any) {
+      let description_text = "";
+      switch (err.message) {
+        case "Email and/or password is missing.":
+          description_text = "Please provide both email and password.";
+          break;
+        case "Invalid email or password.":
+          description_text = "Username or password is incorrect.";
+          break;
+        case "Internal server error. Please try again later.":
+          description_text = "There was an issue with the server. Please try again later.";
+          break;
+        default:
+          description_text = "An unexpected error occurred. Please try again.";
+          break;
+      }
       toast({
         title: "Error",
         variant: "destructive",
-        description: "Username or/and password provided is wrong.",
+        description: description_text,
       });
     }
   };