@contentgrowth/content-auth 0.4.9 → 0.5.1

package/dist/frontend/components/vue/PasswordChanger.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { createClient } from '../../clients/vue-client';
+
+interface Props {
+    baseUrl?: string;
+    className?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    className: '',
+});
+
+const emit = defineEmits<{
+    (e: 'success', data?: any): void;
+    (e: 'error', error: string): void;
+}>();
+
+const client = computed(() => createClient(props.baseUrl));
+
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const loading = ref(false);
+const error = ref<string | null>(null);
+const success = ref(false);
+
+const handleSubmit = async () => {
+    if (newPassword.value !== confirmPassword.value) {
+        error.value = "New passwords don't match";
+        emit('error', error.value);
+        return;
+    }
+
+    loading.value = true;
+    error.value = null;
+    success.value = false;
+
+    try {
+        const res = await client.value.changePassword({
+            currentPassword: currentPassword.value,
+            newPassword: newPassword.value
+        });
+
+        if (res?.error) {
+            throw new Error(res.error.message);
+        }
+
+        // Clear form on success
+        currentPassword.value = '';
+        newPassword.value = '';
+        confirmPassword.value = '';
+        success.value = true;
+
+        emit('success', res?.data);
+    } catch (err: any) {
+        if (err?.code === 'CREDENTIAL_ACCOUNT_NOT_FOUND' || err?.message?.includes('Credential account not found')) {
+            error.value = "You are logged in via a social provider (e.g. GitHub, Google) and do not have a password set.";
+        } else {
+            error.value = err.message || 'Failed to change password';
+        }
+        emit('error', error.value);
+    } finally {
+        loading.value = false;
+    }
+};
+</script>
+
+<template>
+    <form :class="`ca-form ${className}`" @submit.prevent="handleSubmit">
+        <div class="ca-input-group">
+            <label class="ca-label" for="current-password">Current Password</label>
+            <input
+                id="current-password"
+                v-model="currentPassword"
+                type="password"
+                class="ca-input"
+                required
+            />
+        </div>
+
+        <div class="ca-input-group">
+            <label class="ca-label" for="new-password">New Password</label>
+            <input
+                id="new-password"
+                v-model="newPassword"
+                type="password"
+                class="ca-input"
+                minlength="8"
+                required
+            />
+        </div>
+
+        <div class="ca-input-group">
+            <label class="ca-label" for="confirm-password">Confirm New Password</label>
+            <input
+                id="confirm-password"
+                v-model="confirmPassword"
+                type="password"
+                class="ca-input"
+                minlength="8"
+                required
+            />
+        </div>
+
+        <div v-if="error" class="ca-error">{{ error }}</div>
+        <div v-if="success" class="ca-success-message" style="padding: 0.75rem; background: #d1fae5; border-radius: 6px; color: #065f46; text-align: center;">
+            Password updated successfully!
+        </div>
+
+        <button type="submit" class="ca-button" :disabled="loading">
+            {{ loading ? 'Updating...' : 'Update Password' }}
+        </button>
+    </form>
+</template>

package/dist/frontend/components/vue/ProfileEditor.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { createClient } from '../../clients/vue-client';
+
+interface Props {
+    baseUrl?: string;
+    defaultName?: string;
+    defaultImage?: string;
+    className?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    defaultName: '',
+    defaultImage: '',
+    className: '',
+});
+
+const emit = defineEmits<{
+    (e: 'success', data?: any): void;
+    (e: 'error', error: string): void;
+}>();
+
+const client = computed(() => createClient(props.baseUrl));
+
+const name = ref(props.defaultName);
+const image = ref(props.defaultImage);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const success = ref(false);
+const imageError = ref(false);
+
+watch(() => props.defaultName, (val) => { if (val) name.value = val; });
+watch(() => props.defaultImage, (val) => { if (val) image.value = val; });
+
+const handleSubmit = async () => {
+    loading.value = true;
+    error.value = null;
+    success.value = false;
+
+    try {
+        await client.value.updateUser({
+            name: name.value,
+            image: image.value
+        });
+        success.value = true;
+        emit('success');
+    } catch (err: any) {
+        error.value = err.message || 'Failed to update profile';
+        emit('error', error.value);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleImageError = () => {
+    imageError.value = true;
+};
+
+const handleImageInput = () => {
+    imageError.value = false;
+};
+</script>
+
+<template>
+    <form :class="`ca-form ${className}`" @submit.prevent="handleSubmit">
+        <div class="ca-input-group">
+            <label class="ca-label" for="profile-name">Name</label>
+            <input
+                id="profile-name"
+                v-model="name"
+                type="text"
+                class="ca-input"
+                placeholder="Your Name"
+            />
+        </div>
+
+        <div class="ca-input-group">
+            <label class="ca-label" for="profile-image">Avatar URL</label>
+            <div style="display: flex; gap: 10px; align-items: center;">
+                <input
+                    id="profile-image"
+                    v-model="image"
+                    type="url"
+                    class="ca-input"
+                    placeholder="https://example.com/avatar.jpg"
+                    style="flex: 1;"
+                    @input="handleImageInput"
+                />
+                <div 
+                    v-if="image && !imageError"
+                    style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid #eee;"
+                >
+                    <img
+                        :src="image"
+                        alt="Preview"
+                        style="width: 100%; height: 100%; object-fit: cover;"
+                        @error="handleImageError"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div v-if="error" class="ca-error">{{ error }}</div>
+        <div v-if="success" class="ca-success-message" style="padding: 0.75rem; background: #d1fae5; border-radius: 6px; color: #065f46; text-align: center;">
+            Profile updated successfully!
+        </div>
+
+        <button type="submit" class="ca-button" :disabled="loading">
+            {{ loading ? 'Saving...' : 'Save Profile' }}
+        </button>
+    </form>
+</template>

package/dist/frontend/components/vue/ResetPasswordForm.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { createClient } from '../../clients/vue-client';
+
+interface Props {
+    token?: string | null;
+    baseUrl?: string;
+    backToLoginUrl?: string;
+    title?: string;
+    width?: 'default' | 'compact' | 'wide';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: 'Set New Password',
+    width: 'default',
+});
+
+const emit = defineEmits<{
+    (e: 'success'): void;
+    (e: 'error', error: string): void;
+}>();
+
+const client = computed(() => createClient(props.baseUrl));
+
+const password = ref('');
+const confirmPassword = ref('');
+const loading = ref(false);
+const error = ref<string | null>(null);
+const success = ref(false);
+
+const widthClass = computed(() => {
+    if (props.width === 'compact') return 'ca-width-compact';
+    if (props.width === 'wide') return 'ca-width-wide';
+    return 'ca-width-default';
+});
+
+const hasToken = computed(() => !!props.token);
+
+const handleSubmit = async () => {
+    if (password.value !== confirmPassword.value) {
+        error.value = 'Passwords do not match';
+        return;
+    }
+
+    if (password.value.length < 8) {
+        error.value = 'Password must be at least 8 characters';
+        return;
+    }
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+        const { error: err } = await client.value.resetPassword({
+            token: props.token!,
+            newPassword: password.value
+        });
+        if (err) throw err;
+        success.value = true;
+        emit('success');
+    } catch (err: any) {
+        error.value = err.message || 'Failed to reset password';
+        emit('error', error.value);
+    } finally {
+        loading.value = false;
+    }
+};
+</script>
+
+<template>
+    <div :class="`ca-container ${widthClass}`">
+        <h2 class="ca-title">{{ title }}</h2>
+
+        <!-- Missing Token State -->
+        <template v-if="!hasToken">
+            <div class="ca-error-message">
+                <svg class="ca-error-icon" viewBox="0 0 24 24" width="48" height="48">
+                    <circle cx="12" cy="12" r="10" fill="#EF4444" />
+                    <path d="M12 8v4M12 16h.01" stroke="white" stroke-width="2" stroke-linecap="round" />
+                </svg>
+                <h3 class="ca-error-title">Invalid or Missing Token</h3>
+                <p class="ca-error-text">
+                    The password reset link is invalid or has expired.
+                    Please request a new password reset.
+                </p>
+            </div>
+            <div v-if="backToLoginUrl" class="ca-footer">
+                <a :href="backToLoginUrl" class="ca-link">Back to Sign In</a>
+            </div>
+        </template>
+
+        <!-- Success State -->
+        <template v-else-if="success">
+            <div class="ca-success-message">
+                <svg class="ca-success-icon" viewBox="0 0 24 24" width="48" height="48">
+                    <circle cx="12" cy="12" r="10" fill="#10B981" />
+                    <path d="M8 12l2.5 2.5L16 9" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                <h3 class="ca-success-title">Password Reset Successful</h3>
+                <p class="ca-success-text">
+                    Your password has been successfully reset. You can now sign in with your new password.
+                </p>
+            </div>
+            <div v-if="backToLoginUrl" class="ca-footer">
+                <a :href="backToLoginUrl" class="ca-link">Sign In</a>
+            </div>
+        </template>
+
+        <!-- Form State -->
+        <template v-else>
+            <p class="ca-subtitle">Enter your new password below.</p>
+            <form class="ca-form" @submit.prevent="handleSubmit">
+                <div class="ca-input-group">
+                    <label class="ca-label" for="password">New Password</label>
+                    <input
+                        id="password"
+                        v-model="password"
+                        type="password"
+                        class="ca-input"
+                        placeholder="At least 8 characters"
+                        minlength="8"
+                        required
+                    />
+                </div>
+
+                <div class="ca-input-group">
+                    <label class="ca-label" for="confirmPassword">Confirm Password</label>
+                    <input
+                        id="confirmPassword"
+                        v-model="confirmPassword"
+                        type="password"
+                        class="ca-input"
+                        placeholder="Confirm your password"
+                        required
+                    />
+                </div>
+
+                <div v-if="error" class="ca-error">{{ error }}</div>
+
+                <button type="submit" class="ca-button" :disabled="loading">
+                    {{ loading ? 'Resetting...' : 'Reset Password' }}
+                </button>
+            </form>
+
+            <div v-if="backToLoginUrl" class="ca-footer">
+                <a :href="backToLoginUrl" class="ca-link">Back to Sign In</a>
+            </div>
+        </template>
+    </div>
+</template>

package/dist/frontend/index.js

@@ -7,7 +7,7 @@ import {
   PasswordChanger,
   ProfileEditor,
   ResetPasswordForm
-} from "../chunk-CTASTCWI.js";
+} from "../chunk-3HNFZJ7S.js";
 import {
   authClient,
   createClient

package/dist/frontend/vue.d.ts

@@ -0,0 +1,12 @@
+export { default as AuthForm } from './components/vue/AuthForm.vue';
+export { default as ForgotPasswordForm } from './components/vue/ForgotPasswordForm.vue';
+export { default as ResetPasswordForm } from './components/vue/ResetPasswordForm.vue';
+export { default as PasswordChanger } from './components/vue/PasswordChanger.vue';
+export { default as ProfileEditor } from './components/vue/ProfileEditor.vue';
+export { default as Organization } from './components/vue/Organization.vue';
+export { authClient, createClient } from './clients/vue-client.js';
+import 'nanostores';
+import 'vue';
+import 'better-auth';
+import '@better-fetch/fetch';
+import 'better-auth/plugins';

package/dist/frontend/vue.js

@@ -0,0 +1,23 @@
+import {
+  authClient,
+  createClient
+} from "../chunk-F2G7XJIZ.js";
+import "../chunk-R5U7XKVJ.js";
+
+// src/frontend/vue.ts
+import { default as default2 } from "./components/vue/AuthForm.vue";
+import { default as default3 } from "./components/vue/ForgotPasswordForm.vue";
+import { default as default4 } from "./components/vue/ResetPasswordForm.vue";
+import { default as default5 } from "./components/vue/PasswordChanger.vue";
+import { default as default6 } from "./components/vue/ProfileEditor.vue";
+import { default as default7 } from "./components/vue/Organization.vue";
+export {
+  default2 as AuthForm,
+  default3 as ForgotPasswordForm,
+  default7 as Organization,
+  default5 as PasswordChanger,
+  default6 as ProfileEditor,
+  default4 as ResetPasswordForm,
+  authClient,
+  createClient
+};

package/dist/index.js

@@ -19,7 +19,7 @@ import {
   PasswordChanger,
   ProfileEditor,
   ResetPasswordForm
-} from "./chunk-CTASTCWI.js";
+} from "./chunk-3HNFZJ7S.js";
 import {
   authClient,
   createClient

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentgrowth/content-auth",
-    "version": "0.4.9",
+    "version": "0.5.1",
     "description": "Better Auth wrapper with UI components for Cloudflare Workers & Pages. Includes custom schema mapping, Turnstile bot protection, and email normalization.",
     "type": "module",
     "main": "./dist/index.js",
@@ -26,6 +26,24 @@
             "types": "./dist/frontend/client.d.ts",
             "import": "./dist/frontend/client.js"
         },
+        "./astro": {
+            "types": "./dist/frontend/astro.d.ts",
+            "import": "./dist/frontend/astro.js"
+        },
+        "./astro/client": {
+            "types": "./dist/frontend/clients/astro-client.d.ts",
+            "import": "./dist/frontend/clients/astro-client.js"
+        },
+        "./vue": {
+            "types": "./dist/frontend/vue.d.ts",
+            "import": "./dist/frontend/vue.js"
+        },
+        "./vue/client": {
+            "types": "./dist/frontend/clients/vue-client.d.ts",
+            "import": "./dist/frontend/clients/vue-client.js"
+        },
+        "./astro/components/*": "./dist/frontend/components/astro/*",
+        "./vue/components/*": "./dist/frontend/components/vue/*",
         "./styles.css": "./dist/styles.css"
     },
     "files": [
@@ -35,7 +53,7 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "tsup && cp src/styles.css dist/styles.css",
+        "build": "tsup && cp src/styles.css dist/styles.css && mkdir -p dist/frontend/components && cp -r src/frontend/components/vue dist/frontend/components/ && cp -r src/frontend/components/astro dist/frontend/components/",
         "dev": "tsup --watch",
         "prepublishOnly": "npm run build"
     },
@@ -45,14 +63,17 @@
         "cloudflare",
         "workers",
         "pages",
-        "react"
+        "react",
+        "astro",
+        "vue"
     ],
     "author": "Content Growth",
     "license": "MIT",
     "peerDependencies": {
         "@marsidev/react-turnstile": ">=0.5.0",
         "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "vue": "^3.3.0"
     },
     "peerDependenciesMeta": {
         "@marsidev/react-turnstile": {
@@ -63,6 +84,9 @@
         },
         "react-dom": {
             "optional": true
+        },
+        "vue": {
+            "optional": true
         }
     },
     "dependencies": {
@@ -77,9 +101,11 @@
         "@types/node": "^25.0.3",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
+        "esbuild-plugin-vue": "^0.2.4",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "tsup": "^8.5.1",
-        "typescript": "^5.9.3"
+        "typescript": "^5.9.3",
+        "vue": "^3.5.27"
     }
 }