feat(fe): add close/skip button to auth overlay so users aren't stuck
This commit is contained in:
@@ -1,12 +1,15 @@
|
||||
// services/frontend-leptos/frontend/src/auth.rs
|
||||
use crate::api::auth as auth_api;
|
||||
use crate::app::AuthContext;
|
||||
use crate::app::UiContext;
|
||||
use leptos::prelude::*;
|
||||
use shared_types::ui_state::Tab;
|
||||
use wasm_bindgen_futures::spawn_local;
|
||||
|
||||
#[component]
|
||||
pub fn AuthOverlay() -> impl IntoView {
|
||||
let auth = use_context::<AuthContext>().expect("AuthContext not provided");
|
||||
let ui = use_context::<UiContext>();
|
||||
let (password, set_password) = signal(String::new());
|
||||
let (error, set_error) = signal(Option::<String>::None);
|
||||
let (loading, set_loading) = signal(false);
|
||||
@@ -50,10 +53,22 @@ pub fn AuthOverlay() -> impl IntoView {
|
||||
});
|
||||
};
|
||||
|
||||
let tab_messages = ui.as_ref().map(|u| u.active_tab);
|
||||
let skip_dismiss = move |_| {
|
||||
if let Some(ref t) = tab_messages {
|
||||
t.set(Tab::Messages);
|
||||
}
|
||||
};
|
||||
|
||||
view! {
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-content auth-box">
|
||||
<div class="modal-body">
|
||||
<div class="modal-body" style="position:relative">
|
||||
<button
|
||||
on:click=skip_dismiss
|
||||
style="position:absolute;top:0;right:0;background:none;border:none;color:var(--text-tertiary);font-size:1.25rem;cursor:pointer;padding:0.25rem;line-height:1"
|
||||
title="Tutup"
|
||||
>"×"</button>
|
||||
<div class="auth-lock">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||||
@@ -80,6 +95,13 @@ pub fn AuthOverlay() -> impl IntoView {
|
||||
>
|
||||
{move || if loading.get() { "Memproses..." } else { "Masuk" }}
|
||||
</button>
|
||||
<button
|
||||
on:click=skip_dismiss
|
||||
class="btn btn-ghost btn-sm"
|
||||
style="width:100%"
|
||||
>
|
||||
"Lihat dashboard saja"
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user