Skip to content

Commit 78e5939

Browse files
MichaelninderMichaelninder
authored
Merge pull request #3 from MTEX-dev/dev
Adding support for full-page components ("is_full" JSON-parameter)
2 parents 09f89a6 + d2fd2f3 commit 78e5939

File tree

7 files changed

+389
-5
lines changed

7 files changed

+389
-5
lines changed

‎components/auth/alternative-login-form.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<div class="min-h-screen bg-gray-50 dark:bg-gray-950 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
2+
<div class="sm:mx-auto sm:w-full sm:max-w-md">
3+
<div class="flex justify-center">
4+
<div class="h-12 w-12 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
5+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-white">
6+
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
7+
</svg>
8+
</div>
9+
</div>
10+
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Welcome back</h2>
11+
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
12+
Don't have an account?
13+
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">Create one here</a>
14+
</p>
15+
</div>
16+
17+
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
18+
<div class="bg-white dark:bg-gray-900 py-8 px-4 shadow-xl border border-gray-200 dark:border-gray-800 sm:rounded-2xl sm:px-10">
19+
<form class="space-y-5" action="#" method="POST">
20+
<div>
21+
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
22+
<div class="mt-1">
23+
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full appearance-none rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm transition-all" placeholder="name@company.com">
24+
</div>
25+
</div>
26+
27+
<div>
28+
<div class="flex items-center justify-between">
29+
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
30+
<a href="#" class="text-xs font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Forgot password?</a>
31+
</div>
32+
<div class="mt-1 relative group">
33+
<input id="password" name="password" type="password" required class="block w-full appearance-none rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm transition-all" placeholder="••••••••">
34+
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
35+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
36+
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
37+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
38+
</svg>
39+
</button>
40+
</div>
41+
</div>
42+
43+
<div class="flex items-center">
44+
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 bg-white dark:bg-gray-800">
45+
<label for="remember-me" class="ml-2 block text-xs text-gray-700 dark:text-gray-400">
46+
Stay signed in for 30 days
47+
</label>
48+
</div>
49+
50+
<div>
51+
<button type="submit" class="group flex w-full justify-center items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/20 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-all active:scale-[0.98]">
52+
Sign in
53+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 opacity-70 group-hover:translate-x-0.5 transition-transform">
54+
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
55+
</svg>
56+
</button>
57+
</div>
58+
</form>
59+
60+
<div class="mt-6">
61+
<div class="relative">
62+
<div class="absolute inset-0 flex items-center">
63+
<div class="w-full border-t border-gray-100 dark:border-gray-800"></div>
64+
</div>
65+
<div class="relative flex justify-center text-[10px] font-bold uppercase tracking-widest">
66+
<span class="bg-white dark:bg-gray-900 px-3 text-gray-400">Or continue with</span>
67+
</div>
68+
</div>
69+
70+
<div class="mt-6 grid grid-cols-2 gap-3">
71+
<button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
72+
<span>GitHub</span>
73+
</button>
74+
<button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
75+
<span>Google</span>
76+
</button>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>

‎components/auth/alternative-registration-form.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<div class="min-h-screen bg-gray-50 dark:bg-gray-950 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
2+
<div class="sm:mx-auto sm:w-full sm:max-w-md">
3+
<!-- Icon / Logo -->
4+
<div class="flex justify-center">
5+
<div class="h-12 w-12 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
6+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-white">
7+
<path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
8+
</svg>
9+
</div>
10+
</div>
11+
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Create an account</h2>
12+
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
13+
Already have one?
14+
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">Sign in here</a>
15+
</p>
16+
</div>
17+
18+
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
19+
<div class="bg-white dark:bg-gray-900 py-8 px-4 shadow-xl border border-gray-200 dark:border-gray-800 sm:rounded-2xl sm:px-10">
20+
<form class="space-y-5" action="#" method="POST">
21+
<!-- Name Field -->
22+
<div>
23+
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
24+
<div class="mt-1">
25+
<input id="name" name="name" type="text" required class="block w-full appearance-none rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm transition-all" placeholder="Fabian Ternis">
26+
</div>
27+
</div>
28+
29+
<!-- Email Field -->
30+
<div>
31+
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
32+
<div class="mt-1">
33+
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full appearance-none rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm transition-all" placeholder="fabian@mtex.dev">
34+
</div>
35+
</div>
36+
37+
<!-- Password Field -->
38+
<div>
39+
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
40+
<div class="mt-1 relative group">
41+
<input id="password" name="password" type="password" required class="block w-full appearance-none rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm transition-all" placeholder="••••••••">
42+
<!-- Icon Toggle (Visual Only in pure HTML) -->
43+
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
44+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
45+
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
46+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
47+
</svg>
48+
</button>
49+
</div>
50+
</div>
51+
52+
<!-- Terms -->
53+
<div class="flex items-center">
54+
<input id="terms" name="terms" type="checkbox" class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 bg-white dark:bg-gray-800">
55+
<label for="terms" class="ml-2 block text-xs text-gray-700 dark:text-gray-400">
56+
I agree to the <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Terms</a> and <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Privacy Policy</a>
57+
</label>
58+
</div>
59+
60+
<!-- Submit Button -->
61+
<div>
62+
<button type="submit" class="group flex w-full justify-center items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/20 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-all active:scale-[0.98]">
63+
Create Account
64+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 opacity-70 group-hover:translate-x-0.5 transition-transform">
65+
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
66+
</svg>
67+
</button>
68+
</div>
69+
</form>
70+
71+
<!-- Divider -->
72+
<div class="mt-6">
73+
<div class="relative">
74+
<div class="absolute inset-0 flex items-center">
75+
<div class="w-full border-t border-gray-100 dark:border-gray-800"></div>
76+
</div>
77+
<div class="relative flex justify-center text-[10px] font-bold uppercase tracking-widest">
78+
<span class="bg-white dark:bg-gray-900 px-3 text-gray-400">Or continue with</span>
79+
</div>
80+
</div>
81+
82+
<!-- Social Links -->
83+
<div class="mt-6 grid grid-cols-2 gap-3">
84+
<button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
85+
<span>GitHub</span>
86+
</button>
87+
<button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
88+
<span>Google</span>
89+
</button>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>

‎components/auth/simple-login-form.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
2+
<div class="w-full max-w-md">
3+
<div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-xl overflow-hidden">
4+
<div class="p-8">
5+
<div class="flex flex-col items-center mb-8">
6+
<div class="h-12 w-12 rounded-xl bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 mb-4">
7+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
8+
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
9+
</svg>
10+
</div>
11+
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Welcome back</h1>
12+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Please enter your details to sign in</p>
13+
</div>
14+
15+
<form class="space-y-5">
16+
<div>
17+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Email Address</label>
18+
<div class="relative">
19+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
20+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
21+
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
22+
</svg>
23+
</div>
24+
<input type="email" class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all" placeholder="name@company.com">
25+
</div>
26+
</div>
27+
28+
<div>
29+
<div class="flex items-center justify-between mb-1.5">
30+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
31+
<a href="#" class="text-xs font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Forgot password?</a>
32+
</div>
33+
<div class="relative">
34+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
35+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
36+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
37+
</svg>
38+
</div>
39+
<input type="password" class="block w-full pl-10 pr-10 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all" placeholder="••••••••">
40+
<button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
41+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
42+
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
43+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
44+
</svg>
45+
</button>
46+
</div>
47+
</div>
48+
49+
<div class="flex items-center">
50+
<input id="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded-md">
51+
<label for="remember-me" class="ml-2 block text-sm text-gray-600 dark:text-gray-400">Stay signed in for 30 days</label>
52+
</div>
53+
54+
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all">
55+
Sign in
56+
</button>
57+
</form>
58+
</div>
59+
60+
<div class="px-8 py-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-800 text-center">
61+
<p class="text-sm text-gray-600 dark:text-gray-400">
62+
Don't have an account?
63+
<a href="#" class="font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Create one</a>
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
</div>

0 commit comments

Comments
 (0)