From 4175c3344e610c46f5dc973788d829537434716f Mon Sep 17 00:00:00 2001
From: kawamataryo <ba068082@gmail.com>
Date: Mon, 21 Oct 2024 22:49:01 +0900
Subject: [PATCH] chore: add app password link

---
 src/popup.tsx | 98 +++++++++++++++++++++++++++++----------------------
 1 file changed, 56 insertions(+), 42 deletions(-)

diff --git a/src/popup.tsx b/src/popup.tsx
index d30e7cc..f7792f0 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -180,9 +180,9 @@ function IndexPopup() {
         </svg>
         Sky Follower Bridge
       </h1>
-      <form onSubmit={searchBskyUser} className="mt-2">
-        <label className="join w-full" htmlFor="identifier">
-          <span className="join-item btn btn-sm btn-active cursor-default">
+      <form onSubmit={searchBskyUser} className="mt-5">
+        <label className="w-full block" htmlFor="identifier">
+          <div className="text-sm flex gap-2 items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -197,18 +197,19 @@ function IndexPopup() {
                 d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
               />
             </svg>
-          </span>
+            Handle or Email
+          </div>
           <input
             type="text"
             name="identifier"
             placeholder="@you.bsky.social"
             value={identifier}
             onChange={(e) => setIdentifier(e.target.value)}
-            className="input input-bordered input-sm w-full max-w-xs join-item focus:outline-none"
+            className="input input-bordered input-sm w-full max-w-xs join-item focus:outline-none mt-1"
           />
         </label>
-        <label className="join mt-2 w-full" htmlFor="password">
-          <span className="join-item btn btn-sm btn-active cursor-default">
+        <label className="mt-3 w-full block" htmlFor="password">
+          <div className="text-sm flex gap-2 items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -223,54 +224,67 @@ function IndexPopup() {
                 d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
               />
             </svg>
+            <p>
+              Password
+              <br />
+            </p>
+          </div>
+          <span className="text-xs">
+            We recommend using the{" "}
+            <a
+              href="https://bsky.app/settings/app-passwords"
+              target="_blank"
+              rel="noreferrer"
+              className="link"
+            >
+              App Password.
+            </a>
           </span>
           <input
             type="password"
             name="password"
-            placeholder="your app password"
+            placeholder="abcd-1234-wxyz-7890"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            className="input input-bordered input-sm w-full max-w-xs join-item focus:outline-none"
+            className="input input-bordered input-sm w-full max-w-xs join-item focus:outline-none mt-1"
           />
         </label>
         {isShowAuthFactorTokenInput && (
-          <>
-            <label className="join mt-2 w-full" htmlFor="authFactorToken">
-              <span className="join-item btn btn-sm btn-active cursor-default">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-4 h-4"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
-                  />
-                </svg>
-              </span>
-              <input
-                type="text"
-                name="authFactorToken"
-                placeholder="2FA token"
-                value={authFactorToken}
-                onChange={(e) => setAuthFactorToken(e.target.value)}
-                className="input input-bordered input-sm w-full max-w-xs join-item focus:outline-none"
-              />
-            </label>
-            <p className="mt-2 text-warning">
-              A 2FA token has been sent to your email. Please enter the token
-              above.
-            </p>
-          </>
+          <label className="mt-4 w-full block" htmlFor="authFactorToken">
+            <div className="text-sm flex gap-2 items-center mb-1">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-4 h-4"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
+                />
+              </svg>
+              <p>Auth Factor Token</p>
+            </div>
+            <span className="mt-2">
+              A 2FA token has been sent to your email.
+            </span>
+            <input
+              type="text"
+              name="authFactorToken"
+              placeholder="1234-ABCD"
+              value={authFactorToken}
+              onChange={(e) => setAuthFactorToken(e.target.value)}
+              className="input input-bordered input-sm w-full max-w-xs focus:outline-none mt-1"
+            />
+          </label>
         )}
         <button
           type="submit"
           className={
-            "disabled:text-gray-600 dark:disabled:bg-gray-700 dark:disabled:text-gray-300 mt-3 normal-case btn btn-primary btn-sm w-full"
+            "disabled:text-gray-600 dark:disabled:bg-gray-700 dark:disabled:text-gray-300 mt-4 normal-case btn btn-primary btn-sm w-full"
           }
           disabled={isDisabled}
         >