Merge pull request #48 from sunnybraille/request

Feat: UX improvement
sunnybraille · Mar 10, 2024 · 1b8f091 · 1b8f091
2 parents 697b649 + 7756f76
commit 1b8f091
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 60 deletions.
diff --git a/my-app/src/components/AuthButton.tsx b/my-app/src/components/AuthButton.tsx
@@ -37,10 +37,22 @@ const AuthButtons: React.FC = () => {
       ) : (
         <>
           <Link to="/login">
-            <button>{language === "ko" ? "로그인하기" : "Login"}</button>
+            <button
+              className={`${textClassName} ${
+                isHighContrast ? "text-yellow-300" : "text-neutral-800"
+              }`}
+            >
+              {language === "ko" ? "로그인하기" : "Login"}
+            </button>
           </Link>
           <Link to="/signup">
-            <button>{language === "ko" ? "회원가입" : "Sign Up"}</button>
+            <button
+              className={`${textClassName} ${
+                isHighContrast ? "text-yellow-300" : "text-neutral-800"
+              }`}
+            >
+              {language === "ko" ? "회원가입" : "Sign Up"}
+            </button>
           </Link>
         </>
       )}

diff --git a/my-app/src/components/LoginPage.tsx b/my-app/src/components/LoginPage.tsx
@@ -2,17 +2,21 @@ import React, { useState } from "react";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "./AuthContext";
+import { useHighContrast } from "./HighContrastMode";
 
 const LoginPage: React.FC = () => {
   const [loginId, setLoginId] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [error, setError] = useState<string>("");
+  const { isHighContrast } = useHighContrast();
+
   const navigate = useNavigate();
   const { setLoggedIn } = useAuth();
 
   const handleLogin = async () => {
     try {
-      const response = await axios.post("/login", {
+      const apiUrl = process.env.REACT_APP_API_URL;
+      const response = await axios.post(`${apiUrl}/login`, {
         loginId,
         password,
       });
@@ -39,21 +43,37 @@ const LoginPage: React.FC = () => {
   };
 
   return (
-    <div>
-      <input
-        type="text"
-        value={loginId}
-        onChange={(e) => setLoginId(e.target.value)}
-        placeholder="Login ID"
-      />
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        placeholder="Password"
-      />
-      <button onClick={handleLogin}>Login</button>
-      {error && <p>{error}</p>}
+    <div className="flex flex-col items-center justify-center min-h-screen bg-stone-200">
+      <form className="p-8" onSubmit={handleLogin}>
+        <input
+          className="w-full p-2 mb-4 border rounded"
+          type="text"
+          value={loginId}
+          onChange={(e) => setLoginId(e.target.value)}
+          placeholder="Login ID"
+          autoComplete="username"
+          required
+        />
+        <input
+          className="w-full p-2 mb-4 border rounded"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+          autoComplete="username"
+          required
+        />
+        <button
+          className={`${
+            isHighContrast
+              ? "bg-yellow-300 hover:bg-yellow-600"
+              : "bg-[#FF6A3F] hover:bg-[#E6552F]"
+          } w-full p-2`}
+        >
+          Login
+        </button>
+        {error && <p>{error}</p>}
+      </form>
     </div>
   );
 };

diff --git a/my-app/src/components/Messages.tsx b/my-app/src/components/Messages.tsx
@@ -1,22 +1,27 @@
 interface Messages {
-    [key: string]: {
-      fileSelectAlert: string;
-      uploadSuccess: (name: string) => string;
-      uploadFail: string;
-    };
-  }
-
-  const messages: Messages = {
-    ko: {
-      fileSelectAlert: "파일을 선택해주세요.",
-      uploadSuccess: (name: string) => `${name} 파일 업로드가 완료되었습니다. 변환을 시작하시겠습니까?`,
-      uploadFail: "파일 업로드에 실패했습니다. 다시 시도해주세요.",
-    },
-    en: {
-      fileSelectAlert: "Please select a file.",
-      uploadSuccess: (id: string) => `File ${id} has been uploaded. Would you like to start the conversion?`,
-      uploadFail: "File upload failed. Please try again.",
-    },
+  [key: string]: {
+    fileSelectAlert: string;
+    uploadSuccess: (name: string) => string;
+    uploadFail: string;
+    AuthFail: string;
   };
-
-  export default messages;
+}
+
+const messages: Messages = {
+  ko: {
+    fileSelectAlert: "파일을 선택해주세요.",
+    uploadSuccess: (name: string) =>
+      `${name} 파일 업로드가 완료되었습니다. 변환을 시작하시겠습니까?`,
+    uploadFail: "파일 업로드에 실패했습니다. 다시 시도해주세요.",
+    AuthFail: "로그인 후 이용해 주세요.",
+  },
+  en: {
+    fileSelectAlert: "Please select a file.",
+    uploadSuccess: (id: string) =>
+      `File ${id} has been uploaded. Would you like to start the conversion?`,
+    uploadFail: "File upload failed. Please try again.",
+    AuthFail: "Please log in to use this service.",
+  },
+};
+
+export default messages;
diff --git a/my-app/src/components/SignUpPage.tsx b/my-app/src/components/SignUpPage.tsx
@@ -1,38 +1,95 @@
-import React, { useState } from "react";
+import React, { useState, FormEvent } from "react";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { useHighContrast } from "./HighContrastMode";
+import { useLanguage } from "../LanguageContext";
 
 const SignUpPage: React.FC = () => {
   const [loginId, setLoginId] = useState<string>("");
   const [password, setPassword] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const navigate = useNavigate();
+  const { isHighContrast } = useHighContrast();
+  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
+  const { language } = useLanguage();
+  const textClassName = language === "ko" ? "font-kor" : "font-eng";
+
+  const validateForm = () => {
+    return loginId.trim() && password.trim();
+  };
+
+  const handleSignUp = async (event: FormEvent) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+
+    if (!validateForm()) {
+      setError(
+        language === "ko"
+          ? "필수 항목을 입력하지 않았습니다."
+          : "Please fill in all required fields."
+      );
+      return;
+    }
 
-  const handleSignUp = async () => {
     try {
-      const response = await axios.post("/join", {
+      const apiUrl = process.env.REACT_APP_API_URL;
+
+      const response = await axios.post(`${apiUrl}/join`, {
         loginId,
         password,
       });
-      if (response.status === 200) {
+      if (response.status === 201) {
+        navigate("/");
       }
     } catch (error) {
+      if (axios.isAxiosError(error)) {
+        if (error.response?.status === 500) {
+          setError("A server error occurred. Please try again later.");
+        } else {
+          setError("An unexpected error occurred. Please try again.");
+        }
+      }
       console.error("Error during sign up:", error);
     }
   };
 
   return (
-    <div>
-      <input
-        type="text"
-        value={loginId}
-        onChange={(e) => setLoginId(e.target.value)}
-        placeholder="Login ID"
-      />
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        placeholder="Password"
-      />
-      <button onClick={handleSignUp}>Sign Up</button>
+    <div className="flex flex-col items-center justify-center min-h-screen bg-stone-200">
+      <form className="p-8" onSubmit={handleSignUp}>
+        <input
+          className={`${textClassName} w-full p-2 mb-4 border ${
+            isSubmitted && !loginId.trim() ? "border-red-500" : "rounded"
+          }`}
+          type="text"
+          value={loginId}
+          onChange={(e) => setLoginId(e.target.value)}
+          placeholder="Login ID"
+          autoComplete="username"
+          required
+        />
+        <input
+          className={`w-full p-2 mb-4 border ${textClassName} ${
+            isSubmitted && !password.trim() ? "border-red-500" : "rounded"
+          }`}
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+          autoComplete="current-password"
+          required
+        />
+        <button
+          type="submit"
+          className={`${textClassName} ${
+            isHighContrast
+              ? "bg-yellow-300 hover:bg-yellow-600"
+              : "bg-[#FF6A3F] hover:bg-[#E6552F]"
+          } w-full p-2`}
+        >
+          Sign Up
+        </button>
+        {error && <p className="mt-4 text-red-500">{error}</p>}
+      </form>
     </div>
   );
 };

diff --git a/my-app/src/components/UploadFileButton.tsx b/my-app/src/components/UploadFileButton.tsx
@@ -4,7 +4,7 @@ import TranslationProgress from "./TranslationProgress";
 import { useLanguage } from "../LanguageContext";
 import messages from "./Messages";
 import { useHighContrast } from "../components/HighContrastMode";
-
+import { useNavigate } from "react-router-dom";
 
 interface UploadFileButtonState {
   title: string;
@@ -20,9 +20,10 @@ const UploadFileButton: React.FC = () => {
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
+  const navigate = useNavigate();
 
-
-  const { fileSelectAlert, uploadSuccess, uploadFail } = messages[language];
+  const { fileSelectAlert, uploadSuccess, uploadFail, AuthFail } =
+    messages[language];
   const [state, setState] = useState<UploadFileButtonState>({
     title: "",
     content: "",
@@ -82,6 +83,9 @@ const UploadFileButton: React.FC = () => {
         if (confirmConversion && translationsId) {
           startConversion(translationsId);
         }
+      } else if (response.status === 401) {
+        alert(AuthFail);
+        navigate("/login");
       }
     } catch (error) {
       alert(uploadFail);
@@ -154,7 +158,7 @@ const UploadFileButton: React.FC = () => {
           </button>
         </form>
       </div>
-      
+
       <div>
         {translationsId && (
           <TranslationProgress translationsId={translationsId} />