fix: requested changes

src/components/UpdateEmailModal.vue

@@ -5,6 +5,16 @@ import type { ApiAccountEmailUpdateRequest, GetApiAuthMe } from '~~/shared/api-t
 const toasts = useToasts();
 const open = defineModel<boolean>();
 
+const updateOpen = ref(false);
+const verifyOpen = ref(false);
+
+watch(updateOpen, () => {
+	open.value = updateOpen.value;
+});
+watch(verifyOpen, () => {
+	open.value = verifyOpen.value;
+});
+
 const newEmail = ref('');
 
 const { profile } = defineProps<{
@@ -19,11 +29,11 @@ const {
 	execute: executeUpdateEmail,
 	isLoading: isLoadingUpdateEmail
 } = useAsync({
-	async handler() {
+	async handler(body: ApiAccountEmailUpdateRequest) {
 		await apiFetch('/api/account/update-email', {
 			method: 'PATCH',
 			body: {
-				email: newEmail.value
+				email: body.email
 			} satisfies ApiAccountEmailUpdateRequest
 		});
 
@@ -47,8 +57,7 @@ const {
 
 <template>
   <Dialog.Root
-    v-if="profile.emailValidated"
-    v-model:open="open"
+    v-model:open="updateOpen"
   >
     <Dialog.Portal :to="dialogContainer ?? undefined">
       <Dialog.Overlay />
@@ -89,7 +98,9 @@ const {
           <button
             :class="{action: true, disabled: isLoadingUpdateEmail || !newEmail}"
             :disabled="isLoadingUpdateEmail || !newEmail"
-            @click="executeUpdateEmail"
+            @click="() => executeUpdateEmail({
+              email: newEmail
+            })"
           >
             <Loader v-if="isLoadingUpdateEmail" />
             <span v-else>{{
@@ -104,8 +115,8 @@ const {
   </Dialog.Root>
 
   <Dialog.Root
-    v-else
-    v-model:open="open"
+    v-if="!profile.emailValidated"
+    v-model:open="verifyOpen"
   >
     <Dialog.Portal :to="dialogContainer ?? undefined">
       <Dialog.Overlay />
@@ -131,11 +142,16 @@ const {
                   isLoadingUpdateEmail
               }"
               :disabled="isLoadingUpdateEmail"
-              @click="executeUpdateEmail"
+              @click="() => executeUpdateEmail({
+                email: profile.emailAddress
+              })"
             >
-              {{
-                $t("account.settings.unverifiedEmailModal.resend")
-              }}
+              <Loader v-if="isLoadingUpdateEmail" />
+              <span v-else>
+                {{
+                  $t("account.settings.unverifiedEmailModal.resend")
+                }}
+              </span>
             </button>
           </p>
         </Dialog.Description>
@@ -149,9 +165,14 @@ const {
           </Dialog.Close>
         </div>
       </Dialog.Content>
-    </Dialog.Portal><Dialog.Trigger class="unverified">
-      {{ $t('account.settings.verify_email') }}
-    </Dialog.Trigger>
+    </Dialog.Portal>
+    <p class="notice">
+      {{ $t('account.settings.verify_email_notice') }}
+      <br>
+      <Dialog.Trigger class="unverified">
+        {{ $t('account.settings.verify_email_button') }}
+      </Dialog.Trigger>
+    </p>
   </Dialog.Root>
 </template>
 <style>
@@ -181,4 +202,9 @@ fieldset {
 	gap: .25rem;
 	border: none;
 }
+
+.notice {
+	font-size: .9em;
+	margin-top: 1rem !important;
+}
 </style>