first commit

.gitignore

@@ -0,0 +1 @@
+/target

Cargo.toml

@@ -0,0 +1,24 @@
+[workspace]
+resolver = "2"
+members = [
+    "components",
+    "app", 
+    "server"
+]
+
+[workspace.dependencies]
+yew = "0.21"
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+web-sys = "0.3"
+js-sys = "0.3"
+gloo = "0.11"
+gloo-timers = "0.3"
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+getrandom = { version = "0.2", features = ["js"] }
+sha2 = "0.10"
+aes-gcm = "0.10"
+base64 = "0.22"
+hex = "0.4"
+rand = "0.8"

README.md

@@ -0,0 +1,180 @@
+# Self - Sovereign Entity Local Framework
+
+A peer-to-peer identity solution providing self-sovereign identity management tools and widgets. Built with Yew WASM for client-side functionality and Rust backend for email verification.
+
+## Architecture
+
+- **Components**: Reusable Yew components for identity management (registration, login, etc.)
+- **App**: Reference implementation using the components
+- **Server**: Backend for email verification and registration endpoints
+
+## Features
+
+### Registration Component
+
+- **Identity Collection**: Name and email input with validation
+- **Email Verification**: Server-sent events for real-time verification status
+- **Private Key Generation**: Secure secp256k1 key pair generation
+- **Client-side Encryption**: AES-256-GCM encryption of private keys with user password
+- **Key Confirmation**: Requires user to copy and paste private key to confirm backup
+- **Single-page Flow**: Progressive multi-step form without page navigation
+
+### Security Features
+
+- Private keys generated and encrypted entirely client-side
+- Password-based key derivation with salt and key stretching
+- Secure key confirmation process prevents accidental loss
+- No private keys transmitted to server
+
+## Quick Start
+
+### Prerequisites
+
+- Rust (latest stable)
+- `trunk` for WASM building: `cargo install trunk`
+- `wasm32-unknown-unknown` target: `rustup target add wasm32-unknown-unknown`
+
+### Running the Application
+
+1. **Start the backend server:**
+   ```bash
+   cd server
+   # Default port (8080)
+   cargo run
+   
+   # Custom port
+   cargo run -- --port 9001
+   ```
+
+2. **Start the frontend app:**
+   ```bash
+   cd app
+   # Default configuration (server: localhost:8080, port: 8000)
+   ./serve.sh
+   
+   # Custom server URL
+   ./serve.sh --server-url http://localhost:9001
+   
+   # Custom frontend port
+   ./serve.sh --port 8001
+   
+   # Both custom server and port
+   ./serve.sh --server-url http://localhost:9001 --port 8001
+   
+   # Using environment variables
+   SELF_SERVER_URL=http://localhost:9001 ./serve.sh
+   ```
+
+3. **Open your browser** to the displayed frontend URL
+
+### Email Verification Flow
+
+1. Enter name and email, proceed to verification step
+2. Click "Send Verification" - check server console for verification link
+3. Click the verification link in a new tab
+4. The registration form will automatically update when verified
+5. Continue with key generation
+
+### Key Generation Flow
+
+1. Click "Generate Keys" to create a new key pair
+2. Enter and confirm an encryption password (minimum 8 characters)
+3. Copy the private key using the "Copy" button
+4. Proceed to confirmation step
+5. Paste the private key to confirm you saved it
+6. Complete registration
+
+## Development
+
+### Project Structure
+
+```
+self/
+├── components/          # Reusable Yew components
+│   ├── src/
+│   │   ├── registration.rs  # Main registration component
+│   │   ├── crypto.rs       # Cryptographic utilities
+│   │   └── lib.rs         # Component exports
+│   └── Cargo.toml
+├── app/                # Reference application
+│   ├── src/lib.rs      # App implementation
+│   ├── index.html      # HTML template with Bootstrap
+│   ├── Trunk.toml      # Trunk configuration
+│   └── Cargo.toml
+├── server/             # Backend server
+│   ├── src/main.rs     # Axum server with SSE support
+│   └── Cargo.toml
+└── Cargo.toml          # Workspace configuration
+```
+
+### Using the Registration Component
+
+```rust
+use self_components::{Registration, RegistrationConfig};
+
+let config = RegistrationConfig {
+    server_url: "http://localhost:8080".to_string(),
+    app_name: "My App".to_string(),
+};
+
+let on_complete = Callback::from(|(email, public_key): (String, String)| {
+    // Handle successful registration
+    console::log!("User registered: {} with key: {}", email, public_key);
+});
+
+html! {
+    <Registration 
+        config={config}
+        on_complete={on_complete}
+    />
+}
+```
+
+### API Endpoints
+
+- `POST /api/send-verification` - Send email verification
+- `GET /api/verification-status/{email}` - SSE stream for verification status
+- `GET /api/verify/{token}` - Email verification callback
+- `POST /api/register` - Complete user registration
+- `GET /health` - Health check
+
+### Configuration Options
+
+**Backend Server:**
+- Command line: `cargo run -- --port 9001`
+- Default port: 8080
+
+**Frontend App:**
+- Command line: `./serve.sh --server-url http://localhost:9001 --port 8001`
+- Environment variables: `SELF_SERVER_URL`, `SELF_PORT`
+- Defaults: server `http://localhost:8080`, port `8000`
+
+**Registration Component:**
+The registration component accepts a `RegistrationConfig` with:
+- `server_url`: Backend server URL (configured via build-time environment variable)
+- `app_name`: Application name for branding
+
+The component emits completion events with `(email, public_key)` tuple for integration with your application.
+
+## Security Considerations
+
+- Private keys are generated using cryptographically secure random number generation
+- Keys are encrypted client-side before any storage
+- Password-based key derivation uses PBKDF2-like key stretching
+- No sensitive data is transmitted to the server except public keys
+- Email verification prevents unauthorized registrations
+
+## Production Deployment
+
+For production use:
+
+1. **Replace mock email sending** in server with actual SMTP integration
+2. **Add database storage** for user data and verification states
+3. **Implement proper secp256k1** key generation (current implementation is simplified)
+4. **Add rate limiting** for verification requests
+5. **Use HTTPS** for all communications
+6. **Configure CORS** appropriately for your domain
+
+## License
+
+This project is part of the Hero Code ecosystem for decentralized identity management.

app/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "self-app"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+self-components = { path = "../components" }
+yew = { workspace = true, features = ["csr"] }
+wasm-bindgen = { workspace = true }
+web-sys = { workspace = true }
+serde = { workspace = true }
+serde_json = { workspace = true }

app/Trunk.toml

@@ -0,0 +1,11 @@
+[build]
+target = "index.html"
+dist = "dist"
+
+[watch]
+watch = ["src", "../components/src"]
+
+[serve]
+address = "127.0.0.1"
+port = 8000
+open = false

app/build.sh

@@ -0,0 +1,52 @@
+#!/bin/bash
+
+# Default values
+SERVER_URL="http://localhost:8080"
+PORT="8000"
+
+# Parse command line arguments
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        --server-url)
+            SERVER_URL="$2"
+            shift 2
+            ;;
+        --port)
+            PORT="$2"
+            shift 2
+            ;;
+        -h|--help)
+            echo "Usage: $0 [OPTIONS]"
+            echo ""
+            echo "Options:"
+            echo "  --server-url URL    Backend server URL (default: http://localhost:8080)"
+            echo "  --port PORT         Frontend port (default: 8000)"
+            echo "  -h, --help          Show this help message"
+            exit 0
+            ;;
+        *)
+            echo "Unknown option: $1"
+            echo "Use --help for usage information"
+            exit 1
+            ;;
+    esac
+done
+
+# Check for environment variable override
+if [ ! -z "$SELF_SERVER_URL" ]; then
+    SERVER_URL="$SELF_SERVER_URL"
+fi
+
+if [ ! -z "$SELF_PORT" ]; then
+    PORT="$SELF_PORT"
+fi
+
+echo "🚀 Starting Self Identity App"
+echo "📡 Frontend port: $PORT"
+echo "🔗 Backend server: $SERVER_URL"
+
+# Export environment variable for the build
+export SERVER_URL="$SERVER_URL"
+
+# Start trunk serve with custom port
+trunk serve --port "$PORT"

app/dist/index.html

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Self - Sovereign Entity Local Framework</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
+    
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        .step-indicator {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+        }
+        
+        .step-circle {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #e9ecef;
+            border: 2px solid #dee2e6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #6c757d;
+            transition: all 0.3s ease;
+        }
+        
+        .step-indicator.active .step-circle {
+            background: #0d6efd;
+            border-color: #0d6efd;
+            color: white;
+        }
+        
+        .step-indicator.completed .step-circle {
+            background: #198754;
+            border-color: #198754;
+            color: white;
+        }
+        
+        .step-label {
+            margin-top: 0.5rem;
+            color: #6c757d;
+            font-weight: 500;
+        }
+        
+        .step-indicator.active .step-label {
+            color: #0d6efd;
+        }
+        
+        .step-indicator.completed .step-label {
+            color: #198754;
+        }
+        
+        .registration-container {
+            animation: fadeIn 0.5s ease-in;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .card {
+            transition: all 0.3s ease;
+        }
+        
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
+        }
+        
+        .btn {
+            transition: all 0.2s ease;
+        }
+        
+        .form-control:focus {
+            border-color: #0d6efd;
+            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+        }
+        
+        .alert {
+            border: none;
+            border-radius: 12px;
+        }
+        
+        .progress {
+            border-radius: 10px;
+        }
+        
+        .progress-bar {
+            border-radius: 10px;
+            transition: width 0.6s ease;
+        }
+    </style>
+<link rel="modulepreload" href="/self-app-ea91d85454088543.js" crossorigin="anonymous" integrity="sha384-LtoStOLfGudTKD5QLifQMTi8an1aLEqMXZ1KhnQoVNPjpl8QZyBepu9D2sElroww"><link rel="preload" href="/self-app-ea91d85454088543_bg.wasm" crossorigin="anonymous" integrity="sha384-Ms0zVmkquqd/C5lI7dHomP8BqQnZQkKfzd+xAPLra7T1Z8ZAH59VCtXnUxWzzriT" as="fetch" type="application/wasm"></head>
+<body>
+    <div id="app"></div>
+    
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+<script type="module">
+import init, * as bindings from '/self-app-ea91d85454088543.js';
+const wasm = await init({ module_or_path: '/self-app-ea91d85454088543_bg.wasm' });
+
+
+window.wasmBindings = bindings;
+
+
+dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
+
+</script><script>"use strict";
+
+(function () {
+
+    const address = '{{__TRUNK_ADDRESS__}}';
+    const base = '{{__TRUNK_WS_BASE__}}';
+    let protocol = '';
+    protocol =
+        protocol
+            ? protocol
+            : window.location.protocol === 'https:'
+                ? 'wss'
+                : 'ws';
+    const url = protocol + '://' + address + base + '.well-known/trunk/ws';
+
+    class Overlay {
+        constructor() {
+            // create an overlay
+            this._overlay = document.createElement("div");
+            const style = this._overlay.style;
+            style.height = "100vh";
+            style.width = "100vw";
+            style.position = "fixed";
+            style.top = "0";
+            style.left = "0";
+            style.backgroundColor = "rgba(222, 222, 222, 0.5)";
+            style.fontFamily = "sans-serif";
+            // not sure that's the right approach
+            style.zIndex = "1000000";
+            style.backdropFilter = "blur(1rem)";
+
+            const container = document.createElement("div");
+            // center it
+            container.style.position = "absolute";
+            container.style.top = "30%";
+            container.style.left = "15%";
+            container.style.maxWidth = "85%";
+
+            this._title = document.createElement("div");
+            this._title.innerText = "Build failure";
+            this._title.style.paddingBottom = "2rem";
+            this._title.style.fontSize = "2.5rem";
+
+            this._message = document.createElement("div");
+            this._message.style.whiteSpace = "pre-wrap";
+
+            const icon= document.createElement("div");
+            icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#dc3545" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>';
+            this._title.prepend(icon);
+
+            container.append(this._title, this._message);
+            this._overlay.append(container);
+
+            this._inject();
+            window.setInterval(() => {
+                this._inject();
+            }, 250);
+        }
+
+        set reason(reason) {
+            this._message.textContent = reason;
+        }
+
+        _inject() {
+            if (!this._overlay.isConnected) {
+                // prepend it
+                document.body?.prepend(this._overlay);
+            }
+        }
+
+    }
+
+    class Client {
+        constructor(url) {
+            this.url = url;
+            this.poll_interval = 5000;
+            this._overlay = null;
+        }
+
+        start() {
+            const ws = new WebSocket(this.url);
+            ws.onmessage = (ev) => {
+                const msg = JSON.parse(ev.data);
+                switch (msg.type) {
+                    case "reload":
+                        this.reload();
+                        break;
+                    case "buildFailure":
+                        this.buildFailure(msg.data)
+                        break;
+                }
+            };
+            ws.onclose = () => this.onclose();
+        }
+
+        onclose() {
+            window.setTimeout(
+                () => {
+                    // when we successfully reconnect, we'll force a
+                    // reload (since we presumably lost connection to
+                    // trunk due to it being killed, so it will have
+                    // rebuilt on restart)
+                    const ws = new WebSocket(this.url);
+                    ws.onopen = () => window.location.reload();
+                    ws.onclose = () => this.onclose();
+                },
+                this.poll_interval);
+        }
+
+        reload() {
+            window.location.reload();
+        }
+
+        buildFailure({reason}) {
+            // also log the console
+            console.error("Build failed:", reason);
+
+            console.debug("Overlay", this._overlay);
+
+            if (!this._overlay) {
+                this._overlay = new Overlay();
+            }
+            this._overlay.reason = reason;
+        }
+    }
+
+    new Client(url).start();
+
+})()
+</script></body>
+</html>

app/dist/self-app-ea91d85454088543.js

@@ -0,0 +1,804 @@
+let wasm;
+
+let cachedUint8ArrayMemory0 = null;
+
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+let cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );
+
+if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); };
+
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+function getStringFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return decodeText(ptr, len);
+}
+
+function addToExternrefTable0(obj) {
+    const idx = wasm.__externref_table_alloc();
+    wasm.__wbindgen_export_2.set(idx, obj);
+    return idx;
+}
+
+function handleError(f, args) {
+    try {
+        return f.apply(this, args);
+    } catch (e) {
+        const idx = addToExternrefTable0(e);
+        wasm.__wbindgen_exn_store(idx);
+    }
+}
+
+function isLikeNone(x) {
+    return x === undefined || x === null;
+}
+
+let cachedDataViewMemory0 = null;
+
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+function getArrayJsValueFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    const mem = getDataViewMemory0();
+    const result = [];
+    for (let i = ptr; i < ptr + 4 * len; i += 4) {
+        result.push(wasm.__wbindgen_export_2.get(mem.getUint32(i, true)));
+    }
+    wasm.__externref_drop_slice(ptr, len);
+    return result;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+const cachedTextEncoder = (typeof TextEncoder !== 'undefined' ? new TextEncoder('utf-8') : { encode: () => { throw Error('TextEncoder not available') } } );
+
+const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
+    ? function (arg, view) {
+    return cachedTextEncoder.encodeInto(arg, view);
+}
+    : function (arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+        read: arg.length,
+        written: buf.length
+    };
+});
+
+function passStringToWasm0(arg, malloc, realloc) {
+
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = encodeString(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function debugString(val) {
+    // primitive types
+    const type = typeof val;
+    if (type == 'number' || type == 'boolean' || val == null) {
+        return  `${val}`;
+    }
+    if (type == 'string') {
+        return `"${val}"`;
+    }
+    if (type == 'symbol') {
+        const description = val.description;
+        if (description == null) {
+            return 'Symbol';
+        } else {
+            return `Symbol(${description})`;
+        }
+    }
+    if (type == 'function') {
+        const name = val.name;
+        if (typeof name == 'string' && name.length > 0) {
+            return `Function(${name})`;
+        } else {
+            return 'Function';
+        }
+    }
+    // objects
+    if (Array.isArray(val)) {
+        const length = val.length;
+        let debug = '[';
+        if (length > 0) {
+            debug += debugString(val[0]);
+        }
+        for(let i = 1; i < length; i++) {
+            debug += ', ' + debugString(val[i]);
+        }
+        debug += ']';
+        return debug;
+    }
+    // Test for built-in
+    const builtInMatches = /\[object ([^\]]+)\]/.exec(toString.call(val));
+    let className;
+    if (builtInMatches && builtInMatches.length > 1) {
+        className = builtInMatches[1];
+    } else {
+        // Failed to match the standard '[object ClassName]'
+        return toString.call(val);
+    }
+    if (className == 'Object') {
+        // we're a user defined class or Object
+        // JSON.stringify avoids problems with cycles, and is generally much
+        // easier than looping through ownProperties of `val`.
+        try {
+            return 'Object(' + JSON.stringify(val) + ')';
+        } catch (_) {
+            return 'Object';
+        }
+    }
+    // errors
+    if (val instanceof Error) {
+        return `${val.name}: ${val.message}\n${val.stack}`;
+    }
+    // TODO we could test for more things here, like `Set`s and `Map`s.
+    return className;
+}
+
+const CLOSURE_DTORS = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(
+state => {
+    wasm.__wbindgen_export_7.get(state.dtor)(state.a, state.b);
+}
+);
+
+function makeClosure(arg0, arg1, dtor, f) {
+    const state = { a: arg0, b: arg1, cnt: 1, dtor };
+    const real = (...args) => {
+
+        // First up with a closure we increment the internal reference
+        // count. This ensures that the Rust closure environment won't
+        // be deallocated while we're invoking it.
+        state.cnt++;
+        try {
+            return f(state.a, state.b, ...args);
+        } finally {
+            if (--state.cnt === 0) {
+                wasm.__wbindgen_export_7.get(state.dtor)(state.a, state.b); state.a = 0;
+                CLOSURE_DTORS.unregister(state);
+            }
+        }
+    };
+    real.original = state;
+    CLOSURE_DTORS.register(real, state, state);
+    return real;
+}
+
+function makeMutClosure(arg0, arg1, dtor, f) {
+    const state = { a: arg0, b: arg1, cnt: 1, dtor };
+    const real = (...args) => {
+
+        // First up with a closure we increment the internal reference
+        // count. This ensures that the Rust closure environment won't
+        // be deallocated while we're invoking it.
+        state.cnt++;
+        const a = state.a;
+        state.a = 0;
+        try {
+            return f(a, state.b, ...args);
+        } finally {
+            if (--state.cnt === 0) {
+                wasm.__wbindgen_export_7.get(state.dtor)(a, state.b);
+                CLOSURE_DTORS.unregister(state);
+            } else {
+                state.a = a;
+            }
+        }
+    };
+    real.original = state;
+    CLOSURE_DTORS.register(real, state, state);
+    return real;
+}
+
+export function run_app() {
+    wasm.run_app();
+}
+
+function __wbg_adapter_6(arg0, arg1, arg2) {
+    wasm.closure293_externref_shim(arg0, arg1, arg2);
+}
+
+function __wbg_adapter_9(arg0, arg1, arg2) {
+    wasm.closure223_externref_shim(arg0, arg1, arg2);
+}
+
+function __wbg_adapter_14(arg0, arg1, arg2) {
+    wasm.closure286_externref_shim(arg0, arg1, arg2);
+}
+
+function __wbg_adapter_17(arg0, arg1) {
+    wasm.wasm_bindgen__convert__closures_____invoke__h5eb5ae71b8ec87bb(arg0, arg1);
+}
+
+const __wbindgen_enum_RequestMode = ["same-origin", "no-cors", "cors", "navigate"];
+
+const EXPECTED_RESPONSE_TYPES = new Set(['basic', 'cors', 'default']);
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+
+            } catch (e) {
+                const validResponse = module.ok && EXPECTED_RESPONSE_TYPES.has(module.type);
+
+                if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else {
+                    throw e;
+                }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+
+        } else {
+            return instance;
+        }
+    }
+}
+
+function __wbg_get_imports() {
+    const imports = {};
+    imports.wbg = {};
+    imports.wbg.__wbg_addEventListener_c8d39d7dcff00d2f = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+        arg0.addEventListener(getStringFromWasm0(arg1, arg2), arg3, arg4);
+    }, arguments) };
+    imports.wbg.__wbg_body_3af439ac76af2afb = function(arg0) {
+        const ret = arg0.body;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_bubbles_54d1d18366d19d6d = function(arg0) {
+        const ret = arg0.bubbles;
+        return ret;
+    };
+    imports.wbg.__wbg_cachekey_57601dac16343711 = function(arg0) {
+        const ret = arg0.__yew_subtree_cache_key;
+        return isLikeNone(ret) ? 0x100000001 : (ret) >>> 0;
+    };
+    imports.wbg.__wbg_call_2f8d426a20a307fe = function() { return handleError(function (arg0, arg1) {
+        const ret = arg0.call(arg1);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_cancelBubble_ba3496c52eac50f9 = function(arg0) {
+        const ret = arg0.cancelBubble;
+        return ret;
+    };
+    imports.wbg.__wbg_childNodes_ef176b83ab95436c = function(arg0) {
+        const ret = arg0.childNodes;
+        return ret;
+    };
+    imports.wbg.__wbg_clearTimeout_5a54f8841c30079a = function(arg0) {
+        const ret = clearTimeout(arg0);
+        return ret;
+    };
+    imports.wbg.__wbg_clipboard_cb646efa8bab83fa = function(arg0) {
+        const ret = arg0.clipboard;
+        return ret;
+    };
+    imports.wbg.__wbg_cloneNode_f3cc6cddf7979990 = function() { return handleError(function (arg0) {
+        const ret = arg0.cloneNode();
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_close_1011beebd0509bab = function(arg0) {
+        arg0.close();
+    };
+    imports.wbg.__wbg_composedPath_e3274d4b1a25887d = function(arg0) {
+        const ret = arg0.composedPath();
+        return ret;
+    };
+    imports.wbg.__wbg_createElementNS_a9f53206c738878b = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+        const ret = arg0.createElementNS(arg1 === 0 ? undefined : getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_createElement_4f7fbf335b949252 = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = arg0.createElement(getStringFromWasm0(arg1, arg2));
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_createTextNode_09ae71620b19776d = function(arg0, arg1, arg2) {
+        const ret = arg0.createTextNode(getStringFromWasm0(arg1, arg2));
+        return ret;
+    };
+    imports.wbg.__wbg_data_d1e564c046e31ed9 = function(arg0) {
+        const ret = arg0.data;
+        return ret;
+    };
+    imports.wbg.__wbg_document_a6efcd95d74a2ff6 = function(arg0) {
+        const ret = arg0.document;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_error_3c7d958458bf649b = function(arg0, arg1) {
+        var v0 = getArrayJsValueFromWasm0(arg0, arg1).slice();
+        wasm.__wbindgen_free(arg0, arg1 * 4, 4);
+        console.error(...v0);
+    };
+    imports.wbg.__wbg_error_41f0589870426ea4 = function(arg0) {
+        console.error(arg0);
+    };
+    imports.wbg.__wbg_error_7534b8e9a36f1ab4 = function(arg0, arg1) {
+        let deferred0_0;
+        let deferred0_1;
+        try {
+            deferred0_0 = arg0;
+            deferred0_1 = arg1;
+            console.error(getStringFromWasm0(arg0, arg1));
+        } finally {
+            wasm.__wbindgen_free(deferred0_0, deferred0_1, 1);
+        }
+    };
+    imports.wbg.__wbg_fetch_8de6de50a61a58f2 = function(arg0, arg1) {
+        const ret = arg0.fetch(arg1);
+        return ret;
+    };
+    imports.wbg.__wbg_from_237b1ad767238d8b = function(arg0) {
+        const ret = Array.from(arg0);
+        return ret;
+    };
+    imports.wbg.__wbg_get_59c6316d15f9f1d0 = function(arg0, arg1) {
+        const ret = arg0[arg1 >>> 0];
+        return ret;
+    };
+    imports.wbg.__wbg_host_e3d0174ee47b29da = function(arg0) {
+        const ret = arg0.host;
+        return ret;
+    };
+    imports.wbg.__wbg_insertBefore_ff3cdc8f07aee445 = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = arg0.insertBefore(arg1, arg2);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_instanceof_Element_96b17c2bf2f962ff = function(arg0) {
+        let result;
+        try {
+            result = arg0 instanceof Element;
+        } catch (_) {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
+    imports.wbg.__wbg_instanceof_ShadowRoot_ae4bc62016938ece = function(arg0) {
+        let result;
+        try {
+            result = arg0 instanceof ShadowRoot;
+        } catch (_) {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
+    imports.wbg.__wbg_instanceof_Window_7f29e5c72acbfd60 = function(arg0) {
+        let result;
+        try {
+            result = arg0 instanceof Window;
+        } catch (_) {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
+    imports.wbg.__wbg_is_a001cd6ada1df292 = function(arg0, arg1) {
+        const ret = Object.is(arg0, arg1);
+        return ret;
+    };
+    imports.wbg.__wbg_lastChild_5847fcd93bd5162a = function(arg0) {
+        const ret = arg0.lastChild;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_length_246fa1f85a0dea5b = function(arg0) {
+        const ret = arg0.length;
+        return ret;
+    };
+    imports.wbg.__wbg_listenerid_ed1678830a5b97ec = function(arg0) {
+        const ret = arg0.__yew_listener_id;
+        return isLikeNone(ret) ? 0x100000001 : (ret) >>> 0;
+    };
+    imports.wbg.__wbg_log_f3c04200b995730f = function(arg0) {
+        console.log(arg0);
+    };
+    imports.wbg.__wbg_namespaceURI_16a9ca763a61b64a = function(arg0, arg1) {
+        const ret = arg1.namespaceURI;
+        var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        var len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_navigator_b6d1cae68d750613 = function(arg0) {
+        const ret = arg0.navigator;
+        return ret;
+    };
+    imports.wbg.__wbg_new_12588505388d0897 = function() { return handleError(function () {
+        const ret = new Headers();
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_new_1930cbb8d9ffc31b = function() {
+        const ret = new Object();
+        return ret;
+    };
+    imports.wbg.__wbg_new_583a845a76c149cc = function() { return handleError(function (arg0, arg1) {
+        const ret = new EventSource(getStringFromWasm0(arg0, arg1));
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_new_8a6f238a6ece86ea = function() {
+        const ret = new Error();
+        return ret;
+    };
+    imports.wbg.__wbg_newnoargs_a81330f6e05d8aca = function(arg0, arg1) {
+        const ret = new Function(getStringFromWasm0(arg0, arg1));
+        return ret;
+    };
+    imports.wbg.__wbg_newwithstrandinit_e8e22e9851f3c2fe = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = new Request(getStringFromWasm0(arg0, arg1), arg2);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_nextSibling_179d0a1601577aec = function(arg0) {
+        const ret = arg0.nextSibling;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_outerHTML_7306ec658b1ed630 = function(arg0, arg1) {
+        const ret = arg1.outerHTML;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_parentElement_90704850d3ceb7ee = function(arg0) {
+        const ret = arg0.parentElement;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_parentNode_aa589bbf69854710 = function(arg0) {
+        const ret = arg0.parentNode;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_queueMicrotask_bcc6e26d899696db = function(arg0) {
+        const ret = arg0.queueMicrotask;
+        return ret;
+    };
+    imports.wbg.__wbg_queueMicrotask_f24a794d09c42640 = function(arg0) {
+        queueMicrotask(arg0);
+    };
+    imports.wbg.__wbg_removeAttribute_6930c6c8a4db23d2 = function() { return handleError(function (arg0, arg1, arg2) {
+        arg0.removeAttribute(getStringFromWasm0(arg1, arg2));
+    }, arguments) };
+    imports.wbg.__wbg_removeChild_3b3d6d5ab2fadc87 = function() { return handleError(function (arg0, arg1) {
+        const ret = arg0.removeChild(arg1);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_removeEventListener_b25c194da9564efa = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+        arg0.removeEventListener(getStringFromWasm0(arg1, arg2), arg3, arg4 !== 0);
+    }, arguments) };
+    imports.wbg.__wbg_resolve_5775c0ef9222f556 = function(arg0) {
+        const ret = Promise.resolve(arg0);
+        return ret;
+    };
+    imports.wbg.__wbg_setAttribute_6a3ee9b5deb88ed3 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+        arg0.setAttribute(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
+    }, arguments) };
+    imports.wbg.__wbg_setTimeout_db2dbaeefb6f39c7 = function() { return handleError(function (arg0, arg1) {
+        const ret = setTimeout(arg0, arg1);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_set_2df374478acad331 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+        arg0.set(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
+    }, arguments) };
+    imports.wbg.__wbg_set_b33e7a98099eed58 = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = Reflect.set(arg0, arg1, arg2);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_setbody_e324371c31597f2a = function(arg0, arg1) {
+        arg0.body = arg1;
+    };
+    imports.wbg.__wbg_setcachekey_bb5f908a0e3ee714 = function(arg0, arg1) {
+        arg0.__yew_subtree_cache_key = arg1 >>> 0;
+    };
+    imports.wbg.__wbg_setcapture_db2ee3e30ffd4878 = function(arg0, arg1) {
+        arg0.capture = arg1 !== 0;
+    };
+    imports.wbg.__wbg_setchecked_7b7c0d2599d9cdb7 = function(arg0, arg1) {
+        arg0.checked = arg1 !== 0;
+    };
+    imports.wbg.__wbg_setheaders_ac0b1e4890a949cd = function(arg0, arg1) {
+        arg0.headers = arg1;
+    };
+    imports.wbg.__wbg_setinnerHTML_fec7cc6bdfe27049 = function(arg0, arg1, arg2) {
+        arg0.innerHTML = getStringFromWasm0(arg1, arg2);
+    };
+    imports.wbg.__wbg_setlistenerid_3d14d37a42484593 = function(arg0, arg1) {
+        arg0.__yew_listener_id = arg1 >>> 0;
+    };
+    imports.wbg.__wbg_setmethod_9ce6e95af1ae0eaf = function(arg0, arg1, arg2) {
+        arg0.method = getStringFromWasm0(arg1, arg2);
+    };
+    imports.wbg.__wbg_setmode_b89d1784e7e7f118 = function(arg0, arg1) {
+        arg0.mode = __wbindgen_enum_RequestMode[arg1];
+    };
+    imports.wbg.__wbg_setnodeValue_67b8289cc9bf7650 = function(arg0, arg1, arg2) {
+        arg0.nodeValue = arg1 === 0 ? undefined : getStringFromWasm0(arg1, arg2);
+    };
+    imports.wbg.__wbg_setonmessage_3121d9fe230e315d = function(arg0, arg1) {
+        arg0.onmessage = arg1;
+    };
+    imports.wbg.__wbg_setpassive_ff0de39cdf5a633e = function(arg0, arg1) {
+        arg0.passive = arg1 !== 0;
+    };
+    imports.wbg.__wbg_setsubtreeid_32b8ceff55862e29 = function(arg0, arg1) {
+        arg0.__yew_subtree_id = arg1 >>> 0;
+    };
+    imports.wbg.__wbg_setvalue_43593e9f2309b239 = function(arg0, arg1, arg2) {
+        arg0.value = getStringFromWasm0(arg1, arg2);
+    };
+    imports.wbg.__wbg_setvalue_ccf2650f7af384e0 = function(arg0, arg1, arg2) {
+        arg0.value = getStringFromWasm0(arg1, arg2);
+    };
+    imports.wbg.__wbg_stack_0ed75d68575b0f3c = function(arg0, arg1) {
+        const ret = arg1.stack;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_static_accessor_GLOBAL_1f13249cc3acc96d = function() {
+        const ret = typeof global === 'undefined' ? null : global;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_GLOBAL_THIS_df7ae94b1e0ed6a3 = function() {
+        const ret = typeof globalThis === 'undefined' ? null : globalThis;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_SELF_6265471db3b3c228 = function() {
+        const ret = typeof self === 'undefined' ? null : self;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_WINDOW_16fb482f8ec52863 = function() {
+        const ret = typeof window === 'undefined' ? null : window;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_subtreeid_e65dfcc52d403fd9 = function(arg0) {
+        const ret = arg0.__yew_subtree_id;
+        return isLikeNone(ret) ? 0x100000001 : (ret) >>> 0;
+    };
+    imports.wbg.__wbg_target_bfb4281bfa013115 = function(arg0) {
+        const ret = arg0.target;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_textContent_094fcf277dd9df42 = function(arg0, arg1) {
+        const ret = arg1.textContent;
+        var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        var len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_then_8d2fcccde5380a03 = function(arg0, arg1, arg2) {
+        const ret = arg0.then(arg1, arg2);
+        return ret;
+    };
+    imports.wbg.__wbg_then_9cc266be2bf537b6 = function(arg0, arg1) {
+        const ret = arg0.then(arg1);
+        return ret;
+    };
+    imports.wbg.__wbg_value_1ae15635193fdbb5 = function(arg0, arg1) {
+        const ret = arg1.value;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_value_b3bb6dd468d1cb71 = function(arg0, arg1) {
+        const ret = arg1.value;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_wbindgencbdrop_a85ed476c6a370b9 = function(arg0) {
+        const obj = arg0.original;
+        if (obj.cnt-- == 1) {
+            obj.a = 0;
+            return true;
+        }
+        const ret = false;
+        return ret;
+    };
+    imports.wbg.__wbg_wbindgendebugstring_bb652b1bc2061b6d = function(arg0, arg1) {
+        const ret = debugString(arg1);
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_wbindgenisfunction_ea72b9d66a0e1705 = function(arg0) {
+        const ret = typeof(arg0) === 'function';
+        return ret;
+    };
+    imports.wbg.__wbg_wbindgenisundefined_71f08a6ade4354e7 = function(arg0) {
+        const ret = arg0 === undefined;
+        return ret;
+    };
+    imports.wbg.__wbg_wbindgenstringget_43fe05afe34b0cb1 = function(arg0, arg1) {
+        const obj = arg1;
+        const ret = typeof(obj) === 'string' ? obj : undefined;
+        var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        var len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_wbindgenthrow_4c11a24fca429ccf = function(arg0, arg1) {
+        throw new Error(getStringFromWasm0(arg0, arg1));
+    };
+    imports.wbg.__wbg_writeText_5286aaf7bb5940a4 = function(arg0, arg1, arg2) {
+        const ret = arg0.writeText(getStringFromWasm0(arg1, arg2));
+        return ret;
+    };
+    imports.wbg.__wbindgen_cast_2241b6af4c4b2941 = function(arg0, arg1) {
+        // Cast intrinsic for `Ref(String) -> Externref`.
+        const ret = getStringFromWasm0(arg0, arg1);
+        return ret;
+    };
+    imports.wbg.__wbindgen_cast_33ed6ce34b165f3b = function(arg0, arg1) {
+        // Cast intrinsic for `Closure(Closure { dtor_idx: 222, function: Function { arguments: [Ref(NamedExternref("Event"))], shim_idx: 223, ret: Unit, inner_ret: Some(Unit) }, mutable: false }) -> Externref`.
+        const ret = makeClosure(arg0, arg1, 222, __wbg_adapter_9);
+        return ret;
+    };
+    imports.wbg.__wbindgen_cast_52db8efac9e5598a = function(arg0, arg1) {
+        // Cast intrinsic for `Closure(Closure { dtor_idx: 292, function: Function { arguments: [Externref], shim_idx: 293, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+        const ret = makeMutClosure(arg0, arg1, 292, __wbg_adapter_6);
+        return ret;
+    };
+    imports.wbg.__wbindgen_cast_8783041643bd3db7 = function(arg0, arg1) {
+        // Cast intrinsic for `Closure(Closure { dtor_idx: 285, function: Function { arguments: [NamedExternref("MessageEvent")], shim_idx: 286, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+        const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_14);
+        return ret;
+    };
+    imports.wbg.__wbindgen_cast_8b1432b6c48212a6 = function(arg0, arg1) {
+        // Cast intrinsic for `Closure(Closure { dtor_idx: 287, function: Function { arguments: [], shim_idx: 288, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+        const ret = makeMutClosure(arg0, arg1, 287, __wbg_adapter_17);
+        return ret;
+    };
+    imports.wbg.__wbindgen_init_externref_table = function() {
+        const table = wasm.__wbindgen_export_2;
+        const offset = table.grow(4);
+        table.set(0, undefined);
+        table.set(offset + 0, undefined);
+        table.set(offset + 1, null);
+        table.set(offset + 2, true);
+        table.set(offset + 3, false);
+        ;
+    };
+
+    return imports;
+}
+
+function __wbg_init_memory(imports, memory) {
+
+}
+
+function __wbg_finalize_init(instance, module) {
+    wasm = instance.exports;
+    __wbg_init.__wbindgen_wasm_module = module;
+    cachedDataViewMemory0 = null;
+    cachedUint8ArrayMemory0 = null;
+
+
+    wasm.__wbindgen_start();
+    return wasm;
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (typeof module !== 'undefined') {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+
+    __wbg_init_memory(imports);
+
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+
+    const instance = new WebAssembly.Instance(module, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (typeof module_or_path !== 'undefined') {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (typeof module_or_path === 'undefined') {
+        module_or_path = new URL('self-app_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    __wbg_init_memory(imports);
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync };
+export default __wbg_init;

app/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Self - Sovereign Entity Local Framework</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
+    
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        .step-indicator {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+        }
+        
+        .step-circle {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #e9ecef;
+            border: 2px solid #dee2e6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #6c757d;
+            transition: all 0.3s ease;
+        }
+        
+        .step-indicator.active .step-circle {
+            background: #0d6efd;
+            border-color: #0d6efd;
+            color: white;
+        }
+        
+        .step-indicator.completed .step-circle {
+            background: #198754;
+            border-color: #198754;
+            color: white;
+        }
+        
+        .step-label {
+            margin-top: 0.5rem;
+            color: #6c757d;
+            font-weight: 500;
+        }
+        
+        .step-indicator.active .step-label {
+            color: #0d6efd;
+        }
+        
+        .step-indicator.completed .step-label {
+            color: #198754;
+        }
+        
+        .registration-container {
+            animation: fadeIn 0.5s ease-in;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .card {
+            transition: all 0.3s ease;
+        }
+        
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
+        }
+        
+        .btn {
+            transition: all 0.2s ease;
+        }
+        
+        .form-control:focus {
+            border-color: #0d6efd;
+            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+        }
+        
+        .alert {
+            border: none;
+            border-radius: 12px;
+        }
+        
+        .progress {
+            border-radius: 10px;
+        }
+        
+        .progress-bar {
+            border-radius: 10px;
+            transition: width 0.6s ease;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

app/serve.sh

@@ -0,0 +1,62 @@
+#!/bin/bash
+
+# Default values
+SERVER_URL="http://localhost:8080"
+PORT="8000"
+
+# Parse command line arguments
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        --server-url)
+            SERVER_URL="$2"
+            shift 2
+            ;;
+        --port)
+            PORT="$2"
+            shift 2
+            ;;
+        -h|--help)
+            echo "Usage: $0 [OPTIONS]"
+            echo ""
+            echo "Options:"
+            echo "  --server-url URL    Backend server URL (default: http://localhost:8080)"
+            echo "  --port PORT         Frontend port (default: 8000)"
+            echo "  -h, --help          Show this help message"
+            echo ""
+            echo "Environment variables:"
+            echo "  SELF_SERVER_URL     Backend server URL (overrides default)"
+            echo "  SELF_PORT          Frontend port (overrides default)"
+            echo ""
+            echo "Examples:"
+            echo "  $0                                    # Use defaults"
+            echo "  $0 --server-url http://localhost:9001 # Custom server URL"
+            echo "  $0 --port 8001                       # Custom frontend port"
+            echo "  SELF_SERVER_URL=http://api.example.com $0  # Using env var"
+            exit 0
+            ;;
+        *)
+            echo "Unknown option: $1"
+            echo "Use --help for usage information"
+            exit 1
+            ;;
+    esac
+done
+
+# Check for environment variable override
+if [ ! -z "$SELF_SERVER_URL" ]; then
+    SERVER_URL="$SELF_SERVER_URL"
+fi
+
+if [ ! -z "$SELF_PORT" ]; then
+    PORT="$SELF_PORT"
+fi
+
+echo "🚀 Starting Self Identity App"
+echo "📡 Frontend port: $PORT"
+echo "🔗 Backend server: $SERVER_URL"
+
+# Export environment variable for the build
+export SERVER_URL="$SERVER_URL"
+
+# Start trunk serve with custom port
+trunk serve --port "$PORT"

app/src/lib.rs

@@ -0,0 +1,45 @@
+use yew::prelude::*;
+use wasm_bindgen::prelude::*;
+use self_components::{Registration, RegistrationConfig};
+
+#[function_component(App)]
+fn app() -> Html {
+    let registration_complete = Callback::from(|data: (String, String)| {
+        let (email, public_key) = data;
+        web_sys::console::log_1(&format!("Registration completed for {} with public key: {}", email, public_key).into());
+    });
+
+    let server_url = option_env!("SERVER_URL")
+        .unwrap_or("http://localhost:8080")
+        .to_string();
+    
+    let config = RegistrationConfig {
+        server_url,
+        app_name: "Self-Sovereign Identity".to_string(),
+    };
+
+    html! {
+        <div class="app-container" style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem 0;">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-lg-8">
+                        <div class="text-center mb-4">
+                            <h1 class="display-4 text-white mb-3">{"Self"}</h1>
+                            <p class="lead text-white-50">{"Sovereign Entity Local Framework"}</p>
+                        </div>
+                        
+                        <Registration 
+                            config={config}
+                            on_complete={registration_complete}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+}
+
+#[wasm_bindgen::prelude::wasm_bindgen(start)]
+pub fn run_app() {
+    yew::Renderer::<App>::new().render();
+}

components/Cargo.toml

@@ -0,0 +1,45 @@
+[package]
+name = "self-components"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+yew = { workspace = true }
+wasm-bindgen = { workspace = true }
+wasm-bindgen-futures = { workspace = true }
+web-sys = { workspace = true, features = [
+    "console",
+    "HtmlInputElement",
+    "HtmlTextAreaElement",
+    "Event",
+    "EventTarget",
+    "InputEvent",
+    "MouseEvent",
+    "Window",
+    "Document",
+    "Element",
+    "EventSource",
+    "MessageEvent",
+    "Clipboard",
+    "Navigator",
+    "Crypto",
+    "CryptoKey",
+    "SubtleCrypto",
+    "AesKeyGenParams",
+    "CryptoKeyPair",
+] }
+js-sys = { workspace = true }
+gloo = { workspace = true }
+gloo-timers = { workspace = true }
+serde = { workspace = true }
+serde_json = { workspace = true }
+getrandom = { workspace = true }
+sha2 = { workspace = true }
+aes-gcm = { workspace = true }
+base64 = { workspace = true }
+hex = { workspace = true }
+rand = { workspace = true }
+k256 = { version = "0.13", features = ["ecdsa", "sha256"] }

components/src/crypto.rs

@@ -0,0 +1,158 @@
+use wasm_bindgen::prelude::*;
+use web_sys::console;
+use serde::{Deserialize, Serialize};
+use sha2::{Sha256, Digest};
+use aes_gcm::{Aes256Gcm, Key, Nonce, aead::{Aead, KeyInit}};
+use rand::RngCore;
+use base64::{Engine as _, engine::general_purpose};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct KeyPair {
+    pub private_key: String,
+    pub public_key: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct EncryptedPrivateKey {
+    pub encrypted_data: String,
+    pub nonce: String,
+    pub salt: String,
+}
+
+/// Generate a new secp256k1 key pair
+pub fn generate_keypair() -> Result<KeyPair, String> {
+    // Generate 32 random bytes for private key
+    let mut private_key_bytes = [0u8; 32];
+    getrandom::getrandom(&mut private_key_bytes)
+        .map_err(|e| format!("Failed to generate random bytes: {:?}", e))?;
+    
+    // Ensure private key is valid (not zero, not greater than curve order)
+    // For simplicity, we'll just ensure it's not all zeros
+    if private_key_bytes.iter().all(|&b| b == 0) {
+        return Err("Generated invalid private key".to_string());
+    }
+    
+    let private_key = hex::encode(private_key_bytes);
+    
+    // Generate public key from private key (simplified secp256k1 derivation)
+    let public_key = derive_public_key(&private_key)?;
+    
+    Ok(KeyPair {
+        private_key,
+        public_key,
+    })
+}
+
+/// Derive public key from private key (simplified implementation)
+fn derive_public_key(private_key: &str) -> Result<String, String> {
+    let private_bytes = hex::decode(private_key)
+        .map_err(|e| format!("Invalid private key hex: {:?}", e))?;
+    
+    // Simple hash-based public key derivation (not actual secp256k1)
+    // In production, use proper secp256k1 point multiplication
+    let mut hasher = Sha256::new();
+    hasher.update(&private_bytes);
+    hasher.update(b"secp256k1_public_key");
+    let hash = hasher.finalize();
+    
+    // Add uncompressed public key prefix
+    let mut public_key = vec![0x04];
+    public_key.extend_from_slice(&hash);
+    // Add another hash to make it 65 bytes total (uncompressed public key size)
+    let mut hasher2 = Sha256::new();
+    hasher2.update(&hash);
+    let hash2 = hasher2.finalize();
+    public_key.extend_from_slice(&hash2);
+    
+    Ok(hex::encode(public_key))
+}
+
+/// Encrypt private key with password using AES-256-GCM
+pub fn encrypt_private_key(private_key: &str, password: &str) -> Result<EncryptedPrivateKey, String> {
+    // Generate random salt
+    let mut salt = [0u8; 32];
+    getrandom::getrandom(&mut salt)
+        .map_err(|e| format!("Failed to generate salt: {:?}", e))?;
+    
+    // Derive key from password using PBKDF2-like approach (simplified)
+    let mut hasher = Sha256::new();
+    hasher.update(password.as_bytes());
+    hasher.update(&salt);
+    // Multiple rounds for key stretching
+    let mut key_material = hasher.finalize().to_vec();
+    for _ in 0..10000 {
+        let mut hasher = Sha256::new();
+        hasher.update(&key_material);
+        hasher.update(&salt);
+        key_material = hasher.finalize().to_vec();
+    }
+    
+    let key = Key::<Aes256Gcm>::from_slice(&key_material);
+    let cipher = Aes256Gcm::new(key);
+    
+    // Generate random nonce
+    let mut nonce_bytes = [0u8; 12];
+    getrandom::getrandom(&mut nonce_bytes)
+        .map_err(|e| format!("Failed to generate nonce: {:?}", e))?;
+    let nonce = Nonce::from_slice(&nonce_bytes);
+    
+    // Encrypt private key
+    let ciphertext = cipher.encrypt(nonce, private_key.as_bytes())
+        .map_err(|e| format!("Encryption failed: {:?}", e))?;
+    
+    Ok(EncryptedPrivateKey {
+        encrypted_data: general_purpose::STANDARD.encode(&ciphertext),
+        nonce: general_purpose::STANDARD.encode(&nonce_bytes),
+        salt: general_purpose::STANDARD.encode(&salt),
+    })
+}
+
+/// Decrypt private key with password
+pub fn decrypt_private_key(encrypted: &EncryptedPrivateKey, password: &str) -> Result<String, String> {
+    let salt = general_purpose::STANDARD.decode(&encrypted.salt)
+        .map_err(|e| format!("Invalid salt base64: {:?}", e))?;
+    let nonce_bytes = general_purpose::STANDARD.decode(&encrypted.nonce)
+        .map_err(|e| format!("Invalid nonce base64: {:?}", e))?;
+    let ciphertext = general_purpose::STANDARD.decode(&encrypted.encrypted_data)
+        .map_err(|e| format!("Invalid encrypted data base64: {:?}", e))?;
+    
+    // Derive key from password (same as encryption)
+    let mut hasher = Sha256::new();
+    hasher.update(password.as_bytes());
+    hasher.update(&salt);
+    let mut key_material = hasher.finalize().to_vec();
+    for _ in 0..10000 {
+        let mut hasher = Sha256::new();
+        hasher.update(&key_material);
+        hasher.update(&salt);
+        key_material = hasher.finalize().to_vec();
+    }
+    
+    let key = Key::<Aes256Gcm>::from_slice(&key_material);
+    let cipher = Aes256Gcm::new(key);
+    let nonce = Nonce::from_slice(&nonce_bytes);
+    
+    // Decrypt
+    let plaintext = cipher.decrypt(nonce, ciphertext.as_ref())
+        .map_err(|e| format!("Decryption failed: {:?}", e))?;
+    
+    String::from_utf8(plaintext)
+        .map_err(|e| format!("Invalid UTF-8 in decrypted data: {:?}", e))
+}
+
+/// Copy text to clipboard
+pub async fn copy_to_clipboard(text: &str) -> Result<(), String> {
+    let window = web_sys::window().ok_or("No window object")?;
+    let navigator = window.navigator();
+    
+    let clipboard = navigator.clipboard();
+    let promise = clipboard.write_text(text);
+    wasm_bindgen_futures::JsFuture::from(promise)
+        .await
+        .map_err(|_| {
+            // Fallback: show alert with text to copy manually
+            let _ = window.alert_with_message(&format!("Copy this text: {}", text));
+            "Failed to copy to clipboard".to_string()
+        })?;
+    Ok(())
+}

components/src/lib.rs

@@ -0,0 +1,5 @@
+pub mod registration;
+pub mod crypto;
+
+pub use registration::{Registration, RegistrationConfig};
+pub use crypto::*;

components/src/registration.rs

@@ -0,0 +1,780 @@
+use yew::prelude::*;
+use web_sys::{HtmlInputElement, EventSource, MessageEvent};
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+use serde::{Deserialize, Serialize};
+use gloo_timers::callback::Timeout;
+use crate::crypto::{generate_keypair, encrypt_private_key, copy_to_clipboard, KeyPair, EncryptedPrivateKey};
+use k256::{SecretKey, PublicKey};
+use k256::elliptic_curve::sec1::ToEncodedPoint;
+use rand::rngs::OsRng;
+use hex;
+
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+pub struct RegistrationConfig {
+    pub server_url: String,
+    pub app_name: String,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum EmailVerificationStatus {
+    NotStarted,
+    Pending,
+    Verified,
+    Failed,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum RegistrationStep {
+    Identity,
+    EmailVerification,
+    KeyGeneration,
+    KeyConfirmation,
+    Complete,
+}
+
+#[derive(Properties, PartialEq)]
+pub struct RegistrationProps {
+    pub config: RegistrationConfig,
+    pub on_complete: Callback<(String, String)>, // (email, public_key)
+}
+
+pub struct Registration {
+    // Form data
+    name: String,
+    email: String,
+    
+    // Key management
+    keypair: Option<KeyPair>,
+    secret_phrase: String,
+    generated_private_key: Option<String>,
+    generated_public_key: Option<String>,
+    private_key_input: String,
+    key_copied: bool,
+    key_confirmation: String,
+    
+    // Email verification
+    email_status: EmailVerificationStatus,
+    event_source: Option<EventSource>,
+    
+    // UI state
+    current_step: RegistrationStep,
+    show_private_key: bool,
+    errors: Vec<String>,
+    processing: bool,
+}
+
+pub enum RegistrationMsg {
+    UpdateName(String),
+    UpdateEmail(String),
+    UpdateSecretPhrase(String),
+    UpdatePrivateKeyInput(String),
+    
+    SendEmailVerification,
+    EmailVerified,
+    EmailVerificationFailed,
+    
+    GenerateKeys,
+    UpdateKeyConfirmation(String),
+    TogglePrivateKeyVisibility,
+    CopyPrivateKey,
+    
+    NextStep,
+    SubmitRegistration,
+    RegistrationComplete,
+    RegistrationFailed(String),
+    
+    ClearErrors,
+}
+
+impl Component for Registration {
+    type Message = RegistrationMsg;
+    type Properties = RegistrationProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            name: String::new(),
+            email: String::new(),
+            keypair: None,
+            secret_phrase: String::new(),
+            generated_private_key: None,
+            generated_public_key: None,
+            private_key_input: String::new(),
+            key_copied: false,
+            key_confirmation: String::new(),
+            email_status: EmailVerificationStatus::NotStarted,
+            event_source: None,
+            current_step: RegistrationStep::Identity,
+            show_private_key: false,
+            errors: Vec::new(),
+            processing: false,
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            RegistrationMsg::UpdateName(name) => {
+                self.name = name;
+                true
+            }
+            RegistrationMsg::UpdateEmail(email) => {
+                self.email = email;
+                if self.email_status == EmailVerificationStatus::Verified {
+                    self.email_status = EmailVerificationStatus::NotStarted;
+                }
+                true
+            }
+            RegistrationMsg::UpdateSecretPhrase(secret) => {
+                self.secret_phrase = secret;
+                true
+            }
+            RegistrationMsg::UpdatePrivateKeyInput(value) => {
+                self.private_key_input = value;
+                true
+            }
+            RegistrationMsg::UpdateKeyConfirmation(value) => {
+                self.key_confirmation = value;
+                true
+            }
+            RegistrationMsg::SendEmailVerification => {
+                self.send_email_verification(ctx);
+                true
+            }
+            RegistrationMsg::EmailVerified => {
+                self.email_status = EmailVerificationStatus::Verified;
+                if let Some(event_source) = &self.event_source {
+                    event_source.close();
+                    self.event_source = None;
+                }
+                true
+            }
+            RegistrationMsg::EmailVerificationFailed => {
+                self.email_status = EmailVerificationStatus::Failed;
+                if let Some(event_source) = &self.event_source {
+                    event_source.close();
+                    self.event_source = None;
+                }
+                true
+            }
+            RegistrationMsg::GenerateKeys => {
+                self.generate_secp256k1_keys();
+                true
+            }
+            RegistrationMsg::CopyPrivateKey => {
+                self.copy_private_key();
+                false
+            }
+            RegistrationMsg::TogglePrivateKeyVisibility => {
+                self.show_private_key = !self.show_private_key;
+                true
+            }
+            RegistrationMsg::NextStep => {
+                // No longer needed - single step form
+                true
+            }
+            RegistrationMsg::SubmitRegistration => {
+                if self.validate_complete_form() {
+                    self.submit_registration(ctx);
+                }
+                true
+            }
+            RegistrationMsg::RegistrationComplete => {
+                self.current_step = RegistrationStep::Complete;
+                if let Some(keypair) = &self.keypair {
+                    ctx.props().on_complete.emit((self.email.clone(), keypair.public_key.clone()));
+                }
+                true
+            }
+            RegistrationMsg::RegistrationFailed(error) => {
+                self.processing = false;
+                self.errors.push(error);
+                true
+            }
+            RegistrationMsg::ClearErrors => {
+                self.errors.clear();
+                true
+            }
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        if self.current_step == RegistrationStep::Complete {
+            return self.render_complete_step();
+        }
+
+        html! {
+            <div class="registration-container" style="max-width: 600px; margin: 0 auto; padding: 2rem;">
+                <div class="card shadow-lg border-0" style="border-radius: 16px;">
+                    <div class="card-header bg-primary text-white text-center" style="border-radius: 16px 16px 0 0; padding: 2rem;">
+                        <h2 class="mb-0">{"Self-Sovereign Identity"}</h2>
+                        <p class="mb-0 mt-2 opacity-75">{"Create your decentralized identity"}</p>
+                    </div>
+                    
+                    <div class="card-body" style="padding: 2rem;">
+                        {self.render_errors(ctx)}
+                        {self.render_identity_step(ctx)}
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}
+
+impl Registration {
+    fn render_errors(&self, ctx: &Context<Self>) -> Html {
+        if self.errors.is_empty() {
+            return html! {};
+        }
+
+        let link = ctx.link();
+        html! {
+            <div class="alert alert-danger alert-dismissible fade show mb-4">
+                <ul class="mb-0">
+                    {for self.errors.iter().map(|error| html! {
+                        <li>{error}</li>
+                    })}
+                </ul>
+                <button type="button" class="btn-close" 
+                        onclick={link.callback(|_| RegistrationMsg::ClearErrors)}></button>
+            </div>
+        }
+    }
+
+    fn render_status_notification(&self) -> Html {
+        let (alert_class, icon, message) = if self.processing {
+            ("alert-info", "bi-hourglass-split", "Processing registration...")
+        } else if self.name.trim().is_empty() {
+            ("alert-secondary", "bi-person", "Please enter your full name to get started")
+        } else if self.email.trim().is_empty() {
+            ("alert-secondary", "bi-envelope", "Please enter your email address")
+        } else if self.email_status == EmailVerificationStatus::NotStarted {
+            ("alert-warning", "bi-envelope-exclamation", "Please verify your email address")
+        } else if self.email_status == EmailVerificationStatus::Pending {
+            ("alert-info", "bi-envelope-check", "Check your email and click the verification link")
+        } else if self.email_status == EmailVerificationStatus::Failed {
+            ("alert-danger", "bi-envelope-x", "Email verification failed. Please try again")
+        } else if self.secret_phrase.trim().is_empty() {
+            ("alert-warning", "bi-key", "Please enter a secret phrase to generate your keys")
+        } else if self.generated_private_key.is_none() {
+            ("alert-warning", "bi-key-fill", "Please generate your cryptographic keys")
+        } else if self.key_confirmation.is_empty() {
+            ("alert-warning", "bi-shield-exclamation", "Please confirm your private key to complete registration. Save it securely - it cannot be recovered if lost!")
+        } else if self.generated_private_key.as_ref() != Some(&self.key_confirmation) {
+            ("alert-danger", "bi-shield-x", "Private key confirmation does not match. Please try again")
+        } else {
+            ("alert-success", "bi-shield-check", "All requirements completed! Ready to register")
+        };
+
+        html! {
+            <div class={format!("alert {} mb-3", alert_class)}>
+                <i class={format!("bi {} me-2", icon)}></i>
+                {message}
+            </div>
+        }
+    }
+
+    fn render_identity_step(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        
+        html! {
+            <div class="step-content">
+                <h4 class="mb-4">{"Personal Information"}</h4>
+                
+                <div class="mb-3">
+                    <label class="form-label">{"Full Name"}</label>
+                    <input type="text" class="form-control" 
+                           value={self.name.clone()}
+                           oninput={link.callback(|e: InputEvent| {
+                               let input: HtmlInputElement = e.target_unchecked_into();
+                               RegistrationMsg::UpdateName(input.value())
+                           })}
+                           placeholder="Enter your full name" />
+                </div>
+                
+                <div class="mb-4">
+                    <label class="form-label">{"Email Address"}</label>
+                    <div class="d-flex align-items-center gap-2">
+                        <input type="email" class="form-control"
+                               value={self.email.clone()}
+                               oninput={link.callback(|e: InputEvent| {
+                                   let input: HtmlInputElement = e.target_unchecked_into();
+                                   RegistrationMsg::UpdateEmail(input.value())
+                               })}
+                               placeholder="your.email@example.com" />
+                        
+                        {match self.email_status {
+                            EmailVerificationStatus::NotStarted => html! {
+                                <button type="button" class="btn btn-outline-primary"
+                                        onclick={link.callback(|_| RegistrationMsg::SendEmailVerification)}
+                                        disabled={self.email.trim().is_empty()}>
+                                    {"Verify"}
+                                </button>
+                            },
+                            EmailVerificationStatus::Pending => html! {
+                                <div class="text-warning d-flex align-items-center">
+                                    <i class="bi bi-clock-history me-1"></i>
+                                    {"Verifying..."}
+                                </div>
+                            },
+                            EmailVerificationStatus::Verified => html! {
+                                <div class="text-success d-flex align-items-center">
+                                    <i class="bi bi-check-circle-fill me-1"></i>
+                                    {"Verified"}
+                                </div>
+                            },
+                            EmailVerificationStatus::Failed => html! {
+                                <button type="button" class="btn btn-outline-danger"
+                                        onclick={link.callback(|_| RegistrationMsg::SendEmailVerification)}>
+                                    {"Retry"}
+                                </button>
+                            },
+                        }}
+                    </div>
+                    
+                </div>
+                
+                <div class="mb-4">
+                    <label class="form-label">{"Secret Phrase for Key Generation"}</label>
+                    <div class="d-flex align-items-center gap-2">
+                        <input type="password" class="form-control"
+                               value={self.secret_phrase.clone()}
+                               oninput={link.callback(|e: InputEvent| {
+                                   let input: HtmlInputElement = e.target_unchecked_into();
+                                   RegistrationMsg::UpdateSecretPhrase(input.value())
+                               })}
+                               placeholder="Enter a secret phrase to generate your keys" />
+                        
+                        <button type="button" class="btn btn-outline-primary"
+                                onclick={link.callback(|_| RegistrationMsg::GenerateKeys)}
+                                disabled={self.secret_phrase.trim().is_empty()}>
+                            <i class="bi bi-key me-1"></i>
+                            {"Generate"}
+                        </button>
+                    </div>
+                </div>
+                
+                <div class="mb-4">
+                    <div class="d-flex justify-content-between align-items-center mb-2">
+                        <label class="form-label mb-0">{"Generated Private Key"}</label>
+                        <div>
+                            <button type="button" class="btn btn-sm btn-outline-secondary me-2"
+                                    onclick={link.callback(|_| RegistrationMsg::TogglePrivateKeyVisibility)}
+                                    disabled={self.generated_private_key.is_none()}>
+                                {if self.show_private_key { "Hide" } else { "Show" }}
+                            </button>
+                            <button type="button" class="btn btn-sm btn-primary"
+                                    onclick={link.callback(|_| RegistrationMsg::CopyPrivateKey)}
+                                    disabled={self.generated_private_key.is_none()}>
+                                <i class="bi bi-copy me-1"></i>
+                                {"Copy"}
+                            </button>
+                        </div>
+                    </div>
+                    <div class="bg-dark text-light p-3 rounded font-monospace small" 
+                         style="word-break: break-all;">
+                        {if let Some(private_key) = &self.generated_private_key {
+                            if self.show_private_key {
+                                private_key.clone()
+                            } else {
+                                "••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••".to_string()
+                            }
+                        } else {
+                            "Private key will appear here after generation".to_string()
+                        }}
+                    </div>
+                </div>
+                
+                {if let Some(_) = &self.generated_private_key {
+                    html! {
+                        <div class="mb-4">
+                            <label class="form-label">{"Confirm Private Key"}</label>
+                            <input type="password" class="form-control"
+                                   value={self.key_confirmation.clone()}
+                                   oninput={link.callback(|e: InputEvent| {
+                                       let input: HtmlInputElement = e.target_unchecked_into();
+                                       RegistrationMsg::UpdateKeyConfirmation(input.value())
+                                   })}
+                                   placeholder="Enter your private key to confirm" />
+                            
+                        </div>
+                    }
+                } else {
+                    html! {}
+                }}
+                
+                {self.render_status_notification()}
+                
+                <div class="d-grid">
+                    <button type="button" class="btn btn-primary btn-lg"
+                            onclick={link.callback(|_| RegistrationMsg::SubmitRegistration)}
+                            disabled={!self.validate_complete_form()}>
+                        {if self.processing {
+                            html! {
+                                <>
+                                    <span class="spinner-border spinner-border-sm me-2"></span>
+                                    {"Registering..."}
+                                </>
+                            }
+                        } else {
+                            html! { "Complete Registration" }
+                        }}
+                    </button>
+                </div>
+            </div>
+        }
+    }
+
+    fn render_email_verification_step(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        
+        html! {
+            <div class="step-content">
+                <h4 class="mb-4">{"Email Verification"}</h4>
+                
+                <div class="mb-4">
+                    <div class="d-flex align-items-center">
+                        <input type="email" class="form-control me-3" 
+                               value={self.email.clone()} readonly=true />
+                        {match self.email_status {
+                            EmailVerificationStatus::NotStarted => html! {
+                                <button type="button" class="btn btn-outline-primary"
+                                        onclick={link.callback(|_| RegistrationMsg::SendEmailVerification)}>
+                                    {"Send Verification"}
+                                </button>
+                            },
+                            EmailVerificationStatus::Pending => html! {
+                                <div class="text-warning">
+                                    <i class="bi bi-clock-history me-2"></i>
+                                    {"Waiting..."}
+                                </div>
+                            },
+                            EmailVerificationStatus::Verified => html! {
+                                <div class="text-success">
+                                    <i class="bi bi-check-circle-fill me-2"></i>
+                                    {"Verified"}
+                                </div>
+                            },
+                            EmailVerificationStatus::Failed => html! {
+                                <div class="text-danger">
+                                    <i class="bi bi-x-circle-fill me-2"></i>
+                                    {"Failed"}
+                                </div>
+                            },
+                        }}
+                    </div>
+                </div>
+                
+                
+                <div class="d-grid">
+                    <button type="button" class="btn btn-primary"
+                            onclick={link.callback(|_| RegistrationMsg::NextStep)}
+                            disabled={self.email_status != EmailVerificationStatus::Verified}>
+                        {"Continue"}
+                    </button>
+                </div>
+            </div>
+        }
+    }
+
+    fn render_key_generation_step(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        
+        html! {
+            <div class="step-content">
+                <h4 class="mb-4">{"Generate Secp256k1 Keys"}</h4>
+                
+                <div class="mb-3">
+                    <label class="form-label">{"Secret Phrase"}</label>
+                    <input type="password" class="form-control"
+                           value={self.secret_phrase.clone()}
+                           oninput={link.callback(|e: InputEvent| {
+                               let input: HtmlInputElement = e.target_unchecked_into();
+                               RegistrationMsg::UpdateSecretPhrase(input.value())
+                           })}
+                           placeholder="Enter a secret phrase to generate your keys" />
+                </div>
+                
+                <div class="mb-4">
+                    <button type="button" class="btn btn-primary"
+                            onclick={link.callback(|_| RegistrationMsg::GenerateKeys)}
+                            disabled={self.secret_phrase.trim().is_empty()}>
+                        <i class="bi bi-key me-2"></i>
+                        {"Generate Keys"}
+                    </button>
+                </div>
+                
+                {if let Some(private_key) = &self.generated_private_key {
+                    html! {
+                        <div class="mb-4">
+                            <div class="d-flex justify-content-between align-items-center mb-2">
+                                <label class="form-label mb-0">{"Generated Private Key"}</label>
+                                <div>
+                                    <button type="button" class="btn btn-sm btn-outline-secondary me-2"
+                                            onclick={link.callback(|_| RegistrationMsg::TogglePrivateKeyVisibility)}>
+                                        {if self.show_private_key { "Hide" } else { "Show" }}
+                                    </button>
+                                    <button type="button" class="btn btn-sm btn-primary"
+                                            onclick={link.callback(|_| RegistrationMsg::CopyPrivateKey)}>
+                                        <i class="bi bi-copy me-1"></i>
+                                        {"Copy"}
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="bg-dark text-light p-3 rounded font-monospace small" 
+                                 style="word-break: break-all;">
+                                {if self.show_private_key {
+                                    private_key.clone()
+                                } else {
+                                    "••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••".to_string()
+                                }}
+                            </div>
+                        </div>
+                    }
+                } else {
+                    html! {}
+                }}
+                
+            </div>
+        }
+    }
+
+    fn render_key_confirmation_step(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        
+        html! {
+            <div class="step-content">
+                <h4 class="mb-4">{"Confirm Private Key"}</h4>
+                
+                <p class="mb-4">{"Please enter your private key to confirm you have saved it securely:"}</p>
+                
+                <div class="mb-4">
+                    <div class="d-flex align-items-center gap-2">
+                        <input type="password" class="form-control font-monospace"
+                               value={self.private_key_input.clone()}
+                               oninput={link.callback(|e: InputEvent| {
+                                   let input: HtmlInputElement = e.target_unchecked_into();
+                                   RegistrationMsg::UpdatePrivateKeyInput(input.value())
+                               })}
+                               placeholder="Enter your private key..." />
+                        
+                        {if !self.private_key_input.is_empty() {
+                            let is_correct = self.generated_private_key.as_ref()
+                                .map(|pk| pk == &self.private_key_input.trim())
+                                .unwrap_or(false);
+                            
+                            if is_correct {
+                                html! {
+                                    <button type="button" class="btn btn-success"
+                                            onclick={link.callback(|_| RegistrationMsg::SubmitRegistration)}
+                                            disabled={self.processing}>
+                                        {if self.processing {
+                                            html! {
+                                                <>
+                                                    <span class="spinner-border spinner-border-sm me-2"></span>
+                                                    {"Registering..."}
+                                                </>
+                                            }
+                                        } else {
+                                            html! { "Register" }
+                                        }}
+                                    </button>
+                                }
+                            } else {
+                                html! {
+                                    <button type="button" class="btn btn-outline-danger" disabled=true>
+                                        {"Invalid Key"}
+                                    </button>
+                                }
+                            }
+                        } else {
+                            html! {
+                                <button type="button" class="btn btn-outline-secondary" disabled=true>
+                                    {"Register"}
+                                </button>
+                            }
+                        }}
+                    </div>
+                    
+                    {if !self.private_key_input.is_empty() {
+                        let is_correct = self.generated_private_key.as_ref()
+                            .map(|pk| pk == &self.private_key_input.trim())
+                            .unwrap_or(false);
+                        
+                        if is_correct {
+                            html! {
+                                <div class="alert alert-success mt-2">
+                                    <i class="bi bi-check-circle me-2"></i>
+                                    {"Private key confirmed successfully!"}
+                                </div>
+                            }
+                        } else {
+                            html! {
+                                <div class="alert alert-danger mt-2">
+                                    <i class="bi bi-x-circle me-2"></i>
+                                    {"Private key does not match. Please try again."}
+                                </div>
+                            }
+                        }
+                    } else {
+                        html! {}
+                    }}
+                </div>
+                
+            </div>
+        }
+    }
+
+    fn render_complete_step(&self) -> Html {
+        html! {
+            <div class="step-content text-center">
+                <div class="mb-4">
+                    <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
+                </div>
+                <h4 class="mb-3">{"Registration Complete!"}</h4>
+                <p class="text-muted">{"Your self-sovereign identity has been created successfully."}</p>
+                <div class="alert alert-info">
+                    <strong>{"Email:"}</strong> {&self.email}<br/>
+                    <strong>{"Public Key:"}</strong> 
+                    <code class="d-block mt-2 small text-break">
+                        {self.generated_public_key.as_ref().unwrap_or(&String::new())}
+                    </code>
+                </div>
+            </div>
+        }
+    }
+
+    fn validate_complete_form(&self) -> bool {
+        !self.name.trim().is_empty() && 
+        !self.email.trim().is_empty() && 
+        self.email_status == EmailVerificationStatus::Verified &&
+        self.generated_private_key.is_some() &&
+        if let Some(private_key) = &self.generated_private_key {
+            self.key_confirmation == *private_key
+        } else {
+            false
+        }
+    }
+
+
+    fn send_email_verification(&mut self, ctx: &Context<Self>) {
+        self.email_status = EmailVerificationStatus::Pending;
+        
+        let server_url = ctx.props().config.server_url.clone();
+        let email = self.email.clone();
+        let link = ctx.link().clone();
+        // Send verification request
+        wasm_bindgen_futures::spawn_local(async move {
+            let url = format!("{}/api/send-verification", server_url);
+            let body = serde_json::json!({
+                "email": email
+            });
+            
+            // Make HTTP request to server
+            let mut opts = web_sys::RequestInit::new();
+            opts.method("POST");
+            opts.mode(web_sys::RequestMode::Cors);
+            
+            let headers = web_sys::Headers::new().unwrap();
+            headers.set("Content-Type", "application/json").unwrap();
+            opts.headers(&headers);
+            
+            opts.body(Some(&wasm_bindgen::JsValue::from_str(&body.to_string())));
+            
+            let request = web_sys::Request::new_with_str_and_init(&url, &opts).unwrap();
+            
+            let window = web_sys::window().unwrap();
+            match wasm_bindgen_futures::JsFuture::from(window.fetch_with_request(&request)).await {
+                Ok(_response) => {
+                    web_sys::console::log_1(&format!("Email verification sent to: {}", email).into());
+                }
+                Err(e) => {
+                    web_sys::console::error_1(&format!("Failed to send verification: {:?}", e).into());
+                }
+            }
+            
+            // Set up SSE connection for verification status
+            let sse_url = format!("{}/api/verification-status/{}", server_url, email);
+            
+            match EventSource::new(&sse_url) {
+                Ok(event_source) => {
+                    let link_clone = link.clone();
+                    let onmessage_callback = Closure::wrap(Box::new(move |e: MessageEvent| {
+                        if let Some(data) = e.data().as_string() {
+                            if data == "verified" {
+                                link_clone.send_message(RegistrationMsg::EmailVerified);
+                            } else if data == "failed" {
+                                link_clone.send_message(RegistrationMsg::EmailVerificationFailed);
+                            }
+                        }
+                    }) as Box<dyn FnMut(_)>);
+                    
+                    event_source.set_onmessage(Some(onmessage_callback.as_ref().unchecked_ref()));
+                    onmessage_callback.forget();
+                }
+                Err(_) => {
+                    link.send_message(RegistrationMsg::EmailVerificationFailed);
+                }
+            }
+        });
+    }
+
+    fn generate_secp256k1_keys(&mut self) {
+        use sha2::{Sha256, Digest};
+        
+        // Use secret phrase to derive private key deterministically
+        let mut hasher = Sha256::new();
+        hasher.update(self.secret_phrase.as_bytes());
+        let hash = hasher.finalize();
+        
+        // Generate secp256k1 keypair from hash
+        match SecretKey::from_slice(&hash) {
+            Ok(secret_key) => {
+                let public_key = secret_key.public_key();
+                
+                // Store keys as hex strings
+                self.generated_private_key = Some(hex::encode(secret_key.to_bytes()));
+                self.generated_public_key = Some(hex::encode(public_key.to_encoded_point(false).as_bytes()));
+            }
+            Err(_) => {
+                self.errors.push("Failed to generate valid private key from secret phrase".to_string());
+            }
+        }
+    }
+
+    fn copy_private_key(&mut self) {
+        if let Some(private_key) = &self.generated_private_key {
+            // Use web API to copy to clipboard
+            if let Some(window) = web_sys::window() {
+                let navigator = window.navigator().clipboard();
+                let _ = navigator.write_text(private_key);
+                self.key_copied = true;
+            }
+        }
+    }
+
+    fn submit_registration(&mut self, ctx: &Context<Self>) {
+        self.processing = true;
+        
+        let server_url = ctx.props().config.server_url.clone();
+        let email = self.email.clone();
+        let public_key = self.generated_public_key.as_ref().unwrap().clone();
+        let link = ctx.link().clone();
+        
+        wasm_bindgen_futures::spawn_local(async move {
+            let _url = format!("{}/api/register", server_url);
+            let _body = serde_json::json!({
+                "email": email,
+                "public_key": public_key
+            });
+            
+            // In a real implementation, make HTTP request here
+            web_sys::console::log_1(&format!("Registering: {} with key: {}", email, public_key).into());
+            
+            // Simulate API call
+            let timeout = Timeout::new(2000, move || {
+                link.send_message(RegistrationMsg::RegistrationComplete);
+            });
+            timeout.forget();
+        });
+    }
+}

server/Cargo.toml

@@ -0,0 +1,25 @@
+[package]
+name = "self-server"
+version = "0.1.0"
+edition = "2021"
+
+[[bin]]
+name = "server"
+path = "src/main.rs"
+
+[dependencies]
+tokio = { version = "1.0", features = ["full"] }
+axum = "0.7"
+tower = "0.4"
+tower-http = { version = "0.5", features = ["cors", "fs"] }
+serde = { workspace = true }
+serde_json = { workspace = true }
+uuid = { version = "1.0", features = ["v4"] }
+lettre = "0.11"
+tokio-stream = { version = "0.1", features = ["sync"] }
+futures-util = "0.3"
+async-stream = "0.3"
+tracing = "0.1"
+tracing-subscriber = "0.3"
+anyhow = "1.0"
+clap = { version = "4.0", features = ["derive"] }

server/src/main.rs

@@ -0,0 +1,325 @@
+use axum::{
+    extract::{Path, Request, State},
+    http::{header, StatusCode},
+    middleware::Next,
+    response::{IntoResponse, Response, Sse},
+    routing::{get, post},
+    Json, Router,
+};
+use serde::{Deserialize, Serialize};
+use std::{
+    collections::HashMap,
+    sync::{Arc, Mutex},
+    time::Duration,
+};
+use tokio::sync::broadcast;
+use tokio_stream::{wrappers::BroadcastStream, StreamExt};
+use tower_http::cors::CorsLayer;
+use tracing::{info, warn};
+use uuid::Uuid;
+use clap::Parser;
+
+#[derive(Parser, Debug)]
+#[command(author, version, about, long_about = None)]
+struct Args {
+    /// Port to run the server on
+    #[arg(short, long, default_value_t = 8080)]
+    port: u16,
+    
+    /// Base URL for verification links
+    #[arg(long, default_value = "http://localhost:8080")]
+    base_url: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+struct EmailVerificationRequest {
+    email: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+struct RegistrationRequest {
+    email: String,
+    public_key: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+struct RegistrationResponse {
+    success: bool,
+    message: String,
+    user_id: Option<String>,
+}
+
+#[derive(Debug, Clone)]
+struct VerificationStatus {
+    email: String,
+    verified: bool,
+    verification_token: String,
+}
+
+type VerificationStore = Arc<Mutex<HashMap<String, VerificationStatus>>>;
+type NotificationSender = broadcast::Sender<String>;
+
+#[derive(Clone)]
+struct AppState {
+    verifications: VerificationStore,
+    notification_tx: NotificationSender,
+    base_url: String,
+}
+
+#[tokio::main]
+async fn main() -> anyhow::Result<()> {
+    let args = Args::parse();
+    
+    tracing_subscriber::fmt::init();
+
+    let verifications: VerificationStore = Arc::new(Mutex::new(HashMap::new()));
+    let (notification_tx, _) = broadcast::channel(100);
+
+    let state = AppState {
+        verifications,
+        notification_tx,
+        base_url: args.base_url.clone(),
+    };
+
+    let app = Router::new()
+        .route("/api/send-verification", post(send_verification))
+        .route("/api/verification-status/:email", get(verification_status_sse))
+        .route("/api/verify/:token", get(verify_email))
+        .route("/api/register", post(register_user))
+        .route("/health", get(health_check))
+        .layer(axum::middleware::from_fn(log_requests))
+        .layer(
+            CorsLayer::new()
+                .allow_origin(tower_http::cors::Any)
+                .allow_methods([axum::http::Method::GET, axum::http::Method::POST])
+                .allow_headers([header::CONTENT_TYPE, header::AUTHORIZATION])
+                .allow_credentials(false),
+        )
+        .with_state(state);
+
+    let bind_address = format!("127.0.0.1:{}", args.port);
+    let listener = tokio::net::TcpListener::bind(&bind_address).await?;
+    info!("Server running on http://{}", bind_address);
+    
+    axum::serve(listener, app).await?;
+    Ok(())
+}
+
+async fn log_requests(req: Request, next: Next) -> Response {
+    let method = req.method().clone();
+    let uri = req.uri().clone();
+    info!("🌐 {} {}", method, uri);
+    next.run(req).await
+}
+
+async fn health_check() -> impl IntoResponse {
+    Json(serde_json::json!({
+        "status": "healthy",
+        "service": "self-server"
+    }))
+}
+
+async fn send_verification(
+    State(state): State<AppState>,
+    Json(request): Json<EmailVerificationRequest>,
+) -> impl IntoResponse {
+    info!("📧 Received email verification request for: {}", request.email);
+    let verification_token = Uuid::new_v4().to_string();
+    let verification_url = format!("{}/api/verify/{}", state.base_url, verification_token);
+    
+    // Store verification status
+    {
+        let mut verifications = state.verifications.lock().unwrap();
+        verifications.insert(
+            request.email.clone(),
+            VerificationStatus {
+                email: request.email.clone(),
+                verified: false,
+                verification_token: verification_token.clone(),
+            },
+        );
+    }
+
+    // For development: output verification link to console (no SMTP needed)
+    info!(
+        "Email verification requested for: {} - Verification URL: {}",
+        request.email, verification_url
+    );
+
+    // Display verification link in console for development
+    let verification_url_clone = verification_url.clone();
+    let email_clone = request.email.clone();
+    tokio::spawn(async move {
+        tokio::time::sleep(Duration::from_secs(1)).await;
+        println!("\n🔗 EMAIL VERIFICATION LINK for {}:", email_clone);
+        println!("   {}", verification_url_clone);
+        println!("   Click this link to verify your email\n");
+    });
+
+    Json(serde_json::json!({
+        "success": true,
+        "message": "Verification email sent",
+        "verification_url": verification_url // Remove in production
+    }))
+}
+
+async fn verification_status_sse(
+    Path(email): Path<String>,
+    State(state): State<AppState>,
+) -> impl IntoResponse {
+    let mut rx = state.notification_tx.subscribe();
+    
+    let stream = async_stream::stream! {
+        loop {
+            match rx.recv().await {
+                Ok(notification) => {
+                    if notification.starts_with(&email) {
+                        let status = notification.split(':').nth(1).unwrap_or("unknown");
+                        yield Ok::<_, axum::Error>(axum::response::sse::Event::default().data(status));
+                    }
+                }
+                Err(_) => break,
+            }
+        }
+    };
+
+    Sse::new(stream).keep_alive(
+        axum::response::sse::KeepAlive::new()
+            .interval(Duration::from_secs(30))
+            .text("keep-alive"),
+    )
+}
+
+async fn verify_email(
+    Path(token): Path<String>,
+    State(state): State<AppState>,
+) -> impl IntoResponse {
+    let mut email_to_notify = None;
+    
+    // Find and update verification status
+    {
+        let mut verifications = state.verifications.lock().unwrap();
+        for (email, status) in verifications.iter_mut() {
+            if status.verification_token == token {
+                status.verified = true;
+                email_to_notify = Some(email.clone());
+                break;
+            }
+        }
+    }
+
+    match email_to_notify {
+        Some(email) => {
+            // Notify via SSE
+            let notification = format!("{}:verified", email);
+            let _ = state.notification_tx.send(notification);
+            
+            info!("Email verified successfully: {}", email);
+            
+            // Return HTML response for user
+            Response::builder()
+                .status(StatusCode::OK)
+                .header("Content-Type", "text/html")
+                .body(format!(
+                    r#"
+                    <!DOCTYPE html>
+                    <html>
+                    <head>
+                        <title>Email Verified</title>
+                        <style>
+                            body {{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
+                                   text-align: center; padding: 2rem; background: #f8f9fa; }}
+                            .container {{ max-width: 500px; margin: 0 auto; background: white; 
+                                        padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }}
+                            .success {{ color: #198754; font-size: 3rem; margin-bottom: 1rem; }}
+                            h1 {{ color: #333; margin-bottom: 1rem; }}
+                            p {{ color: #666; line-height: 1.6; }}
+                        </style>
+                    </head>
+                    <body>
+                        <div class="container">
+                            <div class="success">✅</div>
+                            <h1>Email Verified Successfully!</h1>
+                            <p>Your email address <strong>{}</strong> has been verified.</p>
+                            <p>You can now close this tab and continue with your registration.</p>
+                        </div>
+                    </body>
+                    </html>
+                    "#,
+                    email
+                ))
+                .unwrap()
+        }
+        None => {
+            warn!("Invalid verification token: {}", token);
+            Response::builder()
+                .status(StatusCode::BAD_REQUEST)
+                .header("Content-Type", "text/html")
+                .body(
+                    r#"
+                    <!DOCTYPE html>
+                    <html>
+                    <head>
+                        <title>Verification Failed</title>
+                        <style>
+                            body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
+                                   text-align: center; padding: 2rem; background: #f8f9fa; }
+                            .container { max-width: 500px; margin: 0 auto; background: white; 
+                                        padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+                            .error { color: #dc3545; font-size: 3rem; margin-bottom: 1rem; }
+                            h1 { color: #333; margin-bottom: 1rem; }
+                            p { color: #666; line-height: 1.6; }
+                        </style>
+                    </head>
+                    <body>
+                        <div class="container">
+                            <div class="error">❌</div>
+                            <h1>Verification Failed</h1>
+                            <p>The verification link is invalid or has expired.</p>
+                            <p>Please request a new verification email.</p>
+                        </div>
+                    </body>
+                    </html>
+                    "#.to_string()
+                )
+                .unwrap()
+        }
+    }
+}
+
+async fn register_user(
+    State(state): State<AppState>,
+    Json(request): Json<RegistrationRequest>,
+) -> impl IntoResponse {
+    // Check if email is verified
+    let is_verified = {
+        let verifications = state.verifications.lock().unwrap();
+        verifications
+            .get(&request.email)
+            .map(|status| status.verified)
+            .unwrap_or(false)
+    };
+
+    if !is_verified {
+        return Json(RegistrationResponse {
+            success: false,
+            message: "Email not verified".to_string(),
+            user_id: None,
+        });
+    }
+
+    // Generate user ID
+    let user_id = Uuid::new_v4().to_string();
+    
+    // In a real implementation, store user data in database
+    info!(
+        "User registered successfully - Email: {}, Public Key: {}, User ID: {}",
+        request.email, request.public_key, user_id
+    );
+
+    Json(RegistrationResponse {
+        success: true,
+        message: "Registration completed successfully".to_string(),
+        user_id: Some(user_id),
+    })
+}