add dark mode toggle in installation step

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 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

resources/scripts/admin/views/estimates/Index.vue

@@ -164,7 +164,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

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 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

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"

resources/scripts/admin/views/installation/Step6AccountSettings.vue

@@ -68,15 +68,13 @@
             @input="v$.userForm.password.$touch()"
           >
             <template #right>
-              <BaseIcon
+              <EyeOffIcon
                 v-if="isShowPassword"
-                name="EyeOffIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
-              <BaseIcon
+              <EyeIcon
                 v-else
-                name="EyeIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />

resources/scripts/admin/views/invoices/Index.vue

@@ -178,7 +178,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

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 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

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 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

resources/scripts/admin/views/recurring-invoices/Index.vue

@@ -151,12 +151,12 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon"/>
+              <BaseIcon name="ChevronDownIcon" class="h-5" />
             </span>
           </template>
 
           <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue

@@ -51,12 +51,27 @@
         <BaseInput
           v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
           :content-loading="isFetchingInitialData"
-          type="password"
+          :type="getInputType"
           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
@@ -169,6 +184,15 @@ 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: {

resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue

@@ -146,12 +146,27 @@
         <BaseInput
           v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
           :content-loading="isFetchingInitialData"
-          type="password"
+          :type="getInputType"
           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>
 
@@ -208,6 +223,7 @@ 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(() => {
@@ -248,6 +264,13 @@ 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)) {

resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue

@@ -58,9 +58,24 @@
         <BaseInput
           v-model.trim="mailDriverStore.smtpConfig.mail_password"
           :content-loading="isFetchingInitialData"
-          type="password"
+          :type="getInputType"
           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
@@ -194,8 +209,17 @@ 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: {

resources/scripts/admin/views/users/Index.vue

@@ -118,11 +118,11 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon"/>
+              <BaseIcon name="ChevronDownIcon" class="h-5" />
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

resources/scripts/components/GlobalSearchBar.vue

@@ -93,7 +93,6 @@
                     rounded-full
                     text-primary-500
                     dark:bg-gray-600
-                    dark:text-primary-400
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -142,7 +141,6 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
-                    dark:text-primary-400
                     dark:bg-gray-600
                   "
                 >

resources/scripts/components/LightDarkSwitcher.vue

@@ -16,13 +16,6 @@ defineProps({
 
 const globalStore = useGlobalStore()
 
-const isDark = ref(
-  localStorage.getItem('theme') === 'dark'
-    || document.documentElement.classList.contains('dark'),
-)
-
-globalStore.isDarkModeOn = isDark
-
 const enabled = computed({
   get: () => globalStore.isDarkModeOn,
   set: (value) => {

resources/scripts/components/base/BaseInput.vue

@@ -90,7 +90,7 @@
 
     <input
       v-bind="$attrs"
-      :type="getType"
+      :type="type"
       :value="modelValue"
       :disabled="disabled"
       :class="[
@@ -144,44 +144,6 @@
     >
       <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>
 
@@ -257,15 +219,6 @@ 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')
 })

resources/scripts/customer/views/auth/Login.vue

@@ -32,10 +32,25 @@
     >
       <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
@@ -76,6 +91,14 @@ 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 {

resources/scripts/customer/views/auth/ResetPassword.vue

@@ -23,11 +23,23 @@
     >
       <BaseInput
         v-model="loginData.password"
-        type="password"
+        :type="isShowPassword ? 'text' : '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
@@ -81,6 +93,7 @@ const loginData = reactive({
 
 const globalStore = useGlobalStore()
 
+let isShowPassword = ref(false)
 let isLoading = ref(false)
 
 const rules = computed(() => {

resources/scripts/customer/views/settings/CustomerSettings.vue

@@ -66,10 +66,24 @@
         >
           <BaseInput
             v-model="userStore.userForm.password"
-            type="password"
+            :type="isShowPassword ? 'text' : '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
@@ -81,10 +95,24 @@
         >
           <BaseInput
             v-model="userStore.userForm.confirm_password"
-            type="password"
+            :type="isShowConfirmPassword ? 'text' : '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>
 
@@ -123,6 +151,8 @@ 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) {