@stacksjs/defaults 0.75.233 → 0.75.236

package/resources/components/Dashboard/Auth/Login.stx

@@ -56,94 +56,85 @@ function handleSubmit(): void {
 }
 </script>
 
-<div class="flex items-center justify-center px-4 py-12 min-h-screen">
-  <div class="max-w-sm w-full">
-    <div class="mb-8 text-center">
-      <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
-        <span class="h-7 w-7 text-white i-hugeicons-cube"></span>
+<AuthCard :title="title()" :subtitle="subtitle()">
+
+  <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
+    <div :if="error()" role="alert" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+      <div class="flex gap-2 items-center">
+        <span class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
+        <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
       </div>
-      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">{{ title() }}</h1>
-      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">{{ subtitle() }}</p>
     </div>
 
-    <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
-      <div :if="error()" role="alert" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
-        <div class="flex gap-2 items-center">
-          <span class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
-          <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
-        </div>
+    <form @submit.prevent="handleSubmit">
+      <div class="mb-4">
+        <Input
+          type="email"
+          label="Email address"
+          placeholder="you@example.com"
+          v-model:value="email"
+          @blur="validateEmail()"
+          :error="fieldError('email')"
+          required
+          :disabled="isLoading()"
+        />
       </div>
 
-      <form @submit.prevent="handleSubmit">
-        <div class="mb-4">
-          <Input
-            type="email"
-            label="Email address"
-            placeholder="you@example.com"
-            v-model:value="email"
-            @blur="validateEmail()"
-            :error="fieldError('email')"
-            required
-            :disabled="isLoading()"
-          />
-        </div>
-
-        <div class="mb-4">
-          <Input
-            type="password"
-            label="Password"
-            placeholder="Enter your password"
-            v-model:value="password"
-            @blur="validatePassword()"
-            :error="fieldError('password')"
-            required
+      <div class="mb-4">
+        <Input
+          type="password"
+          label="Password"
+          placeholder="Enter your password"
+          v-model:value="password"
+          @blur="validatePassword()"
+          :error="fieldError('password')"
+          required
+          :disabled="isLoading()"
+        />
+      </div>
+
+      <div class="flex items-center justify-between mb-6">
+        <label :if="showRememberMe()" class="flex gap-2 items-center cursor-pointer">
+          <input
+            type="checkbox"
+            class="h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
+            x-model="rememberMe"
             :disabled="isLoading()"
           />
-        </div>
-
-        <div class="flex items-center justify-between mb-6">
-          <label :if="showRememberMe()" class="flex gap-2 items-center cursor-pointer">
-            <input
-              type="checkbox"
-              class="h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
-              x-model="rememberMe"
-              :disabled="isLoading()"
-            />
-            <span class="text-neutral-600 text-sm dark:text-neutral-400">Remember me</span>
-          </label>
-
-          <a :if="showForgotPassword()" href="/forgot-password" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
-            Forgot password?
-          </a>
-        </div>
-
-        <Button
-          type="submit"
-          variant="primary"
-          size="lg"
-          fullWidth
-          :loading="isLoading()"
-          :disabled="isLoading() || !email() || !password()"
-        >
-          <span :if="isLoading()">Signing in...</span>
-          <span :if="!isLoading()">Sign in</span>
-        </Button>
-      </form>
-
-      {{--
-        Anything that belongs with the credentials, inside the same card:
-        the social sign-in buttons the /login page fills this with. It is a
-        slot because the provider list has to be computed server-side by
-        `configuredSocialProviders()`, and this component is client-only.
-      --}}
-      <slot name="social" />
-    </div>
+          <span class="text-neutral-600 text-sm dark:text-neutral-400">Remember me</span>
+        </label>
+
+        <a :if="showForgotPassword()" href="/forgot-password" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+          Forgot password?
+        </a>
+      </div>
 
-    <p :if="showSignUp()" class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
-      Don't have an account?
-      <a href="/register" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
-        Sign up
-      </a>
-    </p>
+      <Button
+        type="submit"
+        variant="primary"
+        size="lg"
+        fullWidth
+        :loading="isLoading()"
+        :disabled="isLoading() || !email() || !password()"
+      >
+        <span :if="isLoading()">Signing in...</span>
+        <span :if="!isLoading()">Sign in</span>
+      </Button>
+    </form>
+
+    {{--
+      Anything that belongs with the credentials, inside the same card:
+      the social sign-in buttons the /login page fills this with. It is a
+      slot because the provider list has to be computed server-side by
+      `configuredSocialProviders()`, and this component is client-only.
+    --}}
+    <slot name="social" />
   </div>
-</div>
+
+  <p :if="showSignUp()" class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+    Don't have an account?
+    <a href="/register" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+      Sign up
+    </a>
+  </p>
+</AuthCard>

package/resources/components/Dashboard/Auth/Register.stx

@@ -98,148 +98,134 @@ function handleSubmit(): void {
   })
 }
 </script>
-<div class="flex items-center justify-center px-4 py-12 min-h-screen">
-  <div class="max-w-sm w-full">
-    <!-- Logo/Brand -->
-    <div class="mb-8 text-center">
-      <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
-        <span class="h-7 w-7 text-white i-hugeicons-cube"></span>
-      </div>
-      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
-        {{ title() }}
-      </h1>
-      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
-        {{ subtitle() }}
-      </p>
-    </div>
-
-    <!-- Register Form -->
-    <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
-      <!-- Error Message -->
-        <div :if="error()" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
-          <div class="flex gap-2 items-center">
-            <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
-            <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
-          </div>
+<AuthCard :title="title()" :subtitle="subtitle()">
+
+  <!-- Register Form -->
+  <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
+    <!-- Error Message -->
+      <div :if="error()" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+        <div class="flex gap-2 items-center">
+          <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
+          <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
         </div>
+      </div>
 
-      <form @submit.prevent="handleSubmit">
-        <!-- Name Field -->
-        <div class="mb-4">
-          <Input
-            type="text"
-            label="Full name"
-            placeholder="John Doe"
-            v-model:value="name"
-            :error="fieldError('name')"
-            required
-            :disabled="isLoading()"
-          />
-        </div>
+    <form @submit.prevent="handleSubmit">
+      <!-- Name Field -->
+      <div class="mb-4">
+        <Input
+          type="text"
+          label="Full name"
+          placeholder="John Doe"
+          v-model:value="name"
+          :error="fieldError('name')"
+          required
+          :disabled="isLoading()"
+        />
+      </div>
 
-        <!-- Email Field -->
-        <div class="mb-4">
-          <Input
-            type="email"
-            label="Email address"
-            placeholder="you@example.com"
-            v-model:value="email"
-            @blur="validateEmail()"
-            :error="fieldError('email')"
-            required
-            :disabled="isLoading()"
-          />
-        </div>
+      <!-- Email Field -->
+      <div class="mb-4">
+        <Input
+          type="email"
+          label="Email address"
+          placeholder="you@example.com"
+          v-model:value="email"
+          @blur="validateEmail()"
+          :error="fieldError('email')"
+          required
+          :disabled="isLoading()"
+        />
+      </div>
 
-        <!-- Password Field -->
-        <div class="mb-4">
-          <Input
-            type="password"
-            label="Password"
-            placeholder="At least 8 characters"
-            v-model:value="password"
-            @input="validatePassword()"
-            @blur="validatePassword()"
-            :error="fieldError('password')"
-            required
-            :disabled="isLoading()"
-          />
-          <!-- Password Strength Indicator -->
-            <div :if="password().length > 0" class="mt-2">
-              <div class="flex gap-1">
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 1 ? (passwordStrength() <= 1 ? 'bg-red-500' : passwordStrength() === 2 ? 'bg-orange-500' : passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 2 ? (passwordStrength() === 2 ? 'bg-orange-500' : passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 3 ? (passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 4 ? 'bg-green-500' : 'bg-neutral-200 dark:bg-neutral-700'"></div>
-              </div>
-              <p class="mt-1 text-xs" :class="passwordStrength() <= 1 ? 'text-red-500' : passwordStrength() === 2 ? 'text-orange-500' : passwordStrength() === 3 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-500'">
-                {{ passwordStrengthLabel() }}
-              </p>
+      <!-- Password Field -->
+      <div class="mb-4">
+        <Input
+          type="password"
+          label="Password"
+          placeholder="At least 8 characters"
+          v-model:value="password"
+          @input="validatePassword()"
+          @blur="validatePassword()"
+          :error="fieldError('password')"
+          required
+          :disabled="isLoading()"
+        />
+        <!-- Password Strength Indicator -->
+          <div :if="password().length > 0" class="mt-2">
+            <div class="flex gap-1">
+              <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 1 ? (passwordStrength() <= 1 ? 'bg-red-500' : passwordStrength() === 2 ? 'bg-orange-500' : passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+              <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 2 ? (passwordStrength() === 2 ? 'bg-orange-500' : passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+              <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 3 ? (passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+              <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 4 ? 'bg-green-500' : 'bg-neutral-200 dark:bg-neutral-700'"></div>
             </div>
-        </div>
+            <p class="mt-1 text-xs" :class="passwordStrength() <= 1 ? 'text-red-500' : passwordStrength() === 2 ? 'text-orange-500' : passwordStrength() === 3 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-500'">
+              {{ passwordStrengthLabel() }}
+            </p>
+          </div>
+      </div>
+
+      <!-- Confirm Password Field -->
+      <div class="mb-4">
+        <Input
+          type="password"
+          label="Confirm password"
+          placeholder="Confirm your password"
+          v-model:value="passwordConfirmation"
+          @input="validateConfirmation()"
+          :error="fieldError('passwordConfirmation')"
+          required
+          :disabled="isLoading()"
+        />
+      </div>
 
-        <!-- Confirm Password Field -->
-        <div class="mb-4">
-          <Input
-            type="password"
-            label="Confirm password"
-            placeholder="Confirm your password"
-            v-model:value="passwordConfirmation"
-            @input="validateConfirmation()"
-            :error="fieldError('passwordConfirmation')"
-            required
+      <!-- Terms Checkbox -->
+      <div class="mb-6">
+        <label class="flex gap-2 items-start cursor-pointer">
+          <input
+            type="checkbox"
+            class="mt-0.5 h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
+            x-model="agreeToTerms"
             :disabled="isLoading()"
           />
-        </div>
-
-        <!-- Terms Checkbox -->
-        <div class="mb-6">
-          <label class="flex gap-2 items-start cursor-pointer">
-            <input
-              type="checkbox"
-              class="mt-0.5 h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
-              x-model="agreeToTerms"
-              :disabled="isLoading()"
-            />
-            <span class="text-neutral-600 text-sm dark:text-neutral-400">
-              I agree to the
-              <a href="/terms" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Terms of Service</a>
-              and
-              <a href="/privacy" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Privacy Policy</a>
-            </span>
-          </label>
-            <p :if="fieldError('terms')" class="mt-1 text-red-600 text-sm dark:text-red-400">{{ fieldError('terms') }}</p>
-        </div>
+          <span class="text-neutral-600 text-sm dark:text-neutral-400">
+            I agree to the
+            <a href="/terms" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Terms of Service</a>
+            and
+            <a href="/privacy" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Privacy Policy</a>
+          </span>
+        </label>
+          <p :if="fieldError('terms')" class="mt-1 text-red-600 text-sm dark:text-red-400">{{ fieldError('terms') }}</p>
+      </div>
 
-        <!-- Submit Button -->
-        <Button
-          type="submit"
-          variant="primary"
-          size="lg"
-          fullWidth
-          :loading="isLoading()"
-          :disabled="isLoading()"
-        >
-          <span :if="isLoading()">Creating account...</span>
-          <span :if="!isLoading()">Create account</span>
-        </Button>
-      </form>
-
-      {{--
-        Anything that belongs with the credentials, inside the same card:
-        the social sign-in buttons the /register page fills this with. It is
-        a slot because the provider list has to be computed server-side by
-        `configuredSocialProviders()`, and this component is client-only.
-      --}}
-      <slot name="social" />
-    </div>
-
-    <!-- Login Link -->
-      <p :if="showLogin()" class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
-        Already have an account?
-        <a href="/login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
-          Sign in
-        </a>
-      </p>
+      <!-- Submit Button -->
+      <Button
+        type="submit"
+        variant="primary"
+        size="lg"
+        fullWidth
+        :loading="isLoading()"
+        :disabled="isLoading()"
+      >
+        <span :if="isLoading()">Creating account...</span>
+        <span :if="!isLoading()">Create account</span>
+      </Button>
+    </form>
+
+    {{--
+      Anything that belongs with the credentials, inside the same card:
+      the social sign-in buttons the /register page fills this with. It is
+      a slot because the provider list has to be computed server-side by
+      `configuredSocialProviders()`, and this component is client-only.
+    --}}
+    <slot name="social" />
   </div>
-</div>
+
+  <!-- Login Link -->
+    <p :if="showLogin()" class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+      Already have an account?
+      <a href="/login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+        Sign in
+      </a>
+    </p>
+</AuthCard>