Init

nuxt/components/account/UpdatePassword.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+const form = ref();
+const auth = useAuthStore();
+
+const state = reactive({
+  current_password: "",
+  password: "",
+  password_confirmation: "",
+});
+
+const { refresh: onSubmit, status: accountPasswordStatus } = useFetch<any>("account/password", {
+  method: "POST",
+  body: state,
+  immediate: false,
+  watch: false,
+  async onResponse({ response }) {
+    if (response?.status === 422) {
+      form.value.setErrors(response._data?.errors);
+    } else if (response._data?.ok) {
+      useToast().add({
+        icon: "i-heroicons-check-circle-20-solid",
+        title: "The password was successfully updated.",
+        color: "emerald",
+      });
+
+      state.current_password = "";
+      state.password = "";
+      state.password_confirmation = "";
+    }
+  }
+});
+
+const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = useFetch<any>("verification-notification", {
+  method: "POST",
+  body: { email: auth.user.email },
+  immediate: false,
+  watch: false,
+  onResponse({ response }) {
+    if (response._data?.ok) {
+      useToast().add({
+        icon: "i-heroicons-check-circle-20-solid",
+        title: "A link to reset your password has been sent to your email.",
+        color: "emerald",
+      });
+    }
+  }
+});
+</script>
+
+<template>
+  <div>
+    <UForm
+      v-if="auth.user.has_password"
+      ref="form"
+      :state="state"
+      @submit="onSubmit"
+      class="space-y-4"
+    >
+      <UFormGroup label="Current Password" name="current_password" required>
+        <UInput v-model="state.current_password" type="password" autocomplete="off" />
+      </UFormGroup>
+
+      <UFormGroup
+        label="New Password"
+        name="password"
+        hint="min 8 characters"
+        :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }"
+        required
+      >
+        <UInput v-model="state.password" type="password" autocomplete="off" />
+      </UFormGroup>
+
+      <UFormGroup label="Repeat Password" name="password_confirmation" required>
+        <UInput
+          v-model="state.password_confirmation"
+          type="password"
+          autocomplete="off"
+        />
+      </UFormGroup>
+
+      <div class="pt-2">
+        <UButton type="submit" label="Save" :loading="accountPasswordStatus === 'pending'" />
+      </div>
+    </UForm>
+
+    <UAlert
+      v-else
+      icon="i-heroicons-information-circle-20-solid"
+      title="Send a link to your email to reset your password."
+      description="To create a password for your account, you must go through the password recovery process."
+      :actions="[
+        {
+          label: 'Send link to Email',
+          variant: 'solid',
+          color: 'gray',
+          loading: resetPasswordEmailStatus === 'pending',
+          click: sendResetPasswordEmail,
+        },
+      ]"
+    />
+  </div>
+</template>

nuxt/components/account/UpdateProfile.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+const form = ref();
+const auth = useAuthStore();
+
+const state = reactive({
+  ...{
+    email: auth.user.email,
+    name: auth.user.name,
+    avatar: auth.user.avatar,
+  },
+});
+
+const { refresh: sendEmailVerification, status: resendEmailStatus } = useFetch<any>("verification-notification", {
+  method: "POST",
+  body: { email: state.email },
+  immediate: false,
+  watch: false,
+  onResponse({ response }) {
+    if (response._data?.ok) {
+      useToast().add({
+        icon: "i-heroicons-check-circle-20-solid",
+        title: response._data.message,
+        color: "emerald",
+      });
+    }
+  }
+});
+
+const { refresh: onSubmit, status: accountUpdateStatus } = useFetch<any>("account/update", {
+  method: "POST",
+  body: state,
+  immediate: false,
+  watch: false,
+  async onResponse({ response }) {
+    if (response?.status === 422) {
+      form.value.setErrors(response._data?.errors);
+    } else if (response._data?.ok) {
+      useToast().add({
+        icon: "i-heroicons-check-circle-20-solid",
+        title: "Account details have been successfully updated.",
+        color: "emerald",
+      });
+
+      await auth.fetchUser();
+
+      state.name = auth.user.name;
+      state.email = auth.user.email;
+      state.avatar = auth.user.avatar;
+    }
+  }
+});
+</script>
+
+<template>
+  <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
+    <UFormGroup label="" name="avatar" class="flex">
+      <InputUploadAvatar
+        v-model="state.avatar"
+        accept=".png, .jpg, .jpeg, .webp"
+        entity="avatars"
+        max-size="2"
+      />
+    </UFormGroup>
+
+    <UFormGroup label="Name" name="name" required>
+      <UInput v-model="state.name" type="text" />
+    </UFormGroup>
+
+    <UFormGroup label="Email" name="email" required>
+      <UInput
+        v-model="state.email"
+        placeholder="you@example.com"
+        icon="i-heroicons-envelope"
+        trailing
+        type="email"
+      />
+    </UFormGroup>
+
+    <UAlert
+      v-if="auth.user.must_verify_email"
+      icon="i-heroicons-information-circle-20-solid"
+      title="Please confirm your email address."
+      description="A confirmation email has been sent to your email address. Please click on the confirmation link in the email to verify your email address."
+      :actions="[
+        {
+          label: 'Resend verification email',
+          variant: 'solid',
+          color: 'gray',
+          loading: resendEmailStatus === 'pending',
+          click: sendEmailVerification,
+        },
+      ]"
+    />
+
+    <div class="pt-2">
+      <UButton type="submit" label="Save" :loading="accountUpdateStatus === 'pending'" />
+    </div>
+  </UForm>
+</template>