settings impl (#48)

* page * pre changes * initial settings page * refactor login modal * settings base final * refactor * refactoring * fixes * refactoring * final * fixes * fixes * fix crash
brewpipeline · Nov 21, 2023 · 0fccf86 · 0fccf86
1 parent be580a2
commit 0fccf86
Show file tree

Hide file tree

Showing 15 changed files with 659 additions and 98 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -15,6 +15,7 @@ chrono = { version = "0.4", features = ["unstable-locales"] }
 
 yew = { version = "0.21" }
 yew-router = { version = "0.18" }
+yew-alt-html = { version = "0.4" }
 yew-hooks = { version = "0.3", optional = true }
 
 wasm-bindgen-futures = { version = "0.4", optional = true }

diff --git a/src/components/auth_user_block.rs b/src/components/auth_user_block.rs
@@ -2,7 +2,6 @@ use yew::prelude::*;
 use yew_router::prelude::*;
 
 use crate::components::author_image::*;
-use crate::components::item::*;
 use crate::components::svg_image::*;
 use crate::content::*;
 use crate::utils::*;
@@ -17,7 +16,7 @@ pub fn auth_user_block() -> Html {
         return html! {};
     }
 
-    let Some(token) = logged_user_context.token().cloned() else {
+    let Some(_) = logged_user_context.token().cloned() else {
         return html! {
             <button
                 aria-label="Войти"
@@ -34,83 +33,59 @@ pub fn auth_user_block() -> Html {
         };
     };
 
-    let params = Tokened {
-        token: token.clone(),
-        params: AuthorMeParams,
-    };
-
-    let component = {
-        let logged_user_context = logged_user_context.clone();
-        let token = token.clone();
-        move |author: Option<Author>| {
-            if let Some(author) = author.clone() {
-                logged_user_context.dispatch(LoggedUserState::ActiveAndLoaded {
-                    token: token.clone(),
-                    author,
-                });
-            }
-            html! {
-                <div class="d-flex dropdown dropdown-menu-end">
-                    <div
-                        class="img-block item d-flex rounded"
-                        style="overflow:hidden;width:38px;"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                        type="button"
-                    >
-                        <AuthorImage author={ author.clone() } />
-                    </div>
-                    if let Some(author) = author.as_ref() {
-                        <ul class="dropdown-menu text-small" >
-                            <li>
-                                <Link<Route, (), Author>
-                                    classes="dropdown-item"
-                                    to={ Route::Author { slug: author.slug.clone() } }
-                                    state={ Some(author.clone()) }
-                                >
-                                    { &author.slug }
-                                </Link<Route, (), Author>>
-                            </li>
-                            <li>
-                                <Link<Route, ()>
-                                    classes="dropdown-item"
-                                    to={ Route::MyUnpublishedPosts }
-                                >
-                                    { "Неопубликованное" }
-                                </Link<Route, ()>>
-                            </li>
-                            // <li><a class="dropdown-item" href="#"> { "Настройки" } </a></li>
-                            <li><hr class="dropdown-divider" /></li>
-                            <li>
-                                <button
-                                    class="dropdown-item"
-                                    type="button"
-                                    data-bs-toggle="modal"
-                                    data-bs-target="#logoutModal"
-                                >
-                                    { "Выход" }
-                                </button>
-                            </li>
-                        </ul>
-                    }
-                </div>
-            }
-        }
-    };
-
-    let error_component = {
-        let logged_user_context = logged_user_context.clone();
-        move |_| {
-            logged_user_context.dispatch(LoggedUserState::LoggedOut);
-            html! {}
-        }
-    };
+    let author = logged_user_context.author().cloned();
 
     html! {
-        <Item<API<AuthorContainer>, Tokened<AuthorMeParams>>
-            r#type={ LoadType::Params(params) }
-            { component }
-            { error_component }
-        />
+        <div class="d-flex dropdown dropdown-menu-end">
+            <div
+                class="img-block item d-flex rounded"
+                style="overflow:hidden;width:38px;"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+                type="button"
+            >
+                <AuthorImage author={ author.clone() } />
+            </div>
+            <ul class="dropdown-menu text-small" >
+                if let Some(author) = author.as_ref() {
+                    <li>
+                        <Link<Route, (), Author>
+                            classes="dropdown-item"
+                            to={ Route::Author { slug: author.slug.clone() } }
+                            state={ Some(author.clone()) }
+                        >
+                            { blog_generic::clean_author_slug(&author.slug) }
+                        </Link<Route, (), Author>>
+                    </li>
+                    <li>
+                        <Link<Route, ()>
+                            classes="dropdown-item"
+                            to={ Route::MyUnpublishedPosts }
+                        >
+                            { "Неопубликованное" }
+                        </Link<Route, ()>>
+                    </li>
+                    <li>
+                        <Link<Route, ()>
+                            classes="dropdown-item"
+                            to={ Route::Settings }
+                        >
+                            { "Настройки" }
+                        </Link<Route, ()>>
+                    </li>
+                    <li><hr class="dropdown-divider" /></li>
+                    <li>
+                        <button
+                            class="dropdown-item"
+                            type="button"
+                            data-bs-toggle="modal"
+                            data-bs-target="#logoutModal"
+                        >
+                            { "Выход" }
+                        </button>
+                    </li>
+                }
+            </ul>
+        </div>
     }
 }
diff --git a/src/components/author_card.rs b/src/components/author_card.rs
@@ -129,7 +129,7 @@ pub fn author_card(props: &AuthorCardProps) -> Html {
                     <p class="card-text placeholder-glow">
                         <small class="text-body-secondary">
                             if let Some(slug) = author.as_ref().map(|a| a.slug.clone()) {
-                                { slug }
+                                { blog_generic::clean_author_slug(&slug) }
                             } else {
                                 <span class="placeholder col-2 bg-secondary"></span>
                             }

diff --git a/src/components/comment_card.rs b/src/components/comment_card.rs
@@ -101,7 +101,7 @@ pub fn comment_card(props: &CommentCardProps) -> Html {
                                 state={ Some(comment.author.clone()) }
                             >
                                 <strong>
-                                    { &comment.author.slug }
+                                    { blog_generic::clean_author_slug(&comment.author.slug) }
                                 </strong>
                             </Link<Route, (), content::Author>>
                         } else {

diff --git a/src/components/login_modal.rs b/src/components/login_modal.rs
@@ -13,6 +13,8 @@ use web_sys::{Element, HtmlElement, HtmlInputElement};
 use yew::prelude::*;
 
 use crate::components::delayed_component::*;
+#[cfg(feature = "telegram")]
+use crate::components::telegram_button::*;
 #[cfg(feature = "client")]
 use crate::content::*;
 use crate::utils::*;
@@ -85,6 +87,46 @@ pub fn login_modal(props: &LoginModalProps) -> Html {
         });
     }
 
+    #[cfg(feature = "client")]
+    {
+        let logged_user_context = logged_user_context.clone();
+        let close_node_ref = close_node_ref.clone();
+        use_effect_with(logged_user_context, move |logged_user_context| {
+            if logged_user_context.is_not_inited() {
+                return;
+            }
+            let LoggedUserState::Active { token } = (**logged_user_context).state().clone() else {
+                return;
+            };
+            let logged_user_context = logged_user_context.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match API::<AuthorContainer>::get(Tokened {
+                    token: token.clone(),
+                    params: AuthorMeParams,
+                })
+                .await
+                {
+                    Ok(active_author_result) => match active_author_result {
+                        API::Success {
+                            identifier: _,
+                            description: _,
+                            data: AuthorContainer { author },
+                        } => {
+                            logged_user_context
+                                .dispatch(LoggedUserState::ActiveAndLoaded { token, author });
+                        }
+                        API::Failure { identifier, reason } => {
+                            logged_user_context.dispatch(LoggedUserState::LoggedOut);
+                        }
+                    },
+                    Err(err) => {
+                        logged_user_context.dispatch(LoggedUserState::LoggedOut);
+                    }
+                }
+            })
+        });
+    }
+
     let username_node_ref = use_node_ref();
     let password_node_ref = use_node_ref();
 
@@ -151,7 +193,6 @@ pub fn login_modal(props: &LoginModalProps) -> Html {
                 let logged_user_context = logged_user_context.clone();
                 EventListener::new(&modal_element, "yandex.auth.data", move |e| {
                     let e = e.dyn_ref::<CustomEvent>().unwrap();
-                    e.prevent_default();
                     if let Some(login_yandex_question) = e
                         .detail()
                         .as_string()
@@ -171,7 +212,6 @@ pub fn login_modal(props: &LoginModalProps) -> Html {
             let error_listener = {
                 let logged_user_context = logged_user_context.clone();
                 EventListener::new(&modal_element, "yandex.auth.error", move |e| {
-                    e.prevent_default();
                     logged_user_context
                         .dispatch(LoggedUserState::Error("yandex widget error".to_string()));
                 })
@@ -194,7 +234,6 @@ pub fn login_modal(props: &LoginModalProps) -> Html {
                 let logged_user_context = logged_user_context.clone();
                 EventListener::new(&modal_element, "telegram.auth.data", move |e| {
                     let e = e.dyn_ref::<CustomEvent>().unwrap();
-                    e.prevent_default();
                     if let Some(login_telegram_question) = e
                         .detail()
                         .as_string()
@@ -274,18 +313,10 @@ pub fn login_modal(props: &LoginModalProps) -> Html {
     let telegram_html = html! {
         <div class="telegramAuth mb-4">
             <div class="telegramAuthContainer">
-                <script
-                    async=true
-                    src="https://telegram.org/js/telegram-widget.js?22"
-                    data-telegram-login={ crate::TELEGRAM_BOT_LOGIN }
-                    data-size="large"
-                    data-radius="5"
-                    data-onauth={ format!(
-                        "document.getElementById('{modal_id}').dispatchEvent(new CustomEvent('telegram.auth.data', {{detail: JSON.stringify(user)}}))",
-                        modal_id = id
-                    ) }
-                    data-request-access="write"
-                ></script>
+                <TelegramButton onauth={ format!(
+                    "document.getElementById('{modal_id}').dispatchEvent(new CustomEvent('telegram.auth.data', {{detail: JSON.stringify(user)}}))",
+                    modal_id = id
+                ) } />
             </div>
         </div>
     };

diff --git a/src/components/mod.rs b/src/components/mod.rs
@@ -20,6 +20,8 @@ pub mod search_button;
 pub mod search_field;
 pub mod simple_title_card;
 pub mod svg_image;
+#[cfg(feature = "telegram")]
+pub mod telegram_button;
 pub mod warning;
 #[cfg(feature = "yandex")]
 pub mod yandex_token;

diff --git a/src/components/post_card.rs b/src/components/post_card.rs
@@ -113,7 +113,7 @@ pub fn post_card(props: &PostCardProps) -> Html {
                                 state={ Some(post.author.clone()) }
                             >
                                 <strong>
-                                    { &post.author.slug }
+                                    { blog_generic::clean_author_slug(&post.author.slug) }
                                 </strong>
                             </Link<Route, (), Author>>
                         } else {

diff --git a/src/components/search_field.rs b/src/components/search_field.rs
@@ -18,7 +18,8 @@ impl SearchMode {
         match route {
             Route::PostsSearch { query } => Self::Posts { query: Some(query) },
             Route::AuthorsSearch { query } => Self::Authors { query: Some(query) },
-            Route::NotFound
+            Route::Settings
+            | Route::NotFound
             | Route::PostsSearchRoot
             | Route::NewPost
             | Route::EditPost { id: _ }

diff --git a/src/components/svg_image.rs b/src/components/svg_image.rs
@@ -87,3 +87,13 @@ pub fn yandex_img() -> Html {
         </svg>
     }
 }
+
+#[function_component(CounterclockwiseImg)]
+pub fn counterclockwise_img() -> Html {
+    html! {
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16" style="margin-bottom: 2px;">
+            <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+            <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+        </svg>
+    }
+}
diff --git a/src/components/telegram_button.rs b/src/components/telegram_button.rs
@@ -0,0 +1,25 @@
+use yew::prelude::*;
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct TelegramButtonProps {
+    pub onauth: String,
+}
+
+#[function_component(TelegramButton)]
+pub fn optional_image(props: &TelegramButtonProps) -> Html {
+    let TelegramButtonProps { onauth } = props.clone();
+
+    html! {
+        <div style="height: 40px;">
+            <script
+                async=true
+                src="https://telegram.org/js/telegram-widget.js?22"
+                data-telegram-login={ crate::TELEGRAM_BOT_LOGIN }
+                data-size="large"
+                data-radius="5"
+                data-onauth={ onauth }
+                data-request-access="write"
+            ></script>
+        </div>
+    }
+}