feat(frontend): ✨ Fix scheduler, forgot password flow, and minor bug fixes (#725)

* feat(frontend): 💄 add recipe title * fix(frontend): 🐛 fixes #722 side-bar issue * feat(frontend): ✨ Add page titles to all pages * minor cleanup * refactor(backend): ♻️ rewrite scheduler to be more modulare and work * feat(frontend): ✨ start password reset functionality * refactor(backend): ♻️ refactor application settings to facilitate dependency injection * refactor(backend): 🔥 remove RECIPE_SETTINGS env variables in favor of group settings * formatting * refactor(backend): ♻️ align naming convention * feat(backend): ✨ password reset * test(backend): ✅ password reset * feat(frontend): ✨ self-service password reset * purge password schedule * update user creation for tests Co-authored-by: Hayden <hay-kot@pm.me>
2025-07-24 15:49:42 +02:00 · 2021-10-07 09:39:47 -08:00 · 2021-10-07 09:39:47 -08:00 · 2e9026f9ea
commit 2e9026f9ea
parent d1f0441252
121 changed files with 1461 additions and 679 deletions
--- a/frontend/pages/reset-password.vue
+++ b/frontend/pages/reset-password.vue
@ -0,0 +1,140 @@
+<template>
+  <v-container fill-height fluid class="d-flex justify-center align-center">
+    <v-card color="background d-flex flex-column align-center" flat width="600px">
+      <v-card-title class="headline justify-center"> Reset Password </v-card-title>
+      <BaseDivider />
+      <v-card-text>
+        <v-form @submit.prevent="requestLink()">
+          <v-text-field
+            v-model="email"
+            :prepend-icon="$globals.icons.email"
+            filled
+            rounded
+            autofocus
+            class="rounded-lg"
+            name="login"
+            :label="$t('user.email')"
+            type="text"
+          />
+          <v-text-field
+            v-model="password"
+            filled
+            rounded
+            class="rounded-lg"
+            :prepend-icon="$globals.icons.lock"
+            name="password"
+            label="Password"
+            type="password"
+            :rules="[validators.required]"
+          />
+          <v-text-field
+            v-model="passwordConfirm"
+            filled
+            rounded
+            validate-on-blur
+            class="rounded-lg"
+            :prepend-icon="$globals.icons.lock"
+            name="password"
+            label="Confirm Password"
+            type="password"
+            :rules="[validators.required, passwordMatch]"
+          />
+          <p class="text-center">Please enter your new password.</p>
+          <v-card-actions class="justify-center">
+            <div class="max-button">
+              <v-btn
+                :loading="loading"
+                color="primary"
+                :disabled="token === ''"
+                type="submit"
+                large
+                rounded
+                class="rounded-xl"
+                block
+              >
+                <v-icon left>
+                  {{ $globals.icons.lock }}
+                </v-icon>
+                {{ token === "" ? "Token Required" : $t("user.reset-password") }}
+              </v-btn>
+            </div>
+          </v-card-actions>
+        </v-form>
+      </v-card-text>
+      <v-btn class="mx-auto" text nuxt to="/login"> {{ $t("user.login") }} </v-btn>
+    </v-card>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+import { alert } from "~/composables/use-toast";
+import { validators } from "@/composables/use-validators";
+import { useRouteQuery } from "~/composables/use-router";
+export default defineComponent({
+  layout: "basic",
+
+  setup() {
+    const state = reactive({
+      email: "",
+      password: "",
+      passwordConfirm: "",
+      loading: false,
+      error: false,
+    });
+
+    const passwordMatch = () => state.password === state.passwordConfirm || "Passwords do not match";
+
+    // ===================
+    // Token Getter
+    const token = useRouteQuery("token", "");
+
+    // ===================
+    // API
+    const api = useApiSingleton();
+    async function requestLink() {
+      state.loading = true;
+      // TODO: Fix Response to send meaningful error
+      const { response } = await api.users.resetPassword({
+        token: token.value,
+        email: state.email,
+        password: state.password,
+        passwordConfirm: state.passwordConfirm,
+      });
+
+      state.loading = false;
+
+      if (response?.status === 200) {
+        state.loading = false;
+        state.error = false;
+        alert.success("Password Reset Successful");
+      } else {
+        state.loading = false;
+        state.error = true;
+        alert.error("Something Went Wrong");
+      }
+    }
+
+    return {
+      passwordMatch,
+      token,
+      requestLink,
+      validators,
+      ...toRefs(state),
+    };
+  },
+
+  head() {
+    return {
+      title: this.$t("user.login") as string,
+    };
+  },
+});
+</script>
+
+<style lang="css">
+.max-button {
+  width: 300px;
+}
+</style>