nuxt-users 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,6 +1,33 @@
 # Changelog
 
 
+## v1.4.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.3.0...v1.4.0)
+
+### 🚀 Enhancements
+
+- Implement forgot password closes #57 ([#57](https://github.com/rrd108/nuxt-users/issues/57))
+
+### 🩹 Fixes
+
+- Css color ([1d72336](https://github.com/rrd108/nuxt-users/commit/1d72336))
+- Auth middleware ([113b165](https://github.com/rrd108/nuxt-users/commit/113b165))
+- Enhances auth middleware and improves logging ([f519bbc](https://github.com/rrd108/nuxt-users/commit/f519bbc))
+- Playground colors ([f87ade1](https://github.com/rrd108/nuxt-users/commit/f87ade1))
+
+### 💅 Refactors
+
+- Have a dedicated playground  login page ([487d754](https://github.com/rrd108/nuxt-users/commit/487d754))
+
+### 🏡 Chore
+
+- **release:** V1.3.0 ([b127043](https://github.com/rrd108/nuxt-users/commit/b127043))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
 ## v1.3.0
 
 [compare changes](https://github.com/rrd108/nuxt-users/compare/v1.2.0...v1.3.0)

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-users",
   "configKey": "nuxtUsers",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -52,7 +52,7 @@ const module = defineNuxtModule({
         passwordResetTokens: options.tables?.passwordResetTokens || defaultOptions.tables.passwordResetTokens
       },
       auth: {
-        whitelist: options.auth?.whitelist || defaultOptions.auth?.whitelist || ["/login"]
+        whitelist: [...defaultOptions.auth?.whitelist || [], ...options.auth?.whitelist || []]
       }
     };
     addPlugin({

package/dist/runtime/components/LoginForm.vue

@@ -3,11 +3,14 @@ import { ref } from "vue";
 import { navigateTo } from "#app";
 const props = defineProps({
   apiEndpoint: { type: String, required: false, default: "/api/login" },
-  redirectTo: { type: String, required: false, default: "/" }
+  redirectTo: { type: String, required: false, default: "/" },
+  forgotPasswordEndpoint: { type: String, required: false, default: "/api/auth/forgot-password" }
 });
-const emit = defineEmits(["success", "error", "submit"]);
+const emit = defineEmits(["success", "error", "forgot-password-error", "submit", "forgot-password-success"]);
 const isLoading = ref(false);
+const isForgotPasswordLoading = ref(false);
 const error = ref("");
+const forgotPasswordMessage = ref("");
 const formData = ref({
   email: "",
   password: "",
@@ -37,6 +40,31 @@ const handleSubmit = async () => {
     isLoading.value = false;
   }
 };
+const handleForgotPassword = async () => {
+  if (!formData.value.email) {
+    error.value = "Please enter your email address first";
+    return;
+  }
+  isForgotPasswordLoading.value = true;
+  forgotPasswordMessage.value = "";
+  error.value = "";
+  try {
+    const response = await $fetch(props.forgotPasswordEndpoint, {
+      method: "POST",
+      body: {
+        email: formData.value.email
+      }
+    });
+    forgotPasswordMessage.value = response.message;
+    emit("forgot-password-success");
+  } catch (err) {
+    const errorMessage = err && typeof err === "object" && "data" in err && err.data && typeof err.data === "object" && "statusMessage" in err.data ? String(err.data.statusMessage) : err instanceof Error ? err.message : "Failed to send password reset email";
+    error.value = errorMessage;
+    emit("forgot-password-error", errorMessage);
+  } finally {
+    isForgotPasswordLoading.value = false;
+  }
+};
 </script>
 
 <template>
@@ -119,13 +147,32 @@ const handleSubmit = async () => {
             <a
               href="#"
               class="forgot-link"
+              :class="{ loading: isForgotPasswordLoading }"
+              @click.prevent="handleForgotPassword"
             >
-              Forgot your password?
+              <span
+                v-if="isForgotPasswordLoading"
+                class="loading-spinner"
+              />
+              {{ isForgotPasswordLoading ? "Sending..." : "Forgot your password?" }}
             </a>
           </p>
         </div>
       </slot>
 
+      <!-- Success message slot -->
+      <slot
+        name="success-message"
+        :message="forgotPasswordMessage"
+      >
+        <div
+          v-if="forgotPasswordMessage"
+          class="success-message"
+        >
+          {{ forgotPasswordMessage }}
+        </div>
+      </slot>
+
       <!-- Error message slot -->
       <slot
         name="error-message"
@@ -143,5 +190,5 @@ const handleSubmit = async () => {
 </template>
 
 <style scoped>
-section{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);margin:0 auto;max-width:25rem;padding:1em}form{gap:1.5rem}.form-group,form{display:flex;flex-direction:column}label{display:block;font-weight:500;margin-bottom:.5em}input[type=email],input[type=password],label{color:var(--color-gray-700);font-size:.875rem}input[type=email],input[type=password]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:8px;box-sizing:border-box;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}input[type=email]:focus,input[type=password]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.login-header{margin-bottom:1em;text-align:center}.login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.login-subtitle{color:var(--color-gray-500);font-size:.875rem;line-height:1.5;margin:0}.remember-me{align-items:center;display:flex;gap:.5rem}input[type=checkbox]{margin:0;width:auto}.remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.loading-spinner{animation:spin 1s linear infinite;border:2px solid var(--color-white);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{margin-top:1em;text-align:center}.forgot-password{margin:0}.forgot-link{color:var(--color-primary);font-size:.875rem;text-decoration:none;transition:color .2s ease-in-out}.forgot-link:hover{color:var(--color-primary-dark);text-decoration:underline}.error-message{background-color:var(--color-error-light);border:1px solid var(--color-error-border);border-radius:8px;color:var(--color-error);font-size:.875rem;margin-top:1em;padding:.75em 1em;text-align:center}@media (max-width:480px){.login-form-container{margin:1em;padding:1.5em}.login-title{font-size:1.5rem}}
+section{background:linear-gradient(135deg,var(--color-bg-primary) 0,var(--color-bg-secondary) 100%);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);margin:0 auto;max-width:25rem;padding:1em}form{gap:1.5rem}.form-group,form{display:flex;flex-direction:column}label{display:block;font-weight:500;margin-bottom:.5em}input[type=email],input[type=password],label{color:var(--color-gray-700);font-size:.875rem}input[type=email],input[type=password]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:8px;box-sizing:border-box;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}input[type=email]:focus,input[type=password]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.login-header{margin-bottom:1em;text-align:center}.login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.login-subtitle{color:var(--color-gray-500);font-size:.875rem;line-height:1.5;margin:0}.remember-me{align-items:center;display:flex;gap:.5rem}input[type=checkbox]{margin:0;width:auto}.remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.loading-spinner{animation:spin 1s linear infinite;border:2px solid var(--color-white);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{margin-top:1em;text-align:center}.forgot-password{margin:0}.forgot-link{align-items:center;color:var(--color-primary);display:inline-flex;font-size:.875rem;gap:.5rem;text-decoration:none;transition:color .2s ease-in-out}.forgot-link:hover:not(.loading){color:var(--color-primary-dark);text-decoration:underline}.forgot-link.loading{cursor:not-allowed;opacity:.6;pointer-events:none}.error-message{background-color:var(--color-error-light);border:1px solid var(--color-error-border);border-radius:8px;color:var(--color-error)}.error-message,.success-message{font-size:.875rem;margin-top:1em;padding:.75em 1em;text-align:center}.success-message{background-color:var(--color-success-light);border:1px solid var(--color-success-border);border-radius:8px;color:var(--color-success)}@media (max-width:480px){.login-form-container{margin:1em;padding:1.5em}.login-title{font-size:1.5rem}}
 </style>

package/dist/runtime/components/LoginForm.vue.d.ts

@@ -1,5 +1,7 @@
 import type { LoginFormData, LoginFormProps, User } from '../../types.js';
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {
+    message: string;
+}, __VLS_15: {
     error: string;
 };
 type __VLS_Slots = {} & {
@@ -15,19 +17,26 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_11) => any;
 } & {
-    'error-message'?: (props: typeof __VLS_13) => any;
+    'success-message'?: (props: typeof __VLS_13) => any;
+} & {
+    'error-message'?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LoginFormProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     error: (error: string) => any;
     submit: (data: LoginFormData) => any;
     success: (user: User) => any;
+    "forgot-password-error": (error: string) => any;
+    "forgot-password-success": () => any;
 }, string, import("vue").PublicProps, Readonly<LoginFormProps> & Readonly<{
     onError?: ((error: string) => any) | undefined;
     onSubmit?: ((data: LoginFormData) => any) | undefined;
     onSuccess?: ((user: User) => any) | undefined;
+    "onForgot-password-error"?: ((error: string) => any) | undefined;
+    "onForgot-password-success"?: (() => any) | undefined;
 }>, {
     apiEndpoint: string;
     redirectTo: string;
+    forgotPasswordEndpoint: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/plugin.js

@@ -1,5 +1,6 @@
-import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { addRouteMiddleware, defineNuxtPlugin, useRuntimeConfig, navigateTo } from "#app";
 import { checkTableExists } from "../utils";
+import { useAuth } from "./composables/useAuth.js";
 export default defineNuxtPlugin(async (_nuxtApp) => {
   const { nuxtUsers } = useRuntimeConfig();
   const options = nuxtUsers;
@@ -7,4 +8,20 @@ export default defineNuxtPlugin(async (_nuxtApp) => {
   if (!hasMigrationsTable) {
     console.warn("[Nuxt Users] \u26A0\uFE0F  Migrations table does not exist, you should run the migration script to create it by running: npx nuxt-users migrate");
   }
+  addRouteMiddleware(
+    "auth.global",
+    (to, from) => {
+      if (to.path === "/login") {
+        return;
+      }
+      const { user } = useAuth();
+      if (user.value || nuxtUsers.auth?.whitelist?.includes(to.path)) {
+        console.log("[Nuxt Users] \u{1F510} Auth middleware: Access allowed");
+        return;
+      }
+      console.log(`[Nuxt Users] \u{1F510} Auth middleware: Redirecting from ${from.path} to login - no user and not whitelisted`);
+      return navigateTo("/login");
+    },
+    { global: true }
+  );
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-users",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A comprehensive user management module for Nuxt 3 applications with authentication, database support, and CLI tools",
   "keywords": [
     "nuxt",

package/dist/runtime/middleware/auth.global.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("#app").RouteMiddleware;
-export default _default;

package/dist/runtime/middleware/auth.global.js

@@ -1,12 +0,0 @@
-import { defineNuxtRouteMiddleware, useRuntimeConfig, navigateTo } from "#app";
-import { useAuth } from "../composables/useAuth.js";
-export default defineNuxtRouteMiddleware((to, _from) => {
-  const { nuxtUsers } = useRuntimeConfig();
-  const { user } = useAuth();
-  if (to.path === "/login") {
-    return;
-  }
-  if (!user.value && !nuxtUsers.auth?.whitelist?.includes(to.path)) {
-    return navigateTo("/login");
-  }
-});