From 93e5514d8550985c6856dbe36237c6629a5bd0dc Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Fri, 6 Oct 2023 02:12:43 +0700
Subject: [PATCH] Refactor & Feat [Authentication page]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ref : 🚀 Client App [Tauri] (#27)
[+] refactor(auth.tsx): improve readability of resetAccessCode function
[+] feat(auth.tsx): add support for rendering input access token based on whether it's an app
---
 app/components/auth.tsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/components/auth.tsx b/app/components/auth.tsx
index 8aa862feef9..e725af020b5 100644
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -14,7 +14,10 @@ export function AuthPage() {
   const access = useAccessStore();
 
   const goHome = () => navigate(Path.Home);
-  const resetAccessCode = () => { access.updateCode(""); access.updateToken(""); }; // Reset access code to empty string
+  const resetAccessCode = () => { // refactor this for better readability of code
+    access.updateCode("");
+    access.updateToken("");
+  }; // Reset access code to empty string
   const goPrivacy = () => navigate(Path.PrivacyPage);
 
   return (
@@ -27,15 +30,27 @@ export function AuthPage() {
       <div className={styles["auth-tips"]}>{Locale.Auth.Tips}</div>
 
       {!getClientConfig()?.isApp && ( // Conditionally render the input access code based on whether it's an app
-        <input
-          className={styles["auth-input"]}
-          type="password"
-          placeholder={Locale.Auth.Input}
-          value={access.accessCode}
-          onChange={(e) => {
-            access.updateCode(e.currentTarget.value);
-          }}
-        />
+        <>
+          <input
+            className={styles["auth-input"]}
+            type="password"
+            placeholder={Locale.Auth.Input}
+            value={access.accessCode}
+            onChange={(e) => {
+              access.updateCode(e.currentTarget.value);
+            }}
+          />
+          <div className={styles["auth-tips"]}>{Locale.Auth.SubTips}</div>
+          <input
+            className={styles["auth-input"]}
+            type="password"
+            placeholder={Locale.Settings.Token.Placeholder}
+            value={access.token}
+            onChange={(e) => {
+              access.updateToken(e.currentTarget.value);
+            }}
+          />
+        </>
       )}
 
       {getClientConfig()?.isApp && ( // Conditionally render the input access token based on whether it's an app