From d40c3b2e444cc7c60e68ef2dce6233515eb19a43 Mon Sep 17 00:00:00 2001
From: Jose Celano <josecelano@gmail.com>
Date: Mon, 3 Jun 2024 19:29:12 +0100
Subject: [PATCH] feat: [#468] allow users to change the password

---
 .eslintignore                           |   4 +-
 components/navigation/NavigationBar.vue |   3 +
 components/user/ChangePasswordForm.vue  | 116 ++++++++++++++++++++++++
 pages/user/[username].vue               |  15 +++
 4 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 components/user/ChangePasswordForm.vue
 create mode 100644 pages/user/[username].vue

diff --git a/.eslintignore b/.eslintignore
index 3fcdfade..f55ecf84 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,3 @@
-/share/container/health_check.js
\ No newline at end of file
+/share/container/health_check.js
+../torrust-index-api-lib
+../torrust-index-types-lib
diff --git a/components/navigation/NavigationBar.vue b/components/navigation/NavigationBar.vue
index 03898bd2..bd94cff2 100644
--- a/components/navigation/NavigationBar.vue
+++ b/components/navigation/NavigationBar.vue
@@ -34,6 +34,9 @@
               <li v-if="user.admin" data-cy="admin-settings-link"><NuxtLink to="/admin/settings/backend">
                 Admin Settings
               </NuxtLink></li>
+              <li data-cy="change-password-link"><NuxtLink :to="{ name: 'user-username', params: { username: user.username } }">
+                Change password
+              </NuxtLink></li>
               <li><a data-cy="help" href="https://torrust.github.io/torrust-index-gui-user-guide/" target="_blank">Help</a></li>
               <li><a data-cy="logout-link" @click="logoutUser()">Logout {{ user.username }}</a></li>
             </ul>
diff --git a/components/user/ChangePasswordForm.vue b/components/user/ChangePasswordForm.vue
new file mode 100644
index 00000000..0e458a65
--- /dev/null
+++ b/components/user/ChangePasswordForm.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="px-2 lg:px-0">
+    <div class="w-auto max-w-md px-6 py-6 mx-auto text-neutral-content/50 rounded-2xl">
+      <h2 class="mb-4 text-2xl font-semibold text-center text-neutral-content">
+        Change Password
+      </h2>
+      <form
+        class="space-y-3"
+        @submit.prevent="submit"
+      >
+        <FormInputText
+          v-model="form.current_password"
+          :type="revealPasswords ? 'text' : 'password'"
+          label="Current password"
+          name="current_password"
+          data-cy="change-password-form-current-password"
+          required
+        />
+        <FormInputText
+          v-model="form.password"
+          :type="revealPasswords ? 'text' : 'password'"
+          label="New password"
+          name="password"
+          data-cy="change-password-form-password"
+          required
+        />
+        <FormInputText
+          v-model="form.confirm_password"
+          :type="revealPasswords ? 'text' : 'password'"
+          label="Confirm new password"
+          name="confirm_password"
+          data-cy="change-password-form-confirm-password"
+          required
+        />
+        <div class="form-control">
+          <label class="cursor-pointer label">
+            <span class="label-text">Reveal passwords</span>
+            <input type="checkbox" class="toggle" @click="toggleState">
+          </label>
+        </div>
+        <button type="submit" name="submit" data-cy="change-password-form-submit" class="w-full btn btn-primary">
+          Update
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Ref } from "vue";
+import { notify } from "notiwind-ts";
+import { ref, useRestApi, useSettings } from "#imports";
+
+const props = defineProps({
+  username: {
+    type: String,
+    required: true
+  }
+});
+
+const revealPasswords: Ref<Boolean> = ref(false);
+
+type Form = {
+  current_password: string,
+  password: string,
+  confirm_password: string
+}
+
+const rest = useRestApi();
+const settings = useSettings();
+
+const form: Ref<Form> = ref({
+  current_password: "",
+  password: "",
+  confirm_password: ""
+});
+
+function toggleState () {
+  if (revealPasswords.value) {
+    revealPasswords.value = false;
+  } else {
+    revealPasswords.value = true;
+  }
+}
+
+function submit () {
+  changePassword(props.username);
+}
+
+function changePassword (username: string) {
+  rest.value.user.changePassword({
+    current_password: form.value.current_password,
+    password: form.value.password,
+    confirm_password: form.value.confirm_password
+  }, username)
+    .then(() => {
+      navigateTo("/torrents", { replace: true });
+      notify({
+        group: "success",
+        title: "Success",
+        text: "Your password was changed!"
+      }, 4000); // 4s
+    })
+    .catch((err) => {
+      notify({
+        group: "error",
+        title: "Error",
+        text: `Password change failed. ${err.message}.`
+      }, 10000);
+    });
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/user/[username].vue b/pages/user/[username].vue
new file mode 100644
index 00000000..2561c45d
--- /dev/null
+++ b/pages/user/[username].vue
@@ -0,0 +1,15 @@
+<template>
+  <ChangePasswordForm :username="user.username" />
+</template>
+
+<script setup lang="ts">
+import ChangePasswordForm from "~/components/user/ChangePasswordForm.vue";
+import { useUser } from "#imports";
+
+const user = useUser();
+
+</script>
+
+<style scoped>
+
+</style>