fix: requested changes

.docker/docker-compose.yml

@@ -67,7 +67,7 @@ services:
     volumes:
       - "./assets/garage-init.sh:/etc/init.sh"
   account:
-    image: ghcr.io/pretendonetwork/account:sha-81cbacf
+    image: ghcr.io/pretendonetwork/account:sha-34dc075
     restart: unless-stopped
     networks:
       - net

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>

src/locales/en_US.json

@@ -220,7 +220,8 @@
 			"update": "Update",
 			"unverified_email": "Unverified",
 			"verified_email": "Verified",
-			"verify_email": "Verify email",
+			"verify_email_notice": "You haven't verified your email address yet.",
+			"verify_email_button": "Verify now",
 			"settingCards": {
 				"userSettings": "User settings",
 				"profile": "Profile",

src/pages/account/verify-email.client.vue

@@ -27,19 +27,15 @@ const {
 	}
 });
 
-await callOnce(async () => {
-	await executeVerifyEmail();
+callOnce(() => {
+	executeVerifyEmail();
 });
 </script>
 
 <template>
   <div v-if="isLoadingVerifyEmail">
-    <div class="account-form-wrapper">
-      <form
-        class="account loading"
-      >
-        <Loader />
-      </form>
+    <div class="account-form-wrapper loading">
+      <Loader />
     </div>
   </div>
   <div v-else-if="success">
@@ -73,6 +69,9 @@ await callOnce(async () => {
   width: fit-content;
   overflow: hidden;
 }
+.account-form-wrapper.loading {
+	justify-content: center;
+}
 .title {
 	font-size: 4rem;
 	margin-bottom: 0;