tsk-2: Login (#4)

Closes #2 Reviewed-on: phoenix/textsender#4 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
2025-12-13 22:39:44 +00:00
parent 8f82bad099
commit ef4952b8cb
6 changed files with 321 additions and 7 deletions
@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import './Login.css';
+import { AUTH_API_BASE_URL } from '../constants/api';
+import { DATA_KEY_ACCESS_TOKEN } from '../constants/app';
+
+// function Login() {
+const Login = () => {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    // Clear error for this field when user starts typing
+    if (errors[name]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: '',
+      }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!formData.username.trim()) {
+      newErrors.username = 'Username is required';
+    }
+
+    if (!formData.password) {
+      newErrors.password = 'Password is required';
+    } else if (formData.password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+
+    return newErrors;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitError('');
+
+    const formErrors = validateForm();
+    if (Object.keys(formErrors).length > 0) {
+      setErrors(formErrors);
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const reqBod = {
+        username: formData.username,
+        password: formData.password,
+      };
+      const reponse = await fetch(`${AUTH_API_BASE_URL}/api/v1/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(reqBod),
+      });
+
+      if (reponse.ok) {
+        const response = await reponse.json();
+        console.log(`Result: ${response.message}`);
+        const loginResult = response.data[0];
+        const token = loginResult.access_token;
+        console.log(token);
+        localStorage.setItem(DATA_KEY_ACCESS_TOKEN, token);
+        alert(`Login successful! Welcome, ${formData.username}`);
+      } else {
+        console.error('Error logging in');
+      }
+
+      // Reset form
+      setFormData({ username: '', password: '' });
+      setErrors({});
+    } catch (error) {
+      setSubmitError('Login failed. Please try again.');
+      console.error('Login error:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-card">
+        <h1 className="login-title">Login</h1>
+
+        {submitError && <div className="submit-error">{submitError}</div>}
+
+        <form className="login-form" onSubmit={handleSubmit} noValidate>
+          <div className="form-group">
+            <label htmlFor="username" className="form-label">
+              Username
+            </label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              value={formData.username}
+              onChange={handleChange}
+              className={`form-input ${errors.username ? 'error' : ''}`}
+              placeholder="Enter your username"
+              disabled={isSubmitting}
+            />
+            {errors.username && (
+              <span className="error-message">{errors.username}</span>
+            )}
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password" className="form-label">
+              Password
+            </label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              className={`form-input ${errors.password ? 'error' : ''}`}
+              placeholder="Enter your password"
+              disabled={isSubmitting}
+            />
+            {errors.password && (
+              <span className="error-message">{errors.password}</span>
+            )}
+            <span className="form-hint">Must be at least 6 characters</span>
+          </div>
+
+          <button type="submit" className="submit-btn" disabled={isSubmitting}>
+            {isSubmitting ? 'Logging in...' : 'Login'}
+          </button>
+        </form>
+
+        <div className="register-link">
+          <p>
+            Don't have an account?{' '}
+            <a href="register" className="link">
+              Register here
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;