From ac4624043cfbdf145465004ce31d96c2f547b8ef Mon Sep 17 00:00:00 2001
From: ZerNico <nico.franke01@gmail.com>
Date: Tue, 30 May 2023 16:53:23 +0200
Subject: [PATCH] add password changing

---
 apps/api/src/logto/management-api.ts          |  30 ++++++
 apps/api/src/trpc/middlewares/logto.ts        |   8 +-
 apps/api/src/trpc/routes/user/index.ts        |  34 +++++-
 apps/web/components/ui/Button.vue             |   7 +-
 apps/web/components/ui/Card.vue               |  13 ++-
 apps/web/components/ui/IconButton.vue         |  14 +++
 apps/web/components/ui/Input.vue              |   7 ++
 apps/web/components/ui/NavBar.vue             |   2 +-
 apps/web/layouts/auth.vue                     |   2 +-
 apps/web/lib/utils/api.ts                     |   6 +-
 apps/web/locales/de-DE.json                   |  20 +++-
 apps/web/locales/en-US.json                   |  20 +++-
 apps/web/pages/index.vue                      |   2 +-
 .../index.vue}                                |  61 ++++++-----
 apps/web/pages/user/edit-profile/password.vue | 100 ++++++++++++++++++
 15 files changed, 285 insertions(+), 41 deletions(-)
 create mode 100644 apps/web/components/ui/IconButton.vue
 rename apps/web/pages/user/{edit-profile.vue => edit-profile/index.vue} (57%)
 create mode 100644 apps/web/pages/user/edit-profile/password.vue

diff --git a/apps/api/src/logto/management-api.ts b/apps/api/src/logto/management-api.ts
index ecc6729e..4f65f5bb 100644
--- a/apps/api/src/logto/management-api.ts
+++ b/apps/api/src/logto/management-api.ts
@@ -45,4 +45,34 @@ export class ManagementApiClient {
     })
     return response
   }
+
+  public async verifyPassword(userId: string, password: string) {
+    const response = await ofetch<LogtoUser>(joinURL(env.LOGTO_URL, 'api', 'users', userId, 'password', 'verify'), {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${await this.getToken()}`,
+      },
+      body: {
+        password,
+      },
+    }).catch((err) => {
+      throw new LogtoError(err.data)
+    })
+    return response
+  }
+
+  public async updatePassword(userId: string, password: string) {
+    const response = await ofetch<LogtoUser>(joinURL(env.LOGTO_URL, 'api', 'users', userId, 'password'), {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Bearer ${await this.getToken()}`,
+      },
+      body: {
+        password: password,
+      },
+    }).catch((err) => {
+      throw new LogtoError(err.data)
+    })
+    return response
+  }
 }
diff --git a/apps/api/src/trpc/middlewares/logto.ts b/apps/api/src/trpc/middlewares/logto.ts
index 634eafef..00755eb5 100644
--- a/apps/api/src/trpc/middlewares/logto.ts
+++ b/apps/api/src/trpc/middlewares/logto.ts
@@ -2,15 +2,17 @@ import { TRPCError } from '@trpc/server'
 import { middleware, publicProcedure } from '../trpc'
 import { verifyLogtoJwt } from '../../logto/jwt'
 
+const INVALID_TOKEN_MESSAGE = 'error.invalid_token'
+
 const isLogtoAuthed = middleware(async ({ ctx, next }) => {
   const token = ctx.req.headers.authorization?.split(' ')[1]
 
-  if (!token) throw new TRPCError({ code: 'UNAUTHORIZED' })
+  if (!token) throw new TRPCError({ code: 'UNAUTHORIZED', message: INVALID_TOKEN_MESSAGE })
 
   const payload = await verifyLogtoJwt(token).catch(() => {
-    throw new TRPCError({ code: 'UNAUTHORIZED' })
+    throw new TRPCError({ code: 'UNAUTHORIZED', message: INVALID_TOKEN_MESSAGE })
   })
-  if (!payload.sub) throw new TRPCError({ code: 'UNAUTHORIZED' })
+  if (!payload.sub) throw new TRPCError({ code: 'UNAUTHORIZED', message: INVALID_TOKEN_MESSAGE })
 
   const user = await ctx.prisma.user.findUnique({
     where: {
diff --git a/apps/api/src/trpc/routes/user/index.ts b/apps/api/src/trpc/routes/user/index.ts
index eec70c66..b12ea707 100644
--- a/apps/api/src/trpc/routes/user/index.ts
+++ b/apps/api/src/trpc/routes/user/index.ts
@@ -64,7 +64,7 @@ export const userRouter = router({
           }
         }
 
-        throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', cause: err })
+        throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: 'error.unknown_error', cause: err })
       })
 
       const user = await ctx.prisma.user.update({
@@ -81,4 +81,36 @@ export const userRouter = router({
         user,
       }
     }),
+
+  updatePassword: logtoAuthedProcedure
+    .input(
+      z
+        .object({
+          currentPassword: z.string(),
+          newPassword: z
+            .string()
+            .min(9, { message: 'error.password_too_short' })
+            .max(8196, { message: 'error.password_too_long' }),
+          newPasswordConfirm: z.string(),
+        })
+        .refine((data) => data.newPassword === data.newPasswordConfirm, {
+          message: 'error.passwords_do_not_match',
+          path: ['confirmPassword'],
+        })
+    )
+    .mutation(async ({ ctx, input }) => {
+      try {
+        await ctx.mm.verifyPassword(ctx.user.id, input.currentPassword)
+        await ctx.mm.updatePassword(ctx.user.id, input.newPassword)
+      } catch (err) {
+        if (err instanceof LogtoError && err.code === 'session.invalid_credentials') {
+          throw new TRPCError({ code: 'UNAUTHORIZED', message: 'error.password_incorrect' })
+        }
+        throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: 'error.unknown_error', cause: err })
+      }
+
+      return {
+        success: true,
+      }
+    }),
 })
diff --git a/apps/web/components/ui/Button.vue b/apps/web/components/ui/Button.vue
index 1563b2b1..32792c53 100644
--- a/apps/web/components/ui/Button.vue
+++ b/apps/web/components/ui/Button.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    variant?: 'default' | 'gradient'
+    variant?: 'default' | 'gradient' | 'outline'
     size?: 'default' | 'sm' | 'lg'
     disabled?: boolean
     loading?: boolean
+    type?: 'button' | 'submit' | 'reset'
   }>(),
   {
     variant: 'default',
@@ -16,6 +17,7 @@ const props = withDefaults(
 
 const variants = new Map([
   ['default', 'bg-primary text-primary-foreground hover:bg-foreground/90'],
+  ['outline', 'border hover:bg-accent'],
   ['gradient', 'bg-gradient-to-r from-indigo-500 to-blue-500 hover:from-indigo-500/90 hover:to-blue-500/90 '],
 ])
 const sizes = new Map([
@@ -33,11 +35,12 @@ const classes = computed(() => {
 
 <template>
   <button
+    :type="props.type"
     :disabled="props.disabled"
     class="relative inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background"
     :class="classes"
   >
-    <div :class="{ 'opacity-0': props.loading }"><slot /></div>
+    <div class="w-full inline-flex items-center justify-center" :class="{ 'opacity-0': props.loading }"><slot /></div>
     <div
       v-if="props.loading"
       class="absolute mx-auto my-auto i-svg-spinners-180-ring-with-bg text-xl"
diff --git a/apps/web/components/ui/Card.vue b/apps/web/components/ui/Card.vue
index 7b8faed0..ce5d48b8 100644
--- a/apps/web/components/ui/Card.vue
+++ b/apps/web/components/ui/Card.vue
@@ -2,13 +2,24 @@
 const props = defineProps<{
   title?: string
   description?: string
+  back?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'back'): void
 }>()
 </script>
 
 <template>
   <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
     <div v-if="props.title || props.description" class="flex flex-col space-y-1.5 px-6 pt-6">
-      <h3 v-if="props.title" class="text-lg font-semibold leading-none tracking-tight">{{ props.title }}</h3>
+      <div class="flex items-center">
+        <UiIconButton v-if="props.back" type="button" class="mr-2" @click="emit('back')">
+          <div class="i-carbon-arrow-left"></div>
+        </UiIconButton>
+        <h3 v-if="props.title" class="text-lg font-semibold leading-none tracking-tight">{{ props.title }}</h3>
+      </div>
+
       <p v-if="props.description" class="text-sm text-muted-foreground">{{ props.description }}</p>
     </div>
     <div v-if="$slots.default" class="p-6 grid gap-4">
diff --git a/apps/web/components/ui/IconButton.vue b/apps/web/components/ui/IconButton.vue
new file mode 100644
index 00000000..e1ce70fb
--- /dev/null
+++ b/apps/web/components/ui/IconButton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{
+  type?: 'button' | 'submit' | 'reset'
+}>()
+</script>
+
+<template>
+  <button
+    :type="props.type"
+    class="h-8 w-8 transition-colors hover:bg-accent text-xl rounded-full flex items-center justify-center"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/apps/web/components/ui/Input.vue b/apps/web/components/ui/Input.vue
index 77f01f09..627a984b 100644
--- a/apps/web/components/ui/Input.vue
+++ b/apps/web/components/ui/Input.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+const props = defineProps<{
+  type?: 'text' | 'password'
+  autocomplete?: string
+}>()
+
 const { modelValue } = defineModels<{
   modelValue?: string
 }>()
@@ -7,6 +12,8 @@ const { modelValue } = defineModels<{
 <template>
   <input
     v-model="modelValue"
+    :autocomplete="props.autocomplete"
+    :type="props.type"
     class="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
   />
 </template>
diff --git a/apps/web/components/ui/NavBar.vue b/apps/web/components/ui/NavBar.vue
index 14eb7bf7..383b4dfc 100644
--- a/apps/web/components/ui/NavBar.vue
+++ b/apps/web/components/ui/NavBar.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <div
     :class="{ 'border-t': props.bottom, 'border-b': !props.bottom }"
-    class="flex justify-between flex-shrink-0 h-16 px-10 items-center bg-background/30 backdrop-blur"
+    class="flex justify-between flex-shrink-0 h-16 px-6 md:px-10 items-center bg-background/30 backdrop-blur"
   >
     <slot />
   </div>
diff --git a/apps/web/layouts/auth.vue b/apps/web/layouts/auth.vue
index fd649fd4..82b139cb 100644
--- a/apps/web/layouts/auth.vue
+++ b/apps/web/layouts/auth.vue
@@ -77,7 +77,7 @@ const menuItems = computed(() => {
 })
 
 const isActive = (to: string) => {
-  return router.currentRoute.value.path === to
+  return router.currentRoute.value.path.startsWith(to)
 }
 
 const leaveLobby = async () => {
diff --git a/apps/web/lib/utils/api.ts b/apps/web/lib/utils/api.ts
index 30eec4b9..461a8fdc 100644
--- a/apps/web/lib/utils/api.ts
+++ b/apps/web/lib/utils/api.ts
@@ -1,5 +1,9 @@
 import { TRPCClientError } from '@trpc/client'
 
 export const isUnauthorizedError = (error: unknown) => {
-  return error instanceof TRPCClientError && error.data.code === 'UNAUTHORIZED'
+  return (
+    error instanceof TRPCClientError &&
+    error.data.code === 'UNAUTHORIZED' &&
+    error.data.message === 'error.invalid_token'
+  )
 }
diff --git a/apps/web/locales/de-DE.json b/apps/web/locales/de-DE.json
index ac1fb1b9..63328274 100644
--- a/apps/web/locales/de-DE.json
+++ b/apps/web/locales/de-DE.json
@@ -17,7 +17,19 @@
     "edit_username_label": "Benutzername",
     "edit_username_placeholder": "Gib deinen Benutzernamen ein",
     "edit_profile_submit": "Speichern",
-    "edit_profile_success": "Profil erfolgreich aktualisiert"
+    "edit_profile_success": "Profil erfolgreich aktualisiert",
+    "edit_password_title": "Passwort ändern",
+    "edit_password_message": "Gib dein aktuelles und dein neues Passwort ein",
+    "edit_password_button": "Passwort ändern",
+    "edit_password_label": "Passwort",
+    "edit_password_current_label": "Aktuelles Passwort",
+    "edit_password_current_placeholder": "Gib dein aktuelles Passwort ein",
+    "edit_password_new_label": "Neues Passwort",
+    "edit_password_new_placeholder": "Gib dein neues Passwort ein",
+    "edit_password_confirm_label": "Passwort bestätigen",
+    "edit_password_confirm_placeholder": "Bestätige dein neues Passwort",
+    "edit_password_submit": "Passwort ändern",
+    "edit_password_success": "Passwort erfolgreich geändert"
   },
   "error": {
     "username_too_long": "Benutzername ist zu lang",
@@ -27,7 +39,11 @@
     "invalid_input": "Ungültige Eingabe",
     "unknown_error": "Unbekannter Fehler",
     "lobby_not_found": "Lobby nicht gefunden",
-    "page_not_found": "Seite nicht gefunden"
+    "page_not_found": "Seite nicht gefunden",
+    "password_too_short": "Passwort ist zu kurz",
+    "password_too_long": "Passwort ist zu lang",
+    "passwords_do_not_match": "Passwörter stimmen nicht überein",
+    "password_incorrect": "Falsches Passwort"
   },
   "notification": {
     "error_title": "Fehler",
diff --git a/apps/web/locales/en-US.json b/apps/web/locales/en-US.json
index 0f5ef17e..14bf5b2e 100644
--- a/apps/web/locales/en-US.json
+++ b/apps/web/locales/en-US.json
@@ -17,7 +17,19 @@
     "edit_username_label": "Username",
     "edit_username_placeholder": "Enter your username",
     "edit_profile_submit": "Save",
-    "edit_profile_success": "Profile updated successfully"
+    "edit_profile_success": "Profile updated successfully",
+    "edit_password_title": "Change Password",
+    "edit_password_message": "Enter your current and your new password",
+    "edit_password_button": "Change Password",
+    "edit_password_label": "Password",
+    "edit_password_current_label": "Current Password",
+    "edit_password_current_placeholder": "Enter your current password",
+    "edit_password_new_label": "New Password",
+    "edit_password_new_placeholder": "Enter your new password",
+    "edit_password_confirm_label": "Confirm Password",
+    "edit_password_confirm_placeholder": "Confirm your new password",
+    "edit_password_submit": "Change Password",
+    "edit_password_success": "Password changed successfully"
   },
   "error": {
     "username_too_long": "Username is too long",
@@ -27,7 +39,11 @@
     "invalid_input": "Invalid input",
     "unknown_error": "Unknown error",
     "lobby_not_found": "Lobby not found",
-    "page_not_found": "Page not found"
+    "page_not_found": "Page not found",
+    "password_too_short": "Password is too short",
+    "password_too_long": "Password is too long",
+    "passwords_do_not_match": "Passwords do not match",
+    "password_incorrect": "Password is incorrect"
   },
   "notification": {
     "error_title": "Error",
diff --git a/apps/web/pages/index.vue b/apps/web/pages/index.vue
index 6e8414f6..40d9f63d 100644
--- a/apps/web/pages/index.vue
+++ b/apps/web/pages/index.vue
@@ -3,7 +3,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center gap-4">
+  <div class="flex flex-col items-center justify-center gap-4 p-8">
     <h1 class="text-5xl font-bold">Tune Perfect</h1>
     <p class="text-lg">{{ t('index.tagline') }}</p>
     <div class="mt-10">
diff --git a/apps/web/pages/user/edit-profile.vue b/apps/web/pages/user/edit-profile/index.vue
similarity index 57%
rename from apps/web/pages/user/edit-profile.vue
rename to apps/web/pages/user/edit-profile/index.vue
index 550e6168..a49aac7f 100644
--- a/apps/web/pages/user/edit-profile.vue
+++ b/apps/web/pages/user/edit-profile/index.vue
@@ -89,33 +89,42 @@ const { isLoading, mutate } = useMutation({
 
 <template>
   <div class="w-full h-full flex items-center justify-center p-8">
-    <div class="w-full h-full flex items-center justify-center p-8">
-      <input ref="avatarInputEl" type="file" class="hidden" accept="image/*" @input="onAvatarSelected" />
-      <form class="w-full h-full grid place-items-center" @submit="mutate">
-        <UiCard class="w-full max-w-100" :title="t('user.edit_profile_title')">
-          <div class="flex justify-center">
-            <div class="relative">
-              <button type="button" class="rounded-full" @click="onSelectAvatar">
-                <UiAvatar
-                  class="w-30 h-30 hover:opacity-70 text-3xl"
-                  :src="avatarUrl"
-                  :fallback="claims?.username?.at(0)"
-                ></UiAvatar>
-              </button>
-              <div class="absolute bottom-0 right-0 bg-primary rounded-full p-1.5">
-                <div class="i-carbon-edit text-xl text-primary-foreground"></div>
-              </div>
+    <input ref="avatarInputEl" type="file" class="hidden" accept="image/*" @input="onAvatarSelected" />
+    <form class="w-full h-full grid place-items-center" @submit="mutate">
+      <UiCard class="w-full max-w-100" :title="t('user.edit_profile_title')">
+        <div class="flex justify-center">
+          <div class="relative">
+            <button type="button" class="rounded-full" @click="onSelectAvatar">
+              <UiAvatar
+                class="w-30 h-30 hover:opacity-70 text-3xl"
+                :src="avatarUrl"
+                :fallback="claims?.username?.at(0)"
+              ></UiAvatar>
+            </button>
+            <div class="absolute bottom-0 right-0 bg-primary rounded-full p-1.5">
+              <div class="i-carbon-edit text-xl text-primary-foreground"></div>
             </div>
           </div>
-          <div class="flex flex-col gap-2">
-            <UiLabel for="username">{{ t('user.edit_username_label') }}</UiLabel>
-            <UiInput id="username" v-model="username" :placeholder="t('user.edit_username_placeholder')" />
-          </div>
-          <template #footer>
-            <UiButton class="w-full" :loading="isLoading">{{ t('user.edit_profile_submit') }}</UiButton>
-          </template>
-        </UiCard>
-      </form>
-    </div>
+        </div>
+        <div class="flex flex-col gap-2">
+          <UiLabel for="username">{{ t('user.edit_username_label') }}</UiLabel>
+          <UiInput id="username" v-model="username" :placeholder="t('user.edit_username_placeholder')" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <UiLabel for="password">{{ t('user.edit_password_label') }}</UiLabel>
+          <NuxtLink id="password" to="/user/edit-profile/password" class="w-full">
+            <UiButton variant="outline" type="button" class="w-full">
+              <div class="inline-flex items-center justify-between w-full">
+                {{ t('user.edit_password_button') }}
+                <div class="i-carbon-arrow-right text-2xl"></div>
+              </div>
+            </UiButton>
+          </NuxtLink>
+        </div>
+        <template #footer>
+          <UiButton class="w-full" :loading="isLoading">{{ t('user.edit_profile_submit') }}</UiButton>
+        </template>
+      </UiCard>
+    </form>
   </div>
 </template>
diff --git a/apps/web/pages/user/edit-profile/password.vue b/apps/web/pages/user/edit-profile/password.vue
new file mode 100644
index 00000000..110a7c22
--- /dev/null
+++ b/apps/web/pages/user/edit-profile/password.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useMutation } from '@tanstack/vue-query'
+import { isUnauthorizedError } from '~/lib/utils/api'
+
+definePageMeta({
+  middleware: ['auth', 'lobby'],
+  layout: 'auth',
+})
+
+const { claims, fetchContext, signIn } = useLogto()
+const { client } = useTRPC()
+const { t } = useI18n()
+const { notify } = useNotification()
+const route = useRoute()
+const router = useRouter()
+const { displayError } = useErrorDisplay()
+
+const currentPassword = ref('')
+const newPassword = ref('')
+const newPasswordConfirm = ref('')
+
+const updatePassword = async (event: Event) => {
+  event.preventDefault()
+
+  await client.user.updatePassword.mutate({
+    currentPassword: currentPassword.value,
+    newPassword: newPassword.value,
+    newPasswordConfirm: newPasswordConfirm.value,
+  })
+}
+
+const { isLoading, mutate } = useMutation({
+  mutationFn: updatePassword,
+  onSuccess: () => {
+    notify({
+      title: t('notification.success_title'),
+      message: t('user.edit_password_success'),
+      type: 'success',
+    })
+  },
+  onError: (err) => {
+    if (isUnauthorizedError(err)) {
+      signIn(route.path)
+      return
+    }
+    displayError(err)
+  },
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center p-8" @submit="mutate">
+    <form class="w-full h-full grid place-items-center">
+      <UiCard
+        back
+        class="w-full max-w-100"
+        :title="t('user.edit_password_title')"
+        :description="t('user.edit_password_message')"
+        @back="router.back()"
+      >
+        <input id="username" type="text" autocomplete="username" class="hidden" :value="claims.value?.username" />
+        <div class="flex flex-col gap-2">
+          <UiLabel for="current-password">{{ t('user.edit_password_current_label') }}</UiLabel>
+          <UiInput
+            id="current-password"
+            v-model="currentPassword"
+            autocomplete="current-password"
+            type="password"
+            :placeholder="t('user.edit_password_current_placeholder')"
+          />
+        </div>
+        <div class="flex flex-col gap-2">
+          <UiLabel for="new-password">{{ t('user.edit_password_new_label') }}</UiLabel>
+          <UiInput
+            id="new-password"
+            v-model="newPassword"
+            type="password"
+            autocomplete="new-password"
+            :placeholder="t('user.edit_password_new_placeholder')"
+          />
+        </div>
+        <div class="flex flex-col gap-2">
+          <UiLabel for="new-password-confirm">{{ t('user.edit_password_confirm_label') }}</UiLabel>
+          <UiInput
+            id="new-password-confirm"
+            v-model="newPasswordConfirm"
+            type="password"
+            autocomplete="new-password"
+            :placeholder="t('user.edit_password_confirm_placeholder')"
+          />
+        </div>
+        <template #footer>
+          <UiButton :loading="isLoading" class="w-full">{{ t('user.edit_password_submit') }}</UiButton>
+        </template>
+      </UiCard>
+    </form>
+  </div>
+</template>
+
+<style scoped></style>