feat(users): show alert when email is unconfirmed

locales/leptos/en/shared.yaml

@@ -59,3 +59,4 @@ terms_of_service: Terms of service
 unpublished: Unpublished
 view_more: View more
 view_source_code: View source code
+you_should_go_to_the_following_link_to_confirm_your_email_address: You should go to the following link to confirm your email address

locales/leptos/es/shared.yaml

@@ -59,3 +59,4 @@ terms_of_service: Términos de servicio
 unpublished: Sin publicar
 view_more: Ver más
 view_source_code: Ver código fuente
+you_should_go_to_the_following_link_to_confirm_your_email_address: Deberías ir al siguiente enlace para confirmar tu dirección de correo electrónico

locales/leptos/pt/shared.yaml

@@ -59,3 +59,4 @@ terms_of_service: Termos de serviço
 unpublished: Não publicado
 view_more: Ver mais
 view_source_code: Ver código fonte
+you_should_go_to_the_following_link_to_confirm_your_email_address: Você deve acessar o seguinte link para confirmar seu endereço de e-mail

mango3-home/src/app.rs

@@ -4,7 +4,7 @@ use leptos_router::components::{Route, Router, Routes};
 use leptos_router::{ParamSegment, StaticSegment};
 
 use mango3_leptos_utils::components::{
-    AppProvider, AppTitle, BottomBar, Brand, FaviconLink, LoadingOverlay, SearchBar, TopBar,
+    AppProvider, AppTitle, BottomBar, Brand, FaviconLink, LoadingOverlay, SearchBar, TopBar, UnconfirmedEmailAlert,
 };
 use mango3_leptos_utils::constants::KEY_PARAM_NAME;
 use mango3_leptos_utils::context::use_basic_config;
@@ -56,6 +56,8 @@ pub fn App() -> impl IntoView {
                             }
                         />
 
+                        <UnconfirmedEmailAlert />
+
                         <main class="grow md:m-6 m-4">
                             <Routes fallback=NotFoundPage>
                                 <Route path=StaticSegment("") view=IndexPage />

mango3-leptos-utils/src/components/action_form_alert.rs

@@ -59,7 +59,7 @@ pub fn ActionFormAlert(
 #[component]
 pub fn ActionFormError(#[prop(into)] message: ViewFn, status: RwSignal<ActionFormStatus>) -> impl IntoView {
     view! {
-        <div class="pt-2 pb-2 has-[div:empty]:hidden" class:hidden=move || !status.get().is_error()>
+        <div class="py-2 has-[div:empty]:hidden" class:hidden=move || !status.get().is_error()>
             <div role="alert" class="alert alert-error">
                 {message.run()}
             </div>

mango3-leptos-utils/src/components/mod.rs

@@ -34,6 +34,7 @@ mod text_field;
 mod textarea_field;
 mod time_ago;
 mod top_bar;
+mod unconfirmed_email_alert;
 mod user_card;
 mod user_tag;
 mod website_card;
@@ -69,6 +70,7 @@ pub use text_field::TextField;
 pub use textarea_field::TextareaField;
 pub use time_ago::TimeAgo;
 pub use top_bar::TopBar;
+pub use unconfirmed_email_alert::UnconfirmedEmailAlert;
 pub use user_card::UserCard;
 pub use user_tag::{UserAvatar, UserLabels, UserTag, UserTagLink};
 pub use website_card::WebsiteCard;

mango3-leptos-utils/src/components/unconfirmed_email_alert.rs

@@ -0,0 +1,69 @@
+use codee::string::FromToStringCodec;
+use leptos::prelude::*;
+use leptos_use::{use_cookie_with_options, SameSite, UseCookieOptions};
+
+use crate::components::CurrentUser;
+use crate::context::use_basic_config;
+use crate::i18n::{t, use_i18n};
+use crate::icons::ExclamationOutlined;
+
+#[component]
+pub fn UnconfirmedEmailAlert() -> impl IntoView {
+    view! {
+        <CurrentUser let:user>
+            <Show when=move || {
+                !user.email_is_confirmed
+            }>
+                {move || {
+                    let i18n = use_i18n();
+                    let basic_config = use_basic_config();
+                    let (is_hidden, set_is_hidden) = use_cookie_with_options::<
+                        bool,
+                        FromToStringCodec,
+                    >(
+                        "_mango3_hide_unconfirmed_email_alert",
+                        UseCookieOptions::default()
+                            .max_age(3600000)
+                            .domain(basic_config.domain.clone())
+                            .path("/")
+                            .same_site(SameSite::Strict),
+                    );
+                    let edit_email_url = format!("{}edit-email", basic_config.my_account_url);
+                    let edit_email_url_label = edit_email_url
+                        .clone()
+                        .split("://")
+                        .last()
+                        .expect("Could not get edit email label")
+                        .to_owned();
+
+                    view! {
+                        <div
+                            role="alert"
+                            class="alert alert-warning mx-3 mt-3"
+                            class:hidden=move || is_hidden.get().unwrap_or_default()
+                        >
+                            <ExclamationOutlined />
+
+                            <span>
+                                {t!(i18n, shared.you_should_go_to_the_following_link_to_confirm_your_email_address)}
+                                ": " <a class="link font-bold" href=edit_email_url.clone()>
+                                    {edit_email_url_label.clone()}
+                                </a>
+                            </span>
+
+                            <button
+                                class="btn btn-circle btn-ghost"
+                                on:click=move |event| {
+                                    event.prevent_default();
+                                    set_is_hidden.set(Some(true));
+                                }
+                            >
+                                "✕"
+                            </button>
+                        </div>
+                    }
+                }}
+            </Show>
+        </CurrentUser>
+    }
+}

mango3-leptos-utils/src/icons/exclamation.rs

@@ -0,0 +1,21 @@
+use leptos::prelude::*;
+
+#[component]
+pub fn ExclamationOutlined() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+            />
+        </svg>
+    }
+}

mango3-leptos-utils/src/icons/mod.rs

@@ -3,6 +3,7 @@ use leptos::prelude::*;
 mod bars;
 mod chevron;
 mod document;
+mod exclamation;
 mod eye;
 mod home;
 mod information_circle;
@@ -16,6 +17,7 @@ mod users;
 pub use bars::Bars3Outlined;
 pub use chevron::{ChevronDownMini, ChevronUpMini};
 pub use document::{DocumentOutlined, DocumentTextOutlined};
+pub use exclamation::ExclamationOutlined;
 pub use eye::{EyeMini, EyeSlashMini};
 pub use home::HomeOutlined;
 pub use information_circle::InformationCircleOutlined;

mango3-my-account/src/app.rs

@@ -4,7 +4,9 @@ use leptos_router::components::{ParentRoute, Route, Router, Routes};
 use leptos_router::StaticSegment;
 
 use mango3_leptos_utils::async_t_string;
-use mango3_leptos_utils::components::*;
+use mango3_leptos_utils::components::{
+    AppProvider, AppTitle, BottomBar, Brand, FaviconLink, GoToMango3, LoadingOverlay, TopBar,
+};
 use mango3_leptos_utils::i18n::use_i18n;
 use mango3_leptos_utils::pages::NotFoundPage;
 use mango3_leptos_utils::utils::ToSignalTrait;

mango3-studio/src/app.rs

@@ -4,7 +4,9 @@ use leptos_router::components::{ParentRoute, Route, Router, Routes};
 use leptos_router::{ParamSegment, StaticSegment};
 
 use mango3_leptos_utils::async_t_string;
-use mango3_leptos_utils::components::*;
+use mango3_leptos_utils::components::{
+    AppProvider, AppTitle, BottomBar, Brand, FaviconLink, GoToMango3, LoadingOverlay, TopBar, UnconfirmedEmailAlert,
+};
 use mango3_leptos_utils::i18n::use_i18n;
 use mango3_leptos_utils::pages::NotFoundPage;
 use mango3_leptos_utils::utils::ToSignalTrait;
@@ -40,6 +42,8 @@ pub fn App() -> impl IntoView {
                             right_items=move |_| view! { <GoToMango3 /> }
                         />
 
+                        <UnconfirmedEmailAlert />
+
                         <main class="flex flex-col grow md:m-6 m-4">
                             <Routes fallback=NotFoundPage>
                                 <Route path=StaticSegment("") view=IndexPage />

mango3-websites/src/app.rs

@@ -5,7 +5,9 @@ use leptos_router::components::{Route, Router, Routes};
 use leptos_router::{ParamSegment, StaticSegment};
 
 use mango3_leptos_utils::async_t_string;
-use mango3_leptos_utils::components::{AppProvider, AppTitle, BottomBar, FaviconLink, LoadingOverlay};
+use mango3_leptos_utils::components::{
+    AppProvider, AppTitle, BottomBar, FaviconLink, LoadingOverlay, UnconfirmedEmailAlert,
+};
 use mango3_leptos_utils::constants::KEY_PARAM_NAME;
 use mango3_leptos_utils::context::use_basic_config;
 use mango3_leptos_utils::i18n::{t, use_i18n};
@@ -65,6 +67,8 @@ pub fn App() -> impl IntoView {
                     <Router>
                         <WebsiteTopBar />
 
+                        <UnconfirmedEmailAlert />
+
                         <main class="grow md:m-6 m-4">
                             <Routes fallback=NotFoundPage>
                                 <Route path=StaticSegment("") view=IndexPage />