tailwindcss + wip auth

src/server/routes/auth.rs

@@ -0,0 +1,36 @@
+use axum::{
+    extract::State,
+    response::{Html, IntoResponse},
+    Form,
+};
+use axum_session_auth::AuthSession;
+use axum_session_surreal::SessionSurrealPool;
+use serde::{Deserialize, Serialize};
+use surrealdb::{engine::any::Any, Surreal};
+
+use crate::{error::ApiError, server::AppState, storage::types::user::User};
+
+#[derive(Deserialize, Serialize)]
+pub struct SignupParams {
+    pub email: String,
+    pub password: String,
+}
+
+pub async fn show_signup_form(State(state): State<AppState>) -> Html<String> {
+    let context = tera::Context::new();
+    let html = state
+        .tera
+        .render("auth/signup.html", &context)
+        .unwrap_or_else(|_| "<h1>Error rendering template</h1>".to_string());
+    Html(html)
+}
+
+pub async fn signup_handler(
+    State(state): State<AppState>,
+    auth: AuthSession<User, String, SessionSurrealPool<Any>, Surreal<Any>>,
+    Form(form): Form<SignupParams>,
+) -> Result<impl IntoResponse, ApiError> {
+    let user = User::create_new(form.email, form.password, &state.surreal_db_client).await?;
+    auth.login_user(user.id);
+    Ok(())
+}

src/server/routes/index.rs

@@ -1,13 +1,21 @@
 use axum::{extract::State, response::Html};
+use axum_session_auth::AuthSession;
+use axum_session_surreal::SessionSurrealPool;
 use serde_json::json;
+use surrealdb::{engine::any::Any, Surreal};
 use tera::Context;
 use tracing::info;
 
-use crate::{error::ApiError, server::AppState};
+use crate::{error::ApiError, server::AppState, storage::types::user::User};
 
-pub async fn index_handler(State(state): State<AppState>) -> Result<Html<String>, ApiError> {
+pub async fn index_handler(
+    State(state): State<AppState>,
+    auth: AuthSession<User, String, SessionSurrealPool<Any>, Surreal<Any>>,
+) -> Result<Html<String>, ApiError> {
     info!("Displaying index page");
 
+    info!("{:?}", auth.current_user);
+
     let queue_length = state.rabbitmq_consumer.get_queue_length().await?;
 
     let output = state

src/server/routes/mod.rs

@@ -1,3 +1,4 @@
+pub mod auth;
 pub mod file;
 pub mod index;
 pub mod ingress;

src/server/templates/auth/signup.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="min-h-screen bg-base-200 flex items-center justify-center">
+  <div class="card w-96 bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title text-2xl font-bold text-center mb-4">Sign Up</h2>
+
+      <form hx-post="/signup" hx-target="#signup-result" class="space-y-4">
+
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">Email</span>
+          </label>
+          <input type="text" name="email" placeholder="Enter username" class="input input-bordered w-full" required />
+        </div>
+
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">Password</span>
+          </label>
+          <input type="password" name="password" placeholder="Enter password" class="input input-bordered w-full"
+            required />
+        </div>
+
+        <div class="form-control mt-6">
+          <button class="btn btn-primary">
+            Sign Up
+            <span class="loading loading-spinner hidden"></span>
+          </button>
+        </div>
+
+        <div id="signup-result"></div>
+
+        <div class="divider">OR</div>
+
+        <div class="text-center text-sm">
+          Already have an account?
+          <a href="/login" class="link link-primary">Login</a>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- Add loading indicator when form is submitting -->
+<script>
+  document.body.addEventListener('htmx:beforeRequest', function (evt) {
+    if (evt.target.tagName === 'FORM') {
+      evt.target.querySelector('.loading-spinner').classList.remove('hidden');
+      evt.target.querySelector('button').disabled = true;
+    }
+  });
+
+  document.body.addEventListener('htmx:afterRequest', function (evt) {
+    if (evt.target.tagName === 'FORM') {
+      evt.target.querySelector('.loading-spinner').classList.add('hidden');
+      evt.target.querySelector('button').disabled = false;
+    }
+  });
+</script>
+{% endblock %}

src/server/templates/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 
 <head>
   <meta charset="UTF-8">
@@ -9,30 +9,25 @@
   <script src="https://unpkg.com/htmx.org@2.0.3"></script>
 </head>
 
-<body class="min-h-screen bg-gradient-to-br from-slate-50 to-purple-200">
+<body class="min-h-screen">
   <!-- Navbar -->
-  <nav class="bg-black/30 backdrop-blur-sm border-b border-white/10">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex items-center justify-between h-16">
-        <div class="flex items-center">
-          <a href="/" class="flex items-center">
-            <!-- You can add your logo here -->
-            <span class="text-2xl hover:text-white font-bold text-gray-300 bg-clip-text">
-              radien
-            </span>
-          </a>
-        </div>
-        <div class="flex items-center space-x-4">
-          <a href="/upload"
-            class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">
-            Upload
-          </a>
-          <a href="/files"
-            class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">
-            Files
-          </a>
-        </div>
-      </div>
+  <nav class="navbar bg-base-200">
+    <div class="flex-1">
+      <a class="btn btn-ghost text-xl">radien</a>
+    </div>
+    <div class="flex-none">
+      <ul class="menu menu-horizontal px-1">
+        <li><a>Link</a></li>
+        <li>
+          <details>
+            <summary>Parent</summary>
+            <ul class="bg-base-100 rounded-t-none p-2">
+              <li><a>Link 1</a></li>
+              <li><a>Link 2</a></li>
+            </ul>
+          </details>
+        </li>
+      </ul>
     </div>
   </nav>
 

src/server/templates/index.html

@@ -18,26 +18,13 @@
 
   <!-- Search Bar -->
   <div class="w-full max-w-2xl">
-    <input type="text" placeholder="Search..." name="query"
-      class="w-full px-6 py-4 bg-black/30 backdrop-blur-md text-white placeholder-gray-400 outline-none rounded-xl"
-      hx-get="/search" hx-target="#search-results">
+    <input type="text" placeholder="Enter your search query" class="input input-bordered w-full" name="query"
+      hx-get="/search" hx-target="#search-results" />
   </div>
 
   <!-- Search Results -->
   <div id="search-results" class="w-full max-w-2xl mt-4">
     <!-- Results will be populated here by HTMX -->
   </div>
-
-  <!-- Quick Actions -->
-  <div class="flex gap-4 mt-8">
-    <a href="/upload"
-      class="px-6 py-3 bg-blue-600/20 hover:bg-blue-600/30 border border-blue-500/30 rounded-lg text-blue-400 transition-all hover:scale-105">
-      Upload File
-    </a>
-    <a href="/files"
-      class="px-6 py-3 bg-purple-600/20 hover:bg-purple-600/30 border border-purple-500/30 rounded-lg text-purple-400 transition-all hover:scale-105">
-      Browse Files
-    </a>
-  </div>
 </div>
 {% endblock %}

src/server/templates/search_result.html

@@ -1,7 +1,9 @@
-<div class="h-auto min-h-36 w-full rounded-md bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 p-0.5">
-  <div class="flex flex-col h-full w-full items-center justify-center bg-gray-800 rounded-md p-4 space-y-3">
-    <p class="font-black text-white text-center break-words">{{result}}</p>
-    <hr class="w-full border-gray-600" />
-    <p class="font-black text-white text-center text-sm">{{references}}</p>
+<div class="border-">
+  <div class="chat chat-start">
+    <div class="chat-bubble">
+      {{result}}
+      <hr />
+      {{references}}
+    </div>
   </div>
 </div>