fedimint_server_ui/
invite_code.rs

1use maud::{Markup, PreEscaped, html};
2use qrcode::QrCode;
3use qrcode::render::svg;
4
5// Function to generate QR code SVG from input string
6pub fn generate_qr_code_svg(data: &str) -> String {
7    QrCode::new(data)
8        .expect("Failed to generate QR code - should never happen with valid invite code")
9        .render()
10        .min_dimensions(300, 300)
11        .max_dimensions(300, 300)
12        .quiet_zone(false)
13        .dark_color(svg::Color("#000000"))
14        .light_color(svg::Color("#ffffff"))
15        .build()
16}
17
18// Card with button to open the invite code modal
19pub fn invite_code_card() -> Markup {
20    html! {
21        div class="card h-100" {
22            div class="card-header dashboard-header" { "Invite Code" }
23            div class="card-body d-flex flex-column justify-content-center align-items-center" {
24                // Information about the invite code
25                p class="text-center mb-4" {
26                    "Share this invite code with users to onboard them to your federation."
27                }
28
29                // Button to open the modal
30                button type="button" class="btn btn-primary setup-btn"
31                       data-bs-toggle="modal" data-bs-target="#inviteCodeModal" {
32                    "View Invite Code"
33                }
34            }
35        }
36    }
37}
38
39// Modal displaying the invite code QR code
40pub fn invite_code_modal(invite_code: &str) -> Markup {
41    html! {
42        // Modal for Invite Code QR
43        div class="modal fade" id="inviteCodeModal" tabindex="-1" aria-labelledby="inviteCodeModalLabel" aria-hidden="true" {
44            div class="modal-dialog modal-dialog-centered" style="max-width: 360px;" {
45                div class="modal-content" {
46                    div class="modal-header py-1" {
47                        h5 class="modal-title fs-6" id="inviteCodeModalLabel" { "Invite Code" }
48                        button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" {}
49                    }
50                    div class="modal-body" style="padding: 30px; text-align: center;" {
51                        // QR Code with 30px padding all around
52                        (PreEscaped(generate_qr_code_svg(invite_code)))
53                    }
54                    div class="modal-footer justify-content-center py-2" {
55                        // Copy button - centered and larger
56                        button type="button" class="btn btn-primary" id="copyInviteCodeBtn"
57                            onclick=(format!("navigator.clipboard.writeText('{}'); this.innerText='Copied!'; setTimeout(() => this.innerText='Copy Invite Code', 2000);", invite_code)) {
58                            "Copy Invite Code"
59                        }
60                    }
61                }
62            }
63        }
64    }
65}