Improve look of auth pages

templates/dashboard/http_functions/new.html

@@ -9,6 +9,7 @@ show_refresh=False,
 show_logs=False,
 show_client=False,
 show_link=False,
+show_tests=False,
 dashboardUrl=url_for('http.overview'),
 cancel_url=url_for('http.overview'),
 title='New HTTP Function')

templates/login.html

@@ -2,55 +2,86 @@
 
 {% block content %}
 
-<div class="w-full h-screen flex items-center justify-center" data-id="1">
+<div
-    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4 bg-gray-100" data-id="2"
+    class="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 px-4 py-12">
-        data-v0-t="card">
+    <div class="w-full max-w-md">
-        <div class="flex flex-col space-y-1.5 p-6" data-id="3">
+        <!-- Logo/Branding Section -->
-            <h1 class="text-3xl font-bold text-center" data-id="4">
+        <div class="text-center mb-8">
-                Login
+            <div
-            </h1>
+                class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl shadow-lg mb-4">
-            {% if error %}
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
-            <h2 class="text-2xl font-bold text-center text-red-500" data-id="4">
+                    stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                {{ error }}
+                    <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
-            </h2>
+                </svg>
-            {% endif %}
             </div>
-        <form method="POST" class="p-4 space-y-4" data-id="5">
+            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            <div class="space-y-2" data-id="6">
+                Welcome Back
-                <label
+            </h1>
-                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {% if error %}text-red-500 {% endif %}"
+            <p class="text-gray-600 dark:text-gray-400">Sign in to your Function account</p>
-                    for="username" data-id="7">
+        </div>
+
+        <!-- Login Card -->
+        <div
+            class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            {% if error %}
+            <div class="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-4">
+                <div class="flex items-center text-red-700 dark:text-red-300">
+                    <svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <span class="text-sm font-medium">{{ error }}</span>
+                </div>
+            </div>
+            {% endif %}
+
+            <form method="POST" class="p-8 space-y-6">
+                <!-- Username Field -->
+                <div class="space-y-2">
+                    <label for="username" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                         Username
                     </label>
-                <input
+                    <input id="username" name="username" type="text" required autocomplete="username"
-                    class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full {% if error %}border-red-500 {% endif %}"
+                        class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 {% if error %}border-red-500 dark:border-red-500 focus:ring-red-500{% endif %}"
-                    name="username" placeholder="Enter your username" required="" data-id="8" type="text">
+                        placeholder="Enter your username">
                 </div>
-            <div class="space-y-2" data-id="9">
+
-                <label
+                <!-- Password Field -->
-                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {% if error %}text-red-500 {% endif %}"
+                <div class="space-y-2">
-                    for="password" data-id="10">Password</label>
+                    <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
-                <input
+                        Password
-                    class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full {% if error %}border-red-500 {% endif %}"
+                    </label>
-                    name="password" placeholder="Enter your password" required="" data-id="11" type="password">
+                    <input id="password" name="password" type="password" required autocomplete="current-password"
+                        class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 {% if error %}border-red-500 dark:border-red-500 focus:ring-red-500{% endif %}"
+                        placeholder="Enter your password">
                 </div>
-            <div class="flex justify-between items-center" data-id="12">
+
-                <a class="text-sm underline text-gray-500" data-id="13" href="#" rel="ugc">
+                <!-- Forgot Password Link -->
+                <div class="flex items-center justify-end">
+                    <a href="#"
+                        class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors">
                         Forgot password?
                     </a>
-                <button
-                    class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-6 py-2 bg-blue-500 text-white rounded-md"
-                    type="submit" data-id="14">
-                    Login
-                </button>
                 </div>
-            <hr class="my-4" data-id="15">
+
-            <div class="text-center" data-id="16">
+                <!-- Submit Button -->
-                <p class="text-gray-500" data-id="17">Don't have an account? <a class="underline text-blue-500"
+                <button type="submit"
-                        data-id="18" href="{{ url_for('auth.signup') }}" rel="ugc">Sign up</a>
+                    class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
+                    Sign In
+                </button>
+            </form>
+        </div>
+
+        <!-- Sign Up Link -->
+        <div class="mt-6 text-center">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                Don't have an account?
+                <a href="{{ url_for('auth.signup') }}"
+                    class="font-semibold text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors">
+                    Sign up for free
+                </a>
             </p>
         </div>
-        </form>
     </div>
 </div>
 

templates/signup.html

@@ -2,52 +2,83 @@
 
 {% block content %}
 
-<div class="w-full h-screen flex items-center justify-center" data-id="1">
+<div
-    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4 bg-gray-100" data-id="2"
+    class="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 px-4 py-12">
-        data-v0-t="card">
+    <div class="w-full max-w-md">
-        <div class="flex flex-col space-y-1.5 p-6" data-id="3">
+        <!-- Logo/Branding Section -->
-            <h1 class="text-3xl font-bold text-center" data-id="4">
+        <div class="text-center mb-8">
-                Sign up
+            <div
-            </h1>
+                class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl shadow-lg mb-4">
-            {% if error %}
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
-            <h2 class="text-2xl font-bold text-center text-red-500" data-id="4">
+                    stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                {{ error }}
+                    <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
-            </h2>
+                </svg>
-            {% endif %}
             </div>
-        <form method="POST" class="p-4 space-y-4" data-id="5">
+            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            <div class="space-y-2" data-id="6">
+                Create Account
-                <label
+            </h1>
-                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {% if error %}text-red-500 {% endif %}"
+            <p class="text-gray-600 dark:text-gray-400">Get started with Function today</p>
-                    for="username" data-id="7">
+        </div>
+
+        <!-- Signup Card -->
+        <div
+            class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            {% if error %}
+            <div class="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-4">
+                <div class="flex items-center text-red-700 dark:text-red-300">
+                    <svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <span class="text-sm font-medium">{{ error }}</span>
+                </div>
+            </div>
+            {% endif %}
+
+            <form method="POST" class="p-8 space-y-6">
+                <!-- Username Field -->
+                <div class="space-y-2">
+                    <label for="username" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                         Username
                     </label>
-                <input
+                    <input id="username" name="username" type="text" required autocomplete="username"
-                    class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full {% if error %}border-red-500 {% endif %}"
+                        class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 {% if error %}border-red-500 dark:border-red-500 focus:ring-red-500{% endif %}"
-                    name="username" placeholder="Enter your username" required="" data-id="8" type="text">
+                        placeholder="Choose a username">
                 </div>
-            <div class="space-y-2" data-id="9">
+
-                <label
+                <!-- Password Field -->
-                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {% if error %}text-red-500 {% endif %}"
+                <div class="space-y-2">
-                    for="password" data-id="10">Password</label>
+                    <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
-                <input
+                        Password
-                    class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full {% if error %}border-red-500 {% endif %}"
+                    </label>
-                    name="password" placeholder="Enter your password" required="" data-id="11" type="password">
+                    <input id="password" name="password" type="password" required autocomplete="new-password"
+                        class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 {% if error %}border-red-500 dark:border-red-500 focus:ring-red-500{% endif %}"
+                        placeholder="Create a strong password">
                 </div>
-            <div class="flex justify-between items-center" data-id="12">
+
-                <button
+                <!-- Submit Button -->
-                    class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-6 py-2 bg-blue-500 text-white rounded-md"
+                <button type="submit"
-                    type="submit" data-id="14">
+                    class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
-                    Sign up
+                    Create Account
                 </button>
+
+                <!-- Terms & Privacy (Optional) -->
+                <p class="text-xs text-center text-gray-500 dark:text-gray-400">
+                    By creating an account, you agree to our Terms of Service and Privacy Policy
+                </p>
+            </form>
         </div>
-            <hr class="my-4" data-id="15">
+
-            <div class="text-center" data-id="16">
+        <!-- Login Link -->
-                <p class="text-gray-500" data-id="17">Already have an accont? <a class="underline text-blue-500"
+        <div class="mt-6 text-center">
-                        data-id="18" href="{{ url_for('auth.login') }}" rel="ugc">Login</a>
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                Already have an account?
+                <a href="{{ url_for('auth.login') }}"
+                    class="font-semibold text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors">
+                    Sign in
+                </a>
             </p>
         </div>
-        </form>
     </div>
 </div>