feat!: password reset

apps/web/app/components/auth/ForgotForm.vue

@@ -22,6 +22,16 @@
         {{ $t('auth.form.action.forgot') }}
       </UButton>
     </UForm>
+
+    <div class="mt-4 text-sm text-gray-600 dark:text-gray-500 text-center">
+      <I18nT keypath="auth.links.login" scope="global">
+        <template #link>
+          <ULink to="/auth/login" class="text-primary hover:underline">
+            {{ $t('auth.login.title') }}
+          </ULink>
+        </template>
+      </I18nT>
+    </div>
   </div>
 </template>
 
@@ -31,14 +41,19 @@ import { type AuthForgotSchema, authForgotSchema } from '#schema'
 
 const form = ref<Form<AuthForgotSchema>>()
 const state = reactive<AuthForgotSchema>({
-  email: 'test@ta.ru',
+  email: '',
 })
 
 const { status, execute: onSubmit } = useAPI('/api/auth/forgot', {
   method: 'post',
   body: state,
   immediate: false,
   watch: false,
+  onResponse: async ({ response }) => {
+    if (response.ok) {
+      await navigateTo('/auth/reset')
+    }
+  },
 })
 
 const { onChangeLocale } = useI18nUtils()

apps/web/app/components/auth/ResetForm.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-semibold mb-6 text-black dark:text-white text-center">
+      {{ $t('auth.reset.title') }}
+    </h1>
+    <p class="text-sm mb-6 text-gray-500 dark:text-gray-400 text-center">
+      {{ $t('auth.reset.description') }}
+    </p>
+
+    <UForm
+      ref="form"
+      class="space-y-4"
+      :state="state"
+      :schema="authResetSchema"
+      @submit="onSubmit"
+    >
+      <UFormGroup :label="$t('auth.form.token.label')" name="token" required>
+        <UInput v-model="state.token" type="text" size="md" :placeholder="$t('auth.form.token.placeholder')" />
+      </UFormGroup>
+
+      <UFormGroup :label="$t('auth.form.password.label')" name="password" required>
+        <UInput v-model="state.password" type="password" size="md" :placeholder="$t('auth.form.password.placeholder')" />
+      </UFormGroup>
+
+      <UButton type="submit" size="md" :loading="status === 'pending'" block>
+        {{ $t('auth.form.action.reset') }}
+      </UButton>
+    </UForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Form } from '#ui/types'
+import { type AuthResetSchema, authResetSchema } from '#schema'
+
+const route = useRoute()
+
+const form = ref<Form<AuthResetSchema>>()
+const state = reactive<AuthResetSchema>({
+  token: (route.query?.token as string) || '',
+  password: '',
+})
+
+const { fetch: refreshSession } = useUserSession()
+const { status, execute: onSubmit } = useAPI('/api/auth/reset', {
+  method: 'post',
+  body: state,
+  immediate: false,
+  watch: false,
+  onResponse: async ({ response }) => {
+    if (response.ok) {
+      await refreshSession()
+      await navigateTo('/')
+    }
+  },
+})
+
+const { onChangeLocale } = useI18nUtils()
+onChangeLocale(() => {
+  form.value?.clear()
+})
+</script>

apps/web/app/locales/en-US.json

@@ -61,6 +61,8 @@
       "400004": "Passwords do not match",
       "400005": "Invalid account general data",
       "400006": "Invalid account delete data",
+      "400007": "Token expired",
+      "400008": "Invalid token",
       "401000": "Unauthorized",
       "403000": "Forbidden",
       "403001": "Access only for unauthorized users",
@@ -166,6 +168,10 @@
       "title": "Forgot Password",
       "description": "Enter your email and we’ll send you a code you can use to update your password."
     },
+    "reset": {
+      "title": "Reset Password",
+      "description": "Enter the token you received via email and the new password."
+    },
     "form": {
       "name": {
         "label": "Name",
@@ -179,10 +185,15 @@
         "label": "Password",
         "placeholder": "Enter your password"
       },
+      "token": {
+        "label": "Token Code",
+        "placeholder": "Enter your token code"
+      },
       "action": {
         "login": "Log In",
         "register": "Sign Up",
-        "forgot": "Send Code"
+        "forgot": "Send Code",
+        "reset": "Reset Password"
       }
     },
     "errors": {

apps/web/app/locales/ru-RU.json

@@ -61,6 +61,8 @@
       "400004": "Пароли не совпадают",
       "400005": "Неверные данные аккаунта",
       "400006": "Неверные данные для удаления аккаунта",
+      "400007": "Время действия токена истекло",
+      "400008": "Неверный токен",
       "401000": "Не авторизован",
       "403000": "Доступ запрещен",
       "403001": "Доступ только для неавторизованных пользователей",
@@ -166,6 +168,10 @@
       "title": "Восстановление пароля",
       "description": "Введите свой адрес электронной почты, и мы отправим вам код, который вы можете использовать для обновления пароля."
     },
+    "reset": {
+      "title": "Сброс пароля",
+      "description": "Введите код, который вы получили по электронной почте и новый пароль."
+    },
     "form": {
       "name": {
         "label": "Имя",
@@ -179,10 +185,15 @@
         "label": "Пароль",
         "placeholder": "Введите ваш пароль"
       },
+      "token": {
+        "label": "Код",
+        "placeholder": "Введите код"
+      },
       "action": {
         "login": "Войти",
         "register": "Зарегистрироваться",
-        "forgot": "Отправить код"
+        "forgot": "Отправить код",
+        "reset": "Сбросить пароль"
       }
     },
     "errors": {

apps/web/app/pages/auth/reset.vue

@@ -0,0 +1,14 @@
+<template>
+  <AuthResetForm />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'auth',
+  middleware: ['guest'],
+})
+
+useHead({
+  title: () => $t('auth.reset.title'),
+})
+</script>

apps/web/app/schema/auth.ts

@@ -15,6 +15,12 @@ export const authForgotSchema = z.object({
   email: z.string().email(),
 })
 
+export const authResetSchema = z.object({
+  password: z.string().min(6),
+  token: z.string(),
+})
+
 export type AuthLoginSchema = z.input<typeof authLoginSchema>
 export type AuthRegisterSchema = z.input<typeof authRegisterSchema>
 export type AuthForgotSchema = z.input<typeof authForgotSchema>
+export type AuthResetSchema = z.input<typeof authResetSchema>

apps/web/server/api/auth/forgot.post.ts

@@ -1,23 +1,31 @@
-import { ERROR_EMAIL_CREDENTIALS, ERROR_NOT_IMPLEMENTED } from '#constants/errors'
+import { ERROR_EMAIL_CREDENTIALS, ERROR_USER_INVALID_DATA, ERROR_USER_NOT_FOUND } from '#constants/errors'
+import { createPasswordReset, findUserByEmail } from '#core/services/user'
+import { useEmail } from '#core/email'
 
-export default defineEventHandler(() => {
-  /**
-   * This route should email the user's email with a link to the password reset page.
-   * After clicking the link, the user should enter a new password.
-   */
-  throw errorResolver({}, {
-    DEFAULT: ERROR_NOT_IMPLEMENTED,
-    EMAIL_BAD_CREDENTIALS: ERROR_EMAIL_CREDENTIALS,
-  })
+export default defineEventHandler(async (event) => {
+  try {
+    const config = useRuntimeConfig(event)
+    const { send } = useEmail()
 
-  // const { send } = useEmail()
-  // send({
-  //   to: '',
-  //   subject: 'Change password',
-  //   template: 'change-password',
-  //   params: {
-  //     resetUrl: '',
-  //     emailTo: '',
-  //   },
-  // })
+    const data = await readBody(event)
+    const user = await findUserByEmail(data.email)
+    const passwordReset = await createPasswordReset(user.id)
+
+    await send({
+      to: user.email,
+      subject: 'Change password',
+      template: 'change-password',
+      params: {
+        resetUrl: `${config.baseUrl}/auth/reset?token=${passwordReset.token}`,
+        emailTo: user.email,
+        token: passwordReset.token,
+      },
+    })
+  } catch (e) {
+    throw errorResolver(e, {
+      ERROR_USER_NOT_FOUND,
+      ZOD: ERROR_USER_INVALID_DATA,
+      EMAIL_BAD_CREDENTIALS: ERROR_EMAIL_CREDENTIALS,
+    })
+  }
 })

apps/web/server/api/auth/reset.post.ts

@@ -0,0 +1,19 @@
+import { ERROR_TOKEN_EXPIRED, ERROR_TOKEN_INVALID_DATA } from '#constants/errors'
+import { resetPassword, validateUserPasswordResetToken } from '#core/services/user'
+import { getProjectsAvailableList } from '#core/services/project'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const data = await readBody(event)
+    const user = await validateUserPasswordResetToken(data.token)
+
+    await resetPassword(user.id, data.password)
+    const projects = await getProjectsAvailableList(user.id)
+    await setUserSession(event, { user, projects })
+  } catch (e) {
+    throw errorResolver(e, {
+      ERROR_TOKEN_EXPIRED,
+      ZOD: ERROR_TOKEN_INVALID_DATA,
+    })
+  }
+})

apps/web/server/constants/errors.ts

@@ -5,6 +5,8 @@ export const ERROR_ACCOUNT_PASSWORD_INVALID_DATA = '400003: Invalid password dat
 export const ERROR_ACCOUNT_PASSWORD_NOT_MATCH = '400004: Passwords do not match'
 export const ERROR_ACCOUNT_GENERAL_INVALID_DATA = '400005: Invalid account general data'
 export const ERROR_ACCOUNT_DELETE_INVALID_DATA = '400006: Invalid account delete data'
+export const ERROR_TOKEN_EXPIRED = '400007: Token expired'
+export const ERROR_TOKEN_INVALID_DATA = '400008: Invalid token data'
 export const ERROR_UNAUTHORIZED = '401000: Unauthorized'
 export const ERROR_FORBIDDEN = '403000: Forbidden'
 export const ERROR_ACCESS_ONLY_GUEST = '403001: Access only for guest'

apps/web/server/core/database/migrations/0002_sour_silver_sable.sql

@@ -0,0 +1,8 @@
+CREATE TABLE `password_resets` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text NOT NULL,
+	`token` text NOT NULL,
+	`expires_at` integer NOT NULL,
+	`created_at` integer DEFAULT (unixepoch()),
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE cascade ON DELETE cascade
+);