From c1deafe1023b9269e5c7eabb3107cf1348348b10 Mon Sep 17 00:00:00 2001
From: ZOI-dayo <zoizoi.dayo@gmail.com>
Date: Mon, 18 Nov 2024 17:14:58 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=91=E3=82=B9=E3=83=AF=E3=83=BC=E3=83=89?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=AB=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controls/Textbox/BasicTextbox.vue         | 36 ++++++++++++-------
 .../Controls/Textbox/DecoratedTextbox.vue     |  2 ++
 src/components/MaterialIcon.vue               |  2 ++
 tailwind.config.js                            |  4 ++-
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/Controls/Textbox/BasicTextbox.vue b/src/components/Controls/Textbox/BasicTextbox.vue
index 2e791e2..1dbd482 100644
--- a/src/components/Controls/Textbox/BasicTextbox.vue
+++ b/src/components/Controls/Textbox/BasicTextbox.vue
@@ -1,28 +1,40 @@
 <script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import { ref } from 'vue'
+
 const {
   disabled = false,
   error = false,
-  placeholder = ''
+  placeholder = '',
+  isPassword = false
 } = defineProps<{
   disabled?: boolean
   error?: boolean
   placeholder?: string
+  isPassword?: boolean
 }>()
 const value = defineModel<string>('value')
+const passwordShown = ref(false)
 </script>
 
 <template>
-  <input
-    v-model="value"
-    :class="[
-      { 'border-border-secondary outline-text-primary focus:border-text-primary': !error },
-      { 'border-status-error outline outline-1 outline-status-error': error },
-      'fontstyle-ui-body max-w-full rounded border bg-background-primary px-4 py-1 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
-    ]"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    type="text"
-  />
+  <div class="relative inline-block">
+    <input
+      v-model="value"
+      :class="[
+        { 'border-border-secondary outline-text-primary focus:border-text-primary': !error },
+        { 'border-status-error outline outline-1 outline-status-error': error },
+        { 'pr-11.5': isPassword },
+        'fontstyle-ui-body max-w-full rounded border bg-background-primary px-4 py-1 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+      ]"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :type="isPassword && !passwordShown ? 'password' : 'text'"
+    />
+    <span v-if="isPassword" class="absolute right-4 top-1.75 select-none" @click="() => passwordShown = !passwordShown">
+      <MaterialIcon :icon="passwordShown ? 'visibility_off' : 'visibility'" size="1.25rem"/>
+    </span>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/Controls/Textbox/DecoratedTextbox.vue b/src/components/Controls/Textbox/DecoratedTextbox.vue
index b0f1f62..c76da9c 100644
--- a/src/components/Controls/Textbox/DecoratedTextbox.vue
+++ b/src/components/Controls/Textbox/DecoratedTextbox.vue
@@ -6,6 +6,7 @@ import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
 const { errorMessage = '', label = '' } = defineProps<{
   disabled?: boolean
   errorMessage?: string
+  isPassword?: boolean
   isRequired?: boolean
   label?: string
   placeholder?: string
@@ -22,6 +23,7 @@ const value = defineModel<string>('value')
         class="w-full"
         :disabled
         :error="errorMessage != ''"
+        :is-password="isPassword"
         :placeholder="placeholder"
       />
     </div>
diff --git a/src/components/MaterialIcon.vue b/src/components/MaterialIcon.vue
index a69c27c..5b3bb71 100644
--- a/src/components/MaterialIcon.vue
+++ b/src/components/MaterialIcon.vue
@@ -14,6 +14,8 @@ export type Icon =
   | 'open_in_new'
   | 'person'
   | 'settings'
+  | 'visibility'
+  | 'visibility_off'
 const { size = '1.5rem', isFilled = false } = defineProps<{
   icon: Icon
   size?: string
diff --git a/tailwind.config.js b/tailwind.config.js
index 917eb88..a3226d3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,9 +25,11 @@ export default {
     },
     extend: {
       spacing: {
-        '7.5': '1.875rem',
         '1.625': '0.40625rem',
+        '1.75': '0.4375rem',
         '4.5': '1.125rem',
+        '7.5': '1.875rem',
+        '11.5': '2.875rem',
         '27': '6.75rem',
         '50': '12.5rem',
         '62.5': '15.625rem'