better login code behavior

ur welcome @Blocksnmore
Wave-Studio · Jan 19, 2024 · 08f18fc · 08f18fc
1 parent 33e3b25
commit 08f18fc
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/islands/loginForm.tsx b/islands/loginForm.tsx
@@ -8,7 +8,7 @@ const LoginForm = ({ attending }: { attending: boolean }) => {
   const [email, setEmail] = useState("");
   const [code, setCode] = useState("");
   const [error, setError] = useState<string>();
-  const [stage, setStage] = useState(0);
+  const [stage, setStage] = useState(1);
   const [loading, setLoading] = useState(false);
   const [updateState, setUpdateState] = useState(false);
 
@@ -113,7 +113,7 @@ const LoginForm = ({ attending }: { attending: boolean }) => {
           <p className={`mb-2 text-sm text-red-500 ${!error && "invisible"} `}>
             Error: {error}
           </p>
-          <CTA btnType="cta" type="submit">
+          <CTA btnType="cta" type="submit" disabled={loading}>
             Confirm Email
           </CTA>
           <p className="mt-2 text-center text-sm cursor-pointer text-gray-500">
@@ -150,10 +150,10 @@ const LoginForm = ({ attending }: { attending: boolean }) => {
                   );
                 })}
               </div>
-              <div class="h-0 overflow-hidden">
+              <div class="absolute">
                 <input
                   type="number"
-                  class={`p-2 -translate-y-10 w-64 [@media(min-width:300px)]:w-72  `}
+                  class={`p-2 w-64 [@media(min-width:300px)]:w-72 translate-y-3 hideInput`}
                   name="code"
                   autoComplete="off"
                   id="test"
@@ -164,15 +164,16 @@ const LoginForm = ({ attending }: { attending: boolean }) => {
                   onBlur={() => setFocused(false)}
                   onFocus={() => setFocused(true)}
                 />
-                {updateState ? "s" : "t"}
+                <span class="hidden">{updateState ? "s" : "t"}</span>
+
               </div>
             </label>
             <p
               className={`mb-2 text-sm text-red-500 ${!error && "invisible"} `}
             >
               Error: {error}
             </p>
-            <CTA btnType="cta" disabled={code.length != 6} type="submit">
+            <CTA btnType="cta" disabled={(code.length != 6) || loading} type="submit">
               Login
             </CTA>
           </form>

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -43,7 +43,7 @@ export default defineRoute(async (req, ctx) => {
         </div>
         <div className="my-auto flex flex-col pb-12">
           <div className="rounded-md bg-theme-normal/10 border border-theme-normal/50 w-max px-2 mx-auto mb-3 font-medium text-sm text-theme-normal">
-            Closed Alpha
+            Coming Soon
           </div>
           <a href={loggedIn ? "/events/organizing" : "/login"}>
             <CTA btnType="cta">I'm organizing</CTA>

diff --git a/static/styles.css b/static/styles.css
@@ -28,11 +28,28 @@ textarea {
   @apply p-2 border rounded-md border-gray-300;
 }
 
-.nostyle {
+.hideInput {
   @apply focus:outline-none;
-  /* caret-color: transparent; */
+  caret-color: transparent;
+  background-color: transparent;
+  border: none;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  color: transparent
 }
 
+.hideInput::-webkit-outer-spin-button,
+.hideInput::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.hideInput::selection {
+  color: transparent;
+  background-color: transparent
+}
+
+
 .label-text {
   @apply font-medium text-sm mb-0.5 capitalize;
 }