feat: ✨ added password field

nimbus-town · Dec 3, 2024 · 44f480c · 44f480c
1 parent 2c19a2d
commit 44f480c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 19 deletions.
diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 const input = ref<HTMLInputElement | undefined>()
-
-const { busy, error, displayError, handle, signIn } = useSignIn(input)
+const { busy, error, displayError, handle, signIn, user_password } = useSignIn(input)
 
 async function handleInput() {
-  const input = handle.value.trim()
-
-  if (input.length)
+  const user_handle = handle.value.trim()
+  const user_password = handle.value.trim()
+  if (user_handle.length && user_password.length)
     displayError.value = false
 }
 
@@ -18,15 +17,12 @@ onMounted(async () => {
 <template>
   <form text-center justify-center items-center max-w-150 py6 flex="~ col gap-3" @submit.prevent="signIn">
     <div flex="~ center" items-end mb2 gap-x-2>
-      <img :src="`/${''}logo.svg`" w-12 h-12 mxa height="48" width="48" :alt="$t('app_logo')" class="rtl-flip">
+      <NavLogo />
       <div text-3xl>
         {{ $t('action.sign_in') }}
       </div>
     </div>
-    <div>
-      {{ $t('user.handle_label') }}
-    </div>
-    <div :class="error ? 'animate animate-shake-x animate-delay-100' : null">
+    <div flex flex-col gap-5 pt-5 :class="error ? 'animate animate-shake-x animate-delay-100' : null">
       <div
         dir="ltr"
         flex bg-gray:10 px4 py2 mxa rounded
@@ -39,6 +35,7 @@ onMounted(async () => {
           ref="input"
           v-model="handle"
           autocapitalize="off"
+          :placeholder="$t('user.handle_label')"
           inputmode="url"
           outline-none bg-transparent w-full max-w-50
           spellcheck="false"
@@ -47,15 +44,39 @@ onMounted(async () => {
           @input="handleInput"
         >
       </div>
-      <div min-h-4>
-        <Transition css enter-active-class="animate animate-fade-in">
-          <p v-if="displayError" role="alert" p-0 m-0 text-xs text-red-600 dark:text-red-400>
-            {{ $t('error.sign_in_error') }}
-          </p>
-        </Transition>
+      <div
+        dir="ltr"
+        flex bg-gray:10 px4 py2 mxa rounded
+        border="~ base" items-center font-mono
+        focus:outline-none focus:ring="2 primary inset"
+        relative
+        :class="displayError ? 'border-red-600 dark:border-red-400' : null"
+      >
+        <input
+          ref="input"
+          v-model="user_password"
+          autocapitalize="off"
+          inputmode="text"
+          type="password"
+          :placeholder="$t('user.user_password_label')"
+
+          outline-none bg-transparent w-full max-w-50
+          spellcheck="false"
+          autocorrect="off"
+          autocomplete="off"
+          @input="handleInput"
+        >
       </div>
     </div>
-    <button flex="~ row" gap-x-2 items-center btn-solid mt2 :disabled="!handle || busy">
+
+    <div min-h-4>
+      <Transition v-if="error" css enter-active-class="animate animate-fade-in">
+        <p v-if="displayError" role="alert" p-0 m-0 text-xs text-red-600 dark:text-red-400>
+          {{ $t('error.sign_in_error') }}
+        </p>
+      </Transition>
+    </div>
+    <button flex="~ row" gap-x-2 items-center btn-solid mt2 :disabled="!handle || !user_password || busy">
       <span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
         <span block i-ri:loader-2-fill aria-hidden="true" />
       </span>

diff --git a/composables/sign-in.ts b/composables/sign-in.ts
@@ -6,6 +6,7 @@ export function useSignIn(_input?: Ref<HTMLInputElement | undefined>) {
   const busy = ref(false)
   const error = ref(false)
   const handle = ref('')
+  const user_password = ref('')
   const displayError = ref(false)
 
   async function signIn() {
@@ -32,5 +33,5 @@ export function useSignIn(_input?: Ref<HTMLInputElement | undefined>) {
   }
 
   // TODO: remove singleInstanceServer
-  return { busy, displayError, error, handle, signIn, singleInstanceServer: false }
+  return { busy, displayError, error, handle, signIn, singleInstanceServer: false, user_password }
 }
diff --git a/locales/en.json b/locales/en.json
@@ -750,7 +750,8 @@
     "sign_out_account": "Sign out {0}",
     "single_instance_sign_in_desc": "Sign in to follow profiles or hashtags, favorite, share and reply to posts.",
     "tip_no_account": "If you don't have a Bluesky account yet, {0}.",
-    "tip_register_account": "pick your server and register one"
+    "tip_register_account": "pick your server and register one",
+    "user_password_label": "Password"
   },
   "visibility": {
     "direct": "Direct",

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -8,6 +8,7 @@ import { pwa } from './config/pwa'
 const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
+  devtools: true,
   compatibilityDate: '2024-09-11',
   typescript: {
     tsConfig: {