sharang/certifai
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Activity

feat: added oauth based login and registration (#1)

Browse Source 
Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
Sharang Parnerkar
2026-02-18 09:21:46 +00:00
parent b8aad0e23c
commit 1072770d11
36 changed files with 7420 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.dockerignore Normal file
View File

@@ -0,0 +1,6 @@
**/target
**/dist
LICENSES
LICENSE
temp
README.md

9
.env.example Normal file
View File

@@ -0,0 +1,9 @@
# Keycloak Configuration (frontend public client)
KEYCLOAK_URL=http://localhost:8080
KEYCLOAK_REALM=certifai
KEYCLOAK_CLIENT_ID=certifai-dashboard
# Application Configuration
APP_URL=http://localhost:8000
REDIRECT_URI=http://localhost:8000/auth/callback
ALLOWED_ORIGINS=http://localhost:8000

16
.gitignore vendored Normal file
View File

@@ -0,0 +1,16 @@
# Generated by Cargo
# will have compiled files and executables
/target
.DS_Store
# These are backup files generated by rustfmt
**/*.rs.bk
# Environment variables and secrets
.env
# Logs
*.log
# Keycloak data
keycloak/

265
AGENTS.md Normal file
View File

@@ -0,0 +1,265 @@
You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone
Provide concise code examples with detailed descriptions
# Dioxus Dependency
You can add Dioxus to your `Cargo.toml` like this:
```toml
[dependencies]
dioxus = { version = "0.7.1" }
[features]
default = ["web", "webview", "server"]
web = ["dioxus/web"]
webview = ["dioxus/desktop"]
server = ["dioxus/server"]
```
# Launching your application
You need to create a main function that sets up the Dioxus runtime and mounts your root component.
```rust
use dioxus::prelude::*;
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
rsx! { "Hello, Dioxus!" }
}
```
Then serve with `dx serve`:
```sh
curl -sSL http://dioxus.dev/install.sh | sh
dx serve
```
# UI with RSX
```rust
rsx! {
div {
class: "container", // Attribute
color: "red", // Inline styles
width: if condition { "100%" }, // Conditional attributes
"Hello, Dioxus!"
}
// Prefer loops over iterators
for i in 0..5 {
div { "{i}" } // use elements or components directly in loops
}
if condition {
div { "Condition is true!" } // use elements or components directly in conditionals
}
{children} // Expressions are wrapped in brace
{(0..5).map(|i| rsx! { span { "Item {i}" } })} // Iterators must be wrapped in braces
}
```
# Assets
The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project.
```rust
rsx! {
img {
src: asset!("/assets/image.png"),
alt: "An image",
}
}
```
## Styles
The `document::Stylesheet` component will inject the stylesheet into the `<head>` of the document
```rust
rsx! {
document::Stylesheet {
href: asset!("/assets/styles.css"),
}
}
```
# Components
Components are the building blocks of apps
* Component are functions annotated with the `#[component]` macro.
* The function name must start with a capital letter or contain an underscore.
* A component re-renders only under two conditions:
1. Its props change (as determined by `PartialEq`).
2. An internal reactive state it depends on is updated.
```rust
#[component]
fn Input(mut value: Signal<String>) -> Element {
rsx! {
input {
value,
oninput: move |e| {
*value.write() = e.value();
},
onkeydown: move |e| {
if e.key() == Key::Enter {
value.write().clear();
}
},
}
}
}
```
Each component accepts function arguments (props)
* Props must be owned values, not references. Use `String` and `Vec<T>` instead of `&str` or `&[T]`.
* Props must implement `PartialEq` and `Clone`.
* To make props reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` props will automatically re-run when the prop changes.
# State
A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun.
## Local State
The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value.
Use `use_memo` to create a memoized value that recalculates when its dependencies change. Memos are useful for expensive calculations that you don't want to repeat unnecessarily.
```rust
#[component]
fn Counter() -> Element {
let mut count = use_signal(|| 0);
let mut doubled = use_memo(move || count() * 2); // doubled will re-run when count changes because it reads the signal
rsx! {
h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal
h2 { "Doubled: {doubled}" }
button {
onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter
"Increment"
}
button {
onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal
"Increment with with_mut"
}
}
}
```
## Context API
The Context API allows you to share state down the component tree. A parent provides the state using `use_context_provider`, and any child can access it with `use_context`
```rust
#[component]
fn App() -> Element {
let mut theme = use_signal(|| "light".to_string());
use_context_provider(|| theme); // Provide a type to children
rsx! { Child {} }
}
#[component]
fn Child() -> Element {
let theme = use_context::<Signal<String>>(); // Consume the same type
rsx! {
div {
"Current theme: {theme}"
}
}
}
```
# Async
For state that depends on an asynchronous operation (like a network request), Dioxus provides a hook called `use_resource`. This hook manages the lifecycle of the async task and provides the result to your component.
* The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated
* The `Resource` object returned can be in several states when read:
1. `None` if the resource is still loading
2. `Some(value)` if the resource has successfully loaded
```rust
let mut dog = use_resource(move || async move {
// api request
});
match dog() {
Some(dog_info) => rsx! { Dog { dog_info } },
None => rsx! { "Loading..." },
}
```
# Routing
All possible routes are defined in a single Rust `enum` that derives `Routable`. Each variant represents a route and is annotated with `#[route("/path")]`. Dynamic Segments can capture parts of the URL path as parameters by using `:name` in the route string. These become fields in the enum variant.
The `Router<Route> {}` component is the entry point that manages rendering the correct component for the current URL.
You can use the `#[layout(NavBar)]` to create a layout shared between pages and place an `Outlet<Route> {}` inside your layout component. The child routes will be rendered in the outlet.
```rust
#[derive(Routable, Clone, PartialEq)]
enum Route {
#[layout(NavBar)] // This will use NavBar as the layout for all routes
#[route("/")]
Home {},
#[route("/blog/:id")] // Dynamic segment
BlogPost { id: i32 },
}
#[component]
fn NavBar() -> Element {
rsx! {
a { href: "/", "Home" }
Outlet<Route> {} // Renders Home or BlogPost
}
}
#[component]
fn App() -> Element {
rsx! { Router::<Route> {} }
}
```
```toml
dioxus = { version = "0.7.1", features = ["router"] }
```
# Fullstack
Fullstack enables server rendering and ipc calls. It uses Cargo features (`server` and a client feature like `web`) to split the code into a server and client binaries.
```toml
dioxus = { version = "0.7.1", features = ["fullstack"] }
```
## Server Functions
Use the `#[post]` / `#[get]` macros to define an `async` function that will only run on the server. On the server, this macro generates an API endpoint. On the client, it generates a function that makes an HTTP request to that endpoint.
```rust
#[post("/api/double/:path/&query")]
async fn double_server(number: i32, path: String, query: i32) -> Result<i32, ServerFnError> {
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
Ok(number * 2)
}
```
## Hydration
Hydration is the process of making a server-rendered HTML page interactive on the client. The server sends the initial HTML, and then the client-side runs, attaches event listeners, and takes control of future rendering.
### Errors
The initial UI rendered by the component on the client must be identical to the UI rendered on the server.
* Use the `use_server_future` hook instead of `use_resource`. It runs the future on the server, serializes the result, and sends it to the client, ensuring the client has the data immediately for its first render.
* Any code that relies on browser-specific APIs (like accessing `localStorage`) must be run *after* hydration. Place this code inside a `use_effect` hook.

19
CLAUDE.md
View File

@@ -241,19 +241,12 @@ The SaaS application dashboard is the landing page for the company admin to view
All features are detailed and described under the features folder in clear markdown instructions which are valid for both human and AI code developers.
## Clean architecture
For the backend development, clean architecture is preferred. SOLID principles MUST be strictly followed. Clearly defined types, traits and their implementations MUST be used when generating new code. Individual files MUST be created if a file is exceeding more than 160 lines of code excluding any tests. The folder structure for clean architecure SHOULD BE as:
- service1/
- Infrastructure/
- Domain/
- Application/
- Presentation/
- service2/
- Infrastructure/
- Domain/
- Application/
- Presentation/
With each major service split in separate folders.
## Code structure
The following folder structure is maintained for separation of concerns:
- src/components/*.rs : All components that are required to be rendered are placed here. These are frontend only, reusable components that are specific for the application.
- src/infrastructure/*.rs : All backend related functions from the dioxus fullstack are placed here. This entire module is behind the feature "server".
- src/models/*.rs : All data models for use by the frontend pages and components.
- src/pages/*.rs : All view pages for the website, which utilize components, models to render the entire page. The pages are more towards the user as they group user-centered functions together in one view.
## Git Workflow

5492
Cargo.lock generated Normal file
View File

File diff suppressed because it is too large Load Diff

94
Cargo.toml Normal file
View File

@@ -0,0 +1,94 @@
[package]
name = "dashboard"
version = "0.1.0"
authors = ["Sharang Parnerkar <parnerkarsharang@gmail.com>"]
edition = "2021"
default-run = "dashboard"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lints.clippy]
# We avoid panicking behavior in our code.
# In some places where panicking is desired, such as in tests,
# we can allow it by using #[allow(clippy::unwrap_used, clippy::expect_used].
unwrap_used = "deny"
expect_used = "deny"
[dependencies]
dioxus = { version = "=0.7.3", features = ["fullstack", "router"] }
dioxus-sdk = { version = "0.7", default-features = false, features = [
"time",
"storage",
] }
axum = { version = "0.8.8", optional = true }
chrono = { version = "0.4" }
tower-http = { version = "0.6.2", features = [
"cors",
"trace",
], optional = true }
tokio = { version = "1.4", features = ["time"] }
serde = { version = "1.0.210", features = ["derive"] }
thiserror = { version = "2.0", default-features = false }
dotenvy = { version = "0.15", default-features = false }
mongodb = { version = "3.2", default-features = false, features = [
"rustls-tls",
"compat-3-0-0",
], optional = true }
futures = { version = "0.3.31", default-features = false }
reqwest = { version = "0.13", optional = true, features = ["json", "form"] }
tower-sessions = { version = "0.15", default-features = false, features = [
"axum-core",
"memory-store",
"signed",
], optional = true }
time = { version = "0.3", default-features = false, optional = true }
rand = { version = "0.10", optional = true }
petname = { version = "2.0", default-features = false, features = [
"default-rng",
"default-words",
], optional = true }
async-stripe = { version = "0.41", optional = true, default-features = false, features = [
"runtime-tokio-hyper-rustls-webpki",
"webhook-events",
"billing",
"checkout",
"products",
"connect",
"stream",
] }
secrecy = { version = "0.10", default-features = false, optional = true }
serde_json = { version = "1.0.133", default-features = false }
maud = { version = "0.27", default-features = false }
url = { version = "2.5.4", default-features = false, optional = true }
web-sys = { version = "0.3", optional = true, features = [
"Clipboard",
"Navigator",
] }
tracing = "0.1.40"
# Debug
dioxus-logger = "=0.7.3"
dioxus-cli-config = "=0.7.3"
dioxus-free-icons = { version = "0.10", features = [
"bootstrap",
"font-awesome-solid",
] }
[features]
# default = ["web"]
web = ["dioxus/web", "dep:reqwest", "dep:web-sys"]
server = [
"dioxus/server",
"dep:axum",
"dep:mongodb",
"dep:reqwest",
"dep:tower-sessions",
"dep:tower-http",
"dep:time",
"dep:rand",
"dep:url",
]
[[bin]]
name = "dashboard"
path = "bin/main.rs"

39
Dioxus.toml Normal file
View File

@@ -0,0 +1,39 @@
[application]
# App (Project) Name
name = "dashboard"
# Dioxus App Default Platform
default_platform = "web"
# resource (assets) file folder
asset_dir = "assets"
[web.app]
# HTML title tag content
title = "GenAI Dashboard"
# include `assets` in web platform
[web.resource]
# Additional CSS style files
style = []
# Additional JavaScript files
script = []
[web.resource.dev]
# Javascript code file
# serve: [dev-server] only
script = []
[web.watcher]
# when watcher trigger, regenerate the `index.html`
reload_html = true
# which files or dirs will be watcher monitoring
watch_path = ["src", "assets"]

20
README.md
View File

@@ -23,19 +23,13 @@ The SaaS application dashboard is the landing page for the company admin to view
All features are detailed and described under the features folder in clear markdown instructions which are valid for both human and AI code developers.
## Clean architecture
For the backend development, clean architecture is preferred. SOLID principles MUST be strictly followed. Clearly defined types, traits and their implementations MUST be used when generating new code. Individual files MUST be created if a file is exceeding more than 160 lines of code excluding any tests. The folder structure for clean architecure SHOULD BE as:
- service1/
- Infrastructure/
- Domain/
- Application/
- Presentation/
- service2/
- Infrastructure/
- Domain/
- Application/
- Presentation/
With each major service split in separate folders.
## Code structure
The following folder structure is maintained for separation of concerns:
- src/components/*.rs : All components that are required to be rendered are placed here. These are frontend only, reusable components that are specific for the application.
- src/infrastructure/*.rs : All backend related functions from the dioxus fullstack are placed here. This entire module is behind the feature "server".
- src/models/*.rs : All data models for use by the frontend pages and components.
- src/pages/*.rs : All view pages for the website, which utilize components, models to render the entire page. The pages are more towards the user as they group user-centered functions together in one view.
## Git Workflow

BIN
assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

20
assets/header.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

213
assets/main.css Normal file
View File

@@ -0,0 +1,213 @@
/* ===== Fonts ===== */
body {
font-family: 'Inter', sans-serif;
background-color: #0f1116;
color: #e2e8f0;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Space Grotesk', sans-serif;
}
/* ===== App Shell ===== */
.app-shell {
display: flex;
min-height: 100vh;
}
/* ===== Sidebar ===== */
.sidebar {
width: 260px;
min-width: 260px;
background-color: #0a0c10;
border-right: 1px solid #1e222d;
display: flex;
flex-direction: column;
height: 100vh;
position: sticky;
top: 0;
}
/* -- Sidebar Header -- */
.sidebar-header {
display: flex;
align-items: center;
gap: 12px;
padding: 24px 20px 20px;
border-bottom: 1px solid #1e222d;
}
.avatar-circle {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #91a4d2, #6d85c6);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-initials {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0a0c10;
}
.sidebar-email {
font-size: 13px;
color: #8892a8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* -- Sidebar Navigation -- */
.sidebar-nav {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px 10px;
gap: 2px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 8px;
color: #8892a8;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-link:hover {
background-color: #1e222d;
color: #e2e8f0;
}
.sidebar-link.active {
background-color: rgba(145, 164, 210, 0.12);
color: #91a4d2;
}
/* -- Sidebar Logout -- */
.sidebar-logout {
padding: 4px 10px;
border-top: 1px solid #1e222d;
}
.logout-btn {
color: #8892a8;
}
.logout-btn:hover {
color: #f87171;
background-color: rgba(248, 113, 113, 0.08);
}
/* -- Sidebar Footer -- */
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid #1e222d;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.sidebar-social {
display: flex;
gap: 16px;
}
.social-link {
color: #5a6478;
transition: color 0.15s ease;
text-decoration: none;
}
.social-link:hover {
color: #91a4d2;
}
.sidebar-version {
font-size: 11px;
color: #3d4556;
font-family: 'Inter', monospace;
}
/* ===== Main Content ===== */
.main-content {
flex: 1;
overflow-y: auto;
padding: 40px 48px;
min-height: 100vh;
}
/* ===== Overview Page ===== */
.overview-page {
max-width: 960px;
}
.overview-heading {
font-size: 28px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 32px;
}
/* ===== Dashboard Grid ===== */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
/* ===== Dashboard Card ===== */
.dashboard-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
background-color: #1e222d;
border: 1px solid #2a2f3d;
border-radius: 12px;
text-decoration: none;
color: #e2e8f0;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-card:hover {
border-color: #91a4d2;
box-shadow: 0 0 20px rgba(145, 164, 210, 0.10);
}
.card-icon {
color: #91a4d2;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #f1f5f9;
margin: 0;
}
.card-description {
font-size: 14px;
color: #8892a8;
margin: 0;
}

279
assets/tailwind.css Normal file
View File

@@ -0,0 +1,279 @@
/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--spacing: 0.25rem;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
}
@layer utilities {
.visible {
visibility: visible;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.container {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.table {
display: table;
}
.border-collapse {
border-collapse: collapse;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.resize {
resize: both;
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
.text-center {
text-align: center;
}
.underline {
text-decoration-line: underline;
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-border-style: solid;
--tw-outline-style: solid;
}
}
}

23
bin/main.rs Normal file
View File

@@ -0,0 +1,23 @@
#![allow(non_snake_case)]
#[allow(clippy::expect_used)]
fn main() {
// Init logger
dioxus_logger::init(tracing::Level::DEBUG).expect("Failed to init logger");
#[cfg(feature = "web")]
{
tracing::info!("Starting app...");
// Hydrate the application on the client
dioxus::web::launch::launch_cfg(dashboard::App, dioxus::web::Config::new().hydrate(true));
}
#[cfg(feature = "server")]
{
dashboard::infrastructure::server_start(dashboard::App)
.map_err(|e| {
tracing::error!("Unable to start server: {e}");
})
.expect("Server start failed")
}
}

17
build.rs Normal file
View File

@@ -0,0 +1,17 @@
#[allow(clippy::expect_used)]
fn main() -> Result<(), Box<dyn std::error::Error>> {
use std::process::Command;
println!("cargo:rerun-if-changed=./styles/input.css");
Command::new("bunx")
.args([
"@tailwindcss/cli",
"-i",
"./styles/input.css",
"-o",
"./assets/tailwind.css",
])
.status()
.expect("could not run tailwind");
Ok(())
}

8
clippy.toml Normal file
View File

@@ -0,0 +1,8 @@
await-holding-invalid-types = [
"generational_box::GenerationalRef",
{ path = "generational_box::GenerationalRef", reason = "Reads should not be held over an await point. This will cause any writes to fail while the await is pending since the read borrow is still active." },
"generational_box::GenerationalRefMut",
{ path = "generational_box::GenerationalRefMut", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
"dioxus_signals::WriteLock",
{ path = "dioxus_signals::WriteLock", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
]

31
docker-compose.yml Normal file
View File

@@ -0,0 +1,31 @@
version: '3.8'
services:
keycloak:
image: quay.io/keycloak/keycloak:26.0
container_name: certifai-keycloak
environment:
KEYCLOAK_ADMIN: admin
KEYCLOAK_ADMIN_PASSWORD: admin
KC_DB: dev-mem
ports:
- "8080:8080"
command:
- start-dev
- --import-realm
volumes:
- ./keycloak/realm-export.json:/opt/keycloak/data/import/realm-export.json:ro
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:8080/health/ready"]
interval: 10s
timeout: 5s
retries: 5
mongo:
image: mongo:latest
restart: unless-stopped
ports:
- 27017:27017
environment:
MONGO_INITDB_ROOT_USERNAME: root
MONGO_INITDB_ROOT_PASSWORD: example

9
features/CAI-1.md Normal file
View File

@@ -0,0 +1,9 @@
# CAI-1
This feature creates a new login/registration page for the GenAI admin dashboard. The user management is provided by Keycloak, which also serves the login/registration flow. The dioxus app should detect if a user is already logged-in or not, and if not, redirect the user to the keycloak landing page and after successful login, capture the user's access token in a state and save a session state.
Steps to follow:
- Create a docker-compose file for hosting a local keycloak and create a realm for testing and a client for Oauth.
- Setup the environment variables using .env. Fill the environment with keycloak URL, realm, client ID and secret.
- Create a user state in Dioxus which manages the session and the access token. Add other user identifying information like email address to the state.
- Modify dioxus to check the state and load the correct URL based on the state.

3
features/CAI-2.md Normal file
View File

@@ -0,0 +1,3 @@
# CERTifAI 2
This feature defines the types for database as well as the API between the dashboard backend and frontend.

46
src/app.rs Normal file
View File

@@ -0,0 +1,46 @@
use crate::{components::*, pages::*};
use dioxus::prelude::*;
/// Application routes.
///
/// `OverviewPage` is wrapped in the `AppShell` layout so the sidebar
/// renders around every authenticated page. The `/login` route remains
/// outside the shell (unauthenticated).
#[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
pub enum Route {
#[layout(AppShell)]
#[route("/")]
OverviewPage {},
#[end_layout]
#[route("/login?:redirect_url")]
Login { redirect_url: String },
}
const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
/// Google Fonts URL for Inter (body) and Space Grotesk (headings).
const GOOGLE_FONTS: &str = "https://fonts.googleapis.com/css2?\
family=Inter:wght@400;500;600&\
family=Space+Grotesk:wght@500;600;700&\
display=swap";
/// Root application component. Loads global assets and mounts the router.
#[component]
pub fn App() -> Element {
rsx! {
document::Link { rel: "icon", href: FAVICON }
document::Link { rel: "preconnect", href: "https://fonts.googleapis.com" }
document::Link {
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossorigin: "anonymous",
}
document::Link { rel: "stylesheet", href: GOOGLE_FONTS }
document::Link { rel: "stylesheet", href: MAIN_CSS }
document::Link { rel: "stylesheet", href: TAILWIND_CSS }
Router::<Route> {}
}
}

23
src/components/app_shell.rs Normal file
View File

@@ -0,0 +1,23 @@
use dioxus::prelude::*;
use crate::components::sidebar::Sidebar;
use crate::Route;
/// Application shell layout that wraps all authenticated pages.
///
/// Renders a fixed sidebar on the left and the active child route
/// in the scrollable main content area via `Outlet`.
#[component]
pub fn AppShell() -> Element {
rsx! {
div { class: "app-shell",
Sidebar {
email: "user@example.com".to_string(),
avatar_url: String::new(),
}
main { class: "main-content",
Outlet::<Route> {}
}
}
}
}

25
src/components/card.rs Normal file
View File

@@ -0,0 +1,25 @@
use dioxus::prelude::*;
/// Reusable dashboard card with icon, title, description and click-through link.
///
/// # Arguments
///
/// * `title` - Card heading text.
/// * `description` - Short description shown beneath the title.
/// * `href` - URL the card links to when clicked.
/// * `icon` - Element rendered as the card icon (typically a `dioxus_free_icons::Icon`).
#[component]
pub fn DashboardCard(
title: String,
description: String,
href: String,
icon: Element,
) -> Element {
rsx! {
a { class: "dashboard-card", href: "{href}",
div { class: "card-icon", {icon} }
h3 { class: "card-title", "{title}" }
p { class: "card-description", "{description}" }
}
}
}

15
src/components/login.rs Normal file
View File

@@ -0,0 +1,15 @@
use crate::Route;
use dioxus::prelude::*;
#[component]
pub fn Login(redirect_url: String) -> Element {
let navigator = use_navigator();
use_effect(move || {
let target = format!("/auth?redirect_url={}", redirect_url);
navigator.push(NavigationTarget::<Route>::External(target));
});
rsx!(
div { class: "text-center p-6", "Redirecting to secure login page…" }
)
}

8
src/components/mod.rs Normal file
View File

@@ -0,0 +1,8 @@
mod app_shell;
mod card;
mod login;
pub mod sidebar;
pub use app_shell::*;
pub use card::*;
pub use login::*;

154
src/components/sidebar.rs Normal file
View File

@@ -0,0 +1,154 @@
use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::{
BsBoxArrowRight, BsFileEarmarkText, BsGear, BsGithub, BsGrid,
BsHouseDoor, BsRobot,
};
use dioxus_free_icons::icons::fa_solid_icons::FaCubes;
use dioxus_free_icons::Icon;
use crate::Route;
/// Navigation entry for the sidebar.
struct NavItem {
label: &'static str,
route: Route,
/// Bootstrap icon element rendered beside the label.
icon: Element,
}
/// Fixed left sidebar containing header, navigation, logout, and footer.
///
/// # Arguments
///
/// * `email` - Email address displayed beneath the avatar placeholder.
/// * `avatar_url` - URL for the avatar image (unused placeholder for now).
#[component]
pub fn Sidebar(email: String, avatar_url: String) -> Element {
let nav_items: Vec<NavItem> = vec![
NavItem {
label: "Overview",
route: Route::OverviewPage {},
icon: rsx! { Icon { icon: BsHouseDoor, width: 18, height: 18 } },
},
NavItem {
label: "Documentation",
route: Route::OverviewPage {},
icon: rsx! { Icon { icon: BsFileEarmarkText, width: 18, height: 18 } },
},
NavItem {
label: "Agents",
route: Route::OverviewPage {},
icon: rsx! { Icon { icon: BsRobot, width: 18, height: 18 } },
},
NavItem {
label: "Models",
route: Route::OverviewPage {},
icon: rsx! { Icon { icon: FaCubes, width: 18, height: 18 } },
},
NavItem {
label: "Settings",
route: Route::OverviewPage {},
icon: rsx! { Icon { icon: BsGear, width: 18, height: 18 } },
},
];
// Determine current path to highlight the active nav link.
let current_route = use_route::<Route>();
rsx! {
aside { class: "sidebar",
// -- Header: avatar circle + email --
SidebarHeader { email: email.clone(), avatar_url }
// -- Navigation links --
nav { class: "sidebar-nav",
for item in nav_items {
{
// Simple active check: highlight Overview only when on `/`.
let is_active = item.route == current_route;
let cls = if is_active {
"sidebar-link active"
} else {
"sidebar-link"
};
rsx! {
Link {
to: item.route,
class: cls,
{item.icon}
span { "{item.label}" }
}
}
}
}
}
// -- Logout button --
div { class: "sidebar-logout",
Link {
to: NavigationTarget::<Route>::External("/auth/logout".into()),
class: "sidebar-link logout-btn",
Icon { icon: BsBoxArrowRight, width: 18, height: 18 }
span { "Logout" }
}
}
// -- Footer: version + social links --
SidebarFooter {}
}
}
}
/// Avatar circle and email display at the top of the sidebar.
///
/// # Arguments
///
/// * `email` - User email to display.
/// * `avatar_url` - Placeholder for future avatar image URL.
#[component]
fn SidebarHeader(email: String, avatar_url: String) -> Element {
// Extract initials from email (first two chars before @).
let initials: String = email
.split('@')
.next()
.unwrap_or("U")
.chars()
.take(2)
.collect::<String>()
.to_uppercase();
rsx! {
div { class: "sidebar-header",
div { class: "avatar-circle",
span { class: "avatar-initials", "{initials}" }
}
p { class: "sidebar-email", "{email}" }
}
}
}
/// Footer section with version string and placeholder social links.
#[component]
fn SidebarFooter() -> Element {
let version = env!("CARGO_PKG_VERSION");
rsx! {
footer { class: "sidebar-footer",
div { class: "sidebar-social",
a {
href: "#",
class: "social-link",
title: "GitHub",
Icon { icon: BsGithub, width: 16, height: 16 }
}
a {
href: "#",
class: "social-link",
title: "Impressum",
Icon { icon: BsGrid, width: 16, height: 16 }
}
}
p { class: "sidebar-version", "v{version}" }
}
}
}

307
src/infrastructure/auth.rs Normal file
View File

@@ -0,0 +1,307 @@
use std::{
collections::HashMap,
sync::{Arc, RwLock},
};
use axum::{
extract::Query,
response::{IntoResponse, Redirect},
Extension,
};
use rand::RngExt;
use tower_sessions::Session;
use url::Url;
use crate::infrastructure::{state::User, Error, UserStateInner};
pub const LOGGED_IN_USER_SESS_KEY: &str = "logged-in-user";
/// In-memory store for pending OAuth states and their associated redirect
/// URLs. Keyed by the random state string. This avoids dependence on the
/// session cookie surviving the Keycloak redirect round-trip (the `dx serve`
/// proxy can drop `Set-Cookie` headers on 307 responses).
#[derive(Debug, Clone, Default)]
pub struct PendingOAuthStore(Arc<RwLock<HashMap<String, Option<String>>>>);
impl PendingOAuthStore {
/// Insert a pending state with an optional post-login redirect URL.
fn insert(&self, state: String, redirect_url: Option<String>) {
// RwLock::write only panics if the lock is poisoned, which
// indicates a prior panic -- propagating is acceptable here.
#[allow(clippy::expect_used)]
self.0
.write()
.expect("pending oauth store lock poisoned")
.insert(state, redirect_url);
}
/// Remove and return the redirect URL if the state was pending.
/// Returns `None` if the state was never stored (CSRF failure).
fn take(&self, state: &str) -> Option<Option<String>> {
#[allow(clippy::expect_used)]
self.0
.write()
.expect("pending oauth store lock poisoned")
.remove(state)
}
}
/// Configuration loaded from environment variables for Keycloak OAuth.
struct OAuthConfig {
keycloak_url: String,
realm: String,
client_id: String,
redirect_uri: String,
app_url: String,
}
impl OAuthConfig {
/// Load OAuth configuration from environment variables.
///
/// # Errors
///
/// Returns `Error::StateError` if any required env var is missing.
fn from_env() -> Result<Self, Error> {
dotenvy::dotenv().ok();
Ok(Self {
keycloak_url: std::env::var("KEYCLOAK_URL")
.map_err(|_| Error::StateError("KEYCLOAK_URL not set".into()))?,
realm: std::env::var("KEYCLOAK_REALM")
.map_err(|_| Error::StateError("KEYCLOAK_REALM not set".into()))?,
client_id: std::env::var("KEYCLOAK_CLIENT_ID")
.map_err(|_| Error::StateError("KEYCLOAK_CLIENT_ID not set".into()))?,
redirect_uri: std::env::var("REDIRECT_URI")
.map_err(|_| Error::StateError("REDIRECT_URI not set".into()))?,
app_url: std::env::var("APP_URL")
.map_err(|_| Error::StateError("APP_URL not set".into()))?,
})
}
/// Build the Keycloak OpenID Connect authorization endpoint URL.
fn auth_endpoint(&self) -> String {
format!(
"{}/realms/{}/protocol/openid-connect/auth",
self.keycloak_url, self.realm
)
}
/// Build the Keycloak OpenID Connect token endpoint URL.
fn token_endpoint(&self) -> String {
format!(
"{}/realms/{}/protocol/openid-connect/token",
self.keycloak_url, self.realm
)
}
/// Build the Keycloak OpenID Connect userinfo endpoint URL.
fn userinfo_endpoint(&self) -> String {
format!(
"{}/realms/{}/protocol/openid-connect/userinfo",
self.keycloak_url, self.realm
)
}
/// Build the Keycloak OpenID Connect end-session (logout) endpoint URL.
fn logout_endpoint(&self) -> String {
format!(
"{}/realms/{}/protocol/openid-connect/logout",
self.keycloak_url, self.realm
)
}
}
/// Generate a cryptographically random state string for CSRF protection.
fn generate_state() -> String {
let bytes: [u8; 32] = rand::rng().random();
// Encode as hex to produce a URL-safe string without padding.
bytes.iter().fold(String::with_capacity(64), |mut acc, b| {
use std::fmt::Write;
// write! on a String is infallible, safe to ignore the result.
let _ = write!(acc, "{b:02x}");
acc
})
}
/// Redirect the user to Keycloak's authorization page.
///
/// Generates a random CSRF state, stores it (along with the optional
/// redirect URL) in the server-side `PendingOAuthStore`, and redirects
/// the browser to Keycloak.
///
/// # Query Parameters
///
/// * `redirect_url` - Optional URL to redirect to after successful login.
///
/// # Errors
///
/// Returns `Error` if env vars are missing.
#[axum::debug_handler]
pub async fn auth_login(
Extension(pending): Extension<PendingOAuthStore>,
Query(params): Query<HashMap<String, String>>,
) -> Result<impl IntoResponse, Error> {
let config = OAuthConfig::from_env()?;
let state = generate_state();
let redirect_url = params.get("redirect_url").cloned();
pending.insert(state.clone(), redirect_url);
let mut url = Url::parse(&config.auth_endpoint())
.map_err(|e| Error::StateError(format!("invalid auth endpoint URL: {e}")))?;
url.query_pairs_mut()
.append_pair("client_id", &config.client_id)
.append_pair("redirect_uri", &config.redirect_uri)
.append_pair("response_type", "code")
.append_pair("scope", "openid profile email")
.append_pair("state", &state);
Ok(Redirect::temporary(url.as_str()))
}
/// Token endpoint response from Keycloak.
#[derive(serde::Deserialize)]
struct TokenResponse {
access_token: String,
refresh_token: Option<String>,
}
/// Userinfo endpoint response from Keycloak.
#[derive(serde::Deserialize)]
struct UserinfoResponse {
/// The subject identifier (unique user ID in Keycloak).
sub: String,
email: Option<String>,
/// Keycloak may include a picture/avatar URL via protocol mappers.
picture: Option<String>,
}
/// Handle the OAuth callback from Keycloak after the user authenticates.
///
/// Validates the CSRF state against the `PendingOAuthStore`, exchanges
/// the authorization code for tokens, fetches user info, stores the
/// logged-in user in the tower-sessions session, and redirects to the app.
///
/// # Query Parameters
///
/// * `code` - The authorization code from Keycloak.
/// * `state` - The CSRF state to verify against the pending store.
///
/// # Errors
///
/// Returns `Error` on CSRF mismatch, token exchange failure, or session issues.
#[axum::debug_handler]
pub async fn auth_callback(
session: Session,
Extension(pending): Extension<PendingOAuthStore>,
Query(params): Query<HashMap<String, String>>,
) -> Result<impl IntoResponse, Error> {
let config = OAuthConfig::from_env()?;
// --- CSRF validation via the in-memory pending store ---
let returned_state = params
.get("state")
.ok_or_else(|| Error::StateError("missing state parameter".into()))?;
let redirect_url = pending
.take(returned_state)
.ok_or_else(|| Error::StateError("unknown or expired oauth state".into()))?;
// --- Exchange code for tokens ---
let code = params
.get("code")
.ok_or_else(|| Error::StateError("missing code parameter".into()))?;
let client = reqwest::Client::new();
let token_resp = client
.post(&config.token_endpoint())
.form(&[
("grant_type", "authorization_code"),
("client_id", &config.client_id),
("redirect_uri", &config.redirect_uri),
("code", code),
])
.send()
.await
.map_err(|e| Error::StateError(format!("token request failed: {e}")))?;
if !token_resp.status().is_success() {
let body = token_resp.text().await.unwrap_or_default();
return Err(Error::StateError(format!("token exchange failed: {body}")));
}
let tokens: TokenResponse = token_resp
.json()
.await
.map_err(|e| Error::StateError(format!("token parse failed: {e}")))?;
// --- Fetch userinfo ---
let userinfo: UserinfoResponse = client
.get(&config.userinfo_endpoint())
.bearer_auth(&tokens.access_token)
.send()
.await
.map_err(|e| Error::StateError(format!("userinfo request failed: {e}")))?
.json()
.await
.map_err(|e| Error::StateError(format!("userinfo parse failed: {e}")))?;
// --- Build user state and persist in session ---
let user_state = UserStateInner {
sub: userinfo.sub,
access_token: tokens.access_token,
refresh_token: tokens.refresh_token.unwrap_or_default(),
user: User {
email: userinfo.email.unwrap_or_default(),
avatar_url: userinfo.picture.unwrap_or_default(),
},
};
set_login_session(session, user_state).await?;
let target = redirect_url
.filter(|u| !u.is_empty())
.unwrap_or_else(|| "/".into());
Ok(Redirect::temporary(&target))
}
/// Clear the user session and redirect to Keycloak's logout endpoint.
///
/// After Keycloak finishes its own logout flow it will redirect
/// back to the application root.
///
/// # Errors
///
/// Returns `Error` if env vars are missing or the session cannot be flushed.
#[axum::debug_handler]
pub async fn logout(session: Session) -> Result<impl IntoResponse, Error> {
let config = OAuthConfig::from_env()?;
// Flush all session data.
session
.flush()
.await
.map_err(|e| Error::StateError(format!("session flush failed: {e}")))?;
let mut url = Url::parse(&config.logout_endpoint())
.map_err(|e| Error::StateError(format!("invalid logout endpoint URL: {e}")))?;
url.query_pairs_mut()
.append_pair("client_id", &config.client_id)
.append_pair("post_logout_redirect_uri", &config.app_url);
Ok(Redirect::temporary(url.as_str()))
}
/// Persist user data into the session.
///
/// # Errors
///
/// Returns `Error` if the session store write fails.
pub async fn set_login_session(session: Session, data: UserStateInner) -> Result<(), Error> {
session
.insert(LOGGED_IN_USER_SESS_KEY, data)
.await
.map_err(|e| Error::StateError(format!("session insert failed: {e}")))
}

22
src/infrastructure/error.rs Normal file
View File

@@ -0,0 +1,22 @@
use axum::response::IntoResponse;
use reqwest::StatusCode;
#[derive(thiserror::Error, Debug)]
pub enum Error {
#[error("{0}")]
StateError(String),
#[error("IoError: {0}")]
IoError(#[from] std::io::Error),
}
impl IntoResponse for Error {
fn into_response(self) -> axum::response::Response {
let msg = self.to_string();
tracing::error!("Converting Error to Response: {msg}");
match self {
Self::StateError(e) => (StatusCode::INTERNAL_SERVER_ERROR, e).into_response(),
_ => (StatusCode::INTERNAL_SERVER_ERROR, "Unknown error").into_response(),
}
}
}

10
src/infrastructure/mod.rs Normal file
View File

@@ -0,0 +1,10 @@
#![cfg(feature = "server")]
mod auth;
mod error;
mod server;
mod state;
pub use auth::*;
pub use error::*;
pub use server::*;
pub use state::*;

56
src/infrastructure/server.rs Normal file
View File

@@ -0,0 +1,56 @@
use crate::infrastructure::{
auth_callback, auth_login, logout, PendingOAuthStore, UserState, UserStateInner,
};
use dioxus::prelude::*;
use axum::routing::get;
use axum::Extension;
use time::Duration;
use tower_sessions::{cookie::Key, MemoryStore, SessionManagerLayer};
/// Start the Axum server with Dioxus fullstack, session management,
/// and Keycloak OAuth routes.
///
/// # Errors
///
/// Returns `Error` if the tokio runtime or TCP listener fails to start.
pub fn server_start(app: fn() -> Element) -> Result<(), super::Error> {
tokio::runtime::Runtime::new()?.block_on(async move {
let state: UserState = UserStateInner {
access_token: "abcd".into(),
sub: "abcd".into(),
refresh_token: "abcd".into(),
..Default::default()
}
.into();
let key = Key::generate();
let store = MemoryStore::default();
let session = SessionManagerLayer::new(store)
.with_secure(false)
// Lax is required so the browser sends the session cookie
// on the redirect back from Keycloak (cross-origin GET).
// Strict would silently drop the cookie on that navigation.
.with_same_site(tower_sessions::cookie::SameSite::Lax)
.with_expiry(tower_sessions::Expiry::OnInactivity(Duration::hours(24)))
.with_signed(key);
let addr = dioxus_cli_config::fullstack_address_or_localhost();
let listener = tokio::net::TcpListener::bind(addr).await?;
// Layers are applied AFTER serve_dioxus_application so they
// wrap both the custom Axum routes AND the Dioxus server
// function routes (e.g. check_auth needs Session access).
let router = axum::Router::new()
.route("/auth", get(auth_login))
.route("/auth/callback", get(auth_callback))
.route("/logout", get(logout))
.serve_dioxus_application(ServeConfig::new(), app)
.layer(Extension(PendingOAuthStore::default()))
.layer(Extension(state))
.layer(session);
info!("Serving at {addr}");
axum::serve(listener, router.into_make_service()).await?;
Ok(())
})
}

61
src/infrastructure/state.rs Normal file
View File

@@ -0,0 +1,61 @@
use std::{
ops::{Deref, DerefMut},
sync::Arc,
};
use axum::extract::FromRequestParts;
use serde::{Deserialize, Serialize};
use tracing::debug;
#[derive(Debug, Clone)]
pub struct UserState(Arc<UserStateInner>);
impl Deref for UserState {
type Target = UserStateInner;
fn deref(&self) -> &Self::Target {
&self.0
}
}
impl From<UserStateInner> for UserState {
fn from(value: UserStateInner) -> Self {
Self(Arc::new(value))
}
}
#[derive(Debug, Clone, Serialize, Deserialize, Default)]
pub struct UserStateInner {
/// Subject in Oauth
pub sub: String,
/// Access Token
pub access_token: String,
/// Refresh Token
pub refresh_token: String,
/// User
pub user: User,
}
#[derive(Debug, Clone, Serialize, Deserialize, Default)]
pub struct User {
/// Email
pub email: String,
/// Avatar Url
pub avatar_url: String,
}
impl<S> FromRequestParts<S> for UserState
where
S: std::marker::Sync + std::marker::Send,
{
type Rejection = super::Error;
async fn from_request_parts(
parts: &mut axum::http::request::Parts,
_: &S,
) -> Result<Self, super::Error> {
parts
.extensions
.get::<UserState>()
.cloned()
.ok_or(super::Error::StateError("Unable to get extension".into()))
}
}

11
src/lib.rs Normal file
View File

@@ -0,0 +1,11 @@
mod app;
mod components;
pub mod infrastructure;
mod models;
mod pages;
pub use app::*;
pub use components::*;
pub use models::*;
pub use pages::*;

3
src/models/mod.rs Normal file
View File

@@ -0,0 +1,3 @@
mod user;
pub use user::*;

21
src/models/user.rs Normal file
View File

@@ -0,0 +1,21 @@
use serde::Deserialize;
use serde::Serialize;
#[derive(Debug, Clone, Default, Serialize, Deserialize)]
pub struct UserData {
pub name: String,
}
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct LoggedInState {
pub access_token: String,
pub email: String,
}
impl LoggedInState {
pub fn new(access_token: String, email: String) -> Self {
Self {
access_token,
email,
}
}
}

2
src/pages/mod.rs Normal file
View File

@@ -0,0 +1,2 @@
mod overview;
pub use overview::*;

118
src/pages/overview.rs Normal file
View File

@@ -0,0 +1,118 @@
use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::BsBook;
use dioxus_free_icons::icons::fa_solid_icons::{FaChartLine, FaCubes, FaGears};
use dioxus_free_icons::Icon;
use crate::components::DashboardCard;
use crate::Route;
/// Overview dashboard page rendered inside the `AppShell` layout.
///
/// Displays a welcome heading and a grid of quick-access cards
/// for the main GenAI platform tools.
#[component]
pub fn OverviewPage() -> Element {
// Check authentication status on mount via a server function.
let auth_check = use_resource(check_auth);
let navigator = use_navigator();
// Once the server responds, redirect unauthenticated users to /auth.
use_effect(move || {
if let Some(Ok(false)) = auth_check() {
navigator.push(NavigationTarget::<Route>::External(
"/auth?redirect_url=/".into(),
));
}
});
match auth_check() {
// Still waiting for the server to respond.
None => rsx! {},
// Not authenticated -- render nothing while the redirect fires.
Some(Ok(false)) => rsx! {},
// Authenticated -- render the overview dashboard.
Some(Ok(true)) => rsx! {
section { class: "overview-page",
h1 { class: "overview-heading", "GenAI Dashboard" }
div { class: "dashboard-grid",
DashboardCard {
title: "Documentation".to_string(),
description: "Guides & API Reference".to_string(),
href: "#".to_string(),
icon: rsx! {
Icon {
icon: BsBook,
width: 28,
height: 28,
}
},
}
DashboardCard {
title: "Langfuse".to_string(),
description: "Observability & Analytics".to_string(),
href: "#".to_string(),
icon: rsx! {
Icon {
icon: FaChartLine,
width: 28,
height: 28,
}
},
}
DashboardCard {
title: "Langchain".to_string(),
description: "Agent Framework".to_string(),
href: "#".to_string(),
icon: rsx! {
Icon {
icon: FaGears,
width: 28,
height: 28,
}
},
}
DashboardCard {
title: "Hugging Face".to_string(),
description: "Browse Models".to_string(),
href: "#".to_string(),
icon: rsx! {
Icon {
icon: FaCubes,
width: 28,
height: 28,
}
},
}
}
}
},
// Server error -- surface it so it is not silently swallowed.
Some(Err(err)) => rsx! {
p { "Error: {err}" }
},
}
}
/// Check whether the current request has an active logged-in session.
///
/// # Returns
///
/// `true` if the session contains a logged-in user, `false` otherwise.
///
/// # Errors
///
/// Returns `ServerFnError` if the session cannot be extracted from the request.
#[server]
async fn check_auth() -> Result<bool, ServerFnError> {
use crate::infrastructure::{UserStateInner, LOGGED_IN_USER_SESS_KEY};
use tower_sessions::Session;
// Extract the tower_sessions::Session from the Axum request.
let session: Session = FullstackContext::extract().await?;
let user: Option<UserStateInner> = session
.get(LOGGED_IN_USER_SESS_KEY)
.await
.map_err(|e| ServerFnError::new(format!("session read failed: {e}")))?;
Ok(user.is_some())
}

1
tailwind.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";