fix password eye icon and minor fix in dark mode (#1261)

2025-10-27 11:41:09 -04:00 · 2023-08-22 17:56:23 +05:30
parent 45aaee72d8
commit d1ab4a8021
18 changed files with 79 additions and 165 deletions
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@ -113,7 +113,7 @@
            </span>
          </template>
          <BaseDropdownItem @click="removeMultipleCustomers">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@ -164,7 +164,7 @@
          </template>

          <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@ -135,7 +135,7 @@
            v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
            @click="removeMultipleExpenses"
          >
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/admin/views/installation/Installation.vue
+++ b/resources/scripts/admin/views/installation/Installation.vue
@ -1,6 +1,6 @@
 <template>
  <div class="flex flex-col items-center justify-between w-full pt-10">
-      <LightDarkButton class="absolute z-10 top-2 right-2"/>
+    <LightDarkButton class="absolute z-10 top-2 right-2"/>
    <img
      id="logo-crater"
      src="/img/crater-logo.png"
--- a/resources/scripts/admin/views/installation/Step6AccountSettings.vue
+++ b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
@ -68,13 +68,15 @@
            @input="v$.userForm.password.$touch()"
          >
            <template #right>
-              <EyeOffIcon
+              <BaseIcon
                v-if="isShowPassword"
+                name="EyeOffIcon"
                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                @click="isShowPassword = !isShowPassword"
              />
-              <EyeIcon
+              <BaseIcon
                v-else
+                name="EyeIcon"
                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                @click="isShowPassword = !isShowPassword"
              />
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@ -178,7 +178,7 @@
          </template>

          <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@ -117,7 +117,7 @@
            </span>
          </template>
          <BaseDropdownItem @click="removeMultipleItems">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@ -116,7 +116,7 @@
            </span>
          </template>
          <BaseDropdownItem @click="removeMultiplePayments">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@ -151,12 +151,12 @@
              "
            >
              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
            </span>
          </template>

          <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
@ -51,27 +51,12 @@
        <BaseInput
          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
          :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
          name="mailgun_secret"
          autocomplete="off"
          :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
          @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
+        />
      </BaseInputGroup>

      <BaseInputGroup
@ -184,15 +169,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()

-let isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
  return {
    mailgunConfig: {
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
@ -146,27 +146,12 @@
        <BaseInput
          v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
          :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
          name="mail_ses_secret"
          autocomplete="off"
          :invalid="v$.sesConfig.mail_ses_secret.$error"
          @input="v$.sesConfig.mail_ses_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
+        />
      </BaseInputGroup>
    </BaseInputGrid>

@ -223,7 +208,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()

-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])

 const rules = computed(() => {
@ -264,13 +248,6 @@ const v$ = useVuelidate(
  computed(() => mailDriverStore)
 )

-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 onMounted(() => {
  for (const key in mailDriverStore.sesConfig) {
    if (props.configData.hasOwnProperty(key)) {
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
@ -58,24 +58,9 @@
        <BaseInput
          v-model.trim="mailDriverStore.smtpConfig.mail_password"
          :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
          name="password"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
+        />
      </BaseInputGroup>

      <BaseInputGroup
@ -209,17 +194,8 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])

 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
-
-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])

-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
  return {
    smtpConfig: {
--- a/resources/scripts/admin/views/users/Index.vue
+++ b/resources/scripts/admin/views/users/Index.vue
@ -118,11 +118,11 @@
              "
            >
              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
            </span>
          </template>
          <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@ -93,6 +93,7 @@
                    rounded-full
                    text-primary-500
                    dark:bg-gray-600
+                    dark:text-primary-400
                  "
                >
                  {{ initGenerator(customer.name) }}
@ -141,6 +142,7 @@
                    bg-gray-200
                    rounded-full
                    text-primary-500
+                    dark:text-primary-400
                    dark:bg-gray-600
                  "
                >
--- a/resources/scripts/components/base/BaseInput.vue
+++ b/resources/scripts/components/base/BaseInput.vue
@ -90,7 +90,7 @@

    <input
      v-bind="$attrs"
-      :type="type"
+      :type="getType"
      :value="modelValue"
      :disabled="disabled"
      :class="[
@ -144,6 +144,44 @@
    >
      <slot name="right" :class="iconRightClass" />
    </div>
+    <div
+      v-if="loading && loadingPosition === 'right'" class="
+        absolute
+        inset-y-0
+        right-0
+        flex
+        items-center
+        pr-3
+        pointer-events-none
+      "
+    >
+      <svg
+        class="animate-spin !text-primary-500" :class="[iconRightClass]" xmlns="http://www.w3.org/2000/svg"
+        fill="none" viewBox="0 0 24 24"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path
+          class="opacity-75" fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+
+    <div v-if="hasRightIconSlot" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <slot name="right" :class="iconRightClass" />
+    </div>
+
+    <div v-if="type == 'password'" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <a
+        v-if="isShowPassword" href="#" class="block" data-cy="eye" tabindex="-1"
+        @click.prevent="isShowPassword = !isShowPassword"
+      >
+        <BaseIcon name="EyeOffIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+      <a v-else href="#" class="block" data-cy="eye" tabindex="-1" @click.prevent="isShowPassword = !isShowPassword">
+        <BaseIcon name="EyeIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+    </div>
  </div>
 </template>

@ -219,6 +257,15 @@ const slots = useSlots()

 const emit = defineEmits(['update:modelValue'])

+const isShowPassword = ref(false)
+
+const getType = computed(() => {
+  if (props.type === 'password')
+    return isShowPassword.value ? 'text' : 'password'
+
+  return props.type
+})
+
 const hasLeftIconSlot = computed(() => {
  return !!slots.left || (props.loading && props.loadingPosition === 'left')
 })
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@ -32,25 +32,10 @@
    >
      <BaseInput
        v-model="authStore.loginData.password"
-        :type="getInputType"
        :invalid="v$.loginData.password.$error"
+        type="password"
        @input="v$.loginData.password.$touch()"
-      >
-        <template #right>
-          <BaseIcon
-            v-if="isShowPassword"
-            name="EyeOffIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-          <BaseIcon
-            v-else
-            name="EyeIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </BaseInput>
+      />
    </BaseInputGroup>
    <div class="flex items-center justify-between">
      <router-link
@ -91,14 +76,6 @@ const authStore = useAuthStore()
 const { t } = useI18n()

 let isLoading = ref(false)
-const isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})

 const rules = computed(() => {
  return {
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ b/resources/scripts/customer/views/auth/ResetPassword.vue
@ -23,23 +23,11 @@
    >
      <BaseInput
        v-model="loginData.password"
-        :type="isShowPassword ? 'text' : 'password'"
+        type="password"
        name="password"
        :invalid="v$.password.$error"
        @input="v$.password.$touch()"
-      >
-        <template #right>
-          <EyeOffIcon
-            v-if="isShowPassword"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-          <EyeIcon
-            v-else
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          /> </template
-      ></BaseInput>
+      />
    </BaseInputGroup>

    <BaseInputGroup
@ -93,7 +81,6 @@ const loginData = reactive({

 const globalStore = useGlobalStore()

-let isShowPassword = ref(false)
 let isLoading = ref(false)

 const rules = computed(() => {
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ b/resources/scripts/customer/views/settings/CustomerSettings.vue
@ -66,24 +66,10 @@
        >
          <BaseInput
            v-model="userStore.userForm.password"
-            :type="isShowPassword ? 'text' : 'password'"
+            type="password"
            :invalid="v$.userForm.password.$error"
            @input="v$.userForm.password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              /> </template
-          ></BaseInput>
+          />
        </BaseInputGroup>

        <BaseInputGroup
@ -95,24 +81,10 @@
        >
          <BaseInput
            v-model="userStore.userForm.confirm_password"
-            :type="isShowConfirmPassword ? 'text' : 'password'"
+            type="password"
            :invalid="v$.userForm.confirm_password.$error"
            @input="v$.userForm.confirm_password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowConfirmPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              /> </template
-          ></BaseInput>
+          />
        </BaseInputGroup>
      </div>

@ -151,8 +123,6 @@ const { t, tm } = useI18n()
 let imgFiles = ref([])
 let isSaving = ref(false)
 let avatarFileBlob = ref(null)
-let isShowPassword = ref(false)
-let isShowConfirmPassword = ref(false)
 const isCustomerAvatarRemoved = ref(false)

 if (userStore.userForm.avatar) {