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
|
// services/frontend-leptos/frontend/src/auth.rs
|
||||||
use crate::api::auth as auth_api;
|
use crate::api::auth as auth_api;
|
||||||
use crate::app::AuthContext;
|
use crate::app::AuthContext;
|
||||||
|
use crate::app::UiContext;
|
||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
|
use shared_types::ui_state::Tab;
|
||||||
use wasm_bindgen_futures::spawn_local;
|
use wasm_bindgen_futures::spawn_local;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn AuthOverlay() -> impl IntoView {
|
pub fn AuthOverlay() -> impl IntoView {
|
||||||
let auth = use_context::<AuthContext>().expect("AuthContext not provided");
|
let auth = use_context::<AuthContext>().expect("AuthContext not provided");
|
||||||
|
let ui = use_context::<UiContext>();
|
||||||
let (password, set_password) = signal(String::new());
|
let (password, set_password) = signal(String::new());
|
||||||
let (error, set_error) = signal(Option::<String>::None);
|
let (error, set_error) = signal(Option::<String>::None);
|
||||||
let (loading, set_loading) = signal(false);
|
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! {
|
view! {
|
||||||
<div class="modal-overlay">
|
<div class="modal-overlay">
|
||||||
<div class="modal-content auth-box">
|
<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">
|
<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">
|
<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"/>
|
<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" }}
|
{move || if loading.get() { "Memproses..." } else { "Masuk" }}
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
on:click=skip_dismiss
|
||||||
|
class="btn btn-ghost btn-sm"
|
||||||
|
style="width:100%"
|
||||||
|
>
|
||||||
|
"Lihat dashboard saja"
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user