trying validation in settings

PXNX · Dec 23, 2023 · e06789f · e06789f
1 parent 114784e
commit e06789f
Show file tree

Hide file tree

Showing 9 changed files with 432 additions and 81 deletions.
diff --git a/public/styles.css b/public/styles.css
diff --git a/src/routes/article.rs b/src/routes/article.rs
@@ -7,6 +7,8 @@ use axum::{Form, Router};
 use axum::extract::Path;
 use axum::response::Redirect;
 use axum::routing::{get, put};
+use axum_htmx::HX_REDIRECT;
+use http::HeaderMap;
 use serde::{Deserialize, Serialize};
 use sqlx::{PgPool, query};
 
@@ -104,8 +106,11 @@ async fn publish_article(
         .fetch_one(&db_pool)
         .await?;
 
-//TODO: redirect properly, don't swap
-    Ok(Redirect::to(format!("/a/{}", query.id).as_str()))
+
+    let mut headers = HeaderMap::new();
+    headers.insert(HX_REDIRECT, format!("/article/{}", query.id).parse().unwrap());
+
+    Ok((headers, ))
 }
 
 #[derive(Clone, Debug, Deserialize, Serialize)]

diff --git a/src/routes/mod.rs b/src/routes/mod.rs
@@ -7,6 +7,9 @@ use axum::{
     response::{IntoResponse, Response},
     Router, routing::get,
 };
+use axum_htmx::HX_REDIRECT;
+use http::header::{CACHE_CONTROL, CONTENT_ENCODING, CONTENT_TYPE};
+use http::HeaderMap;
 use rust_embed::RustEmbed;
 use serde::{de::DeserializeOwned, Deserialize};
 use sqlx::PgPool;
@@ -151,15 +154,13 @@ impl<T> IntoResponse for StaticFile<T>
                     "utf-8" //TODO: just don't have any encoding here?
                 };
 
-                (
-                    [
-                        (header::CONTENT_TYPE, mime.as_ref()),
-                        (header::CONTENT_ENCODING, encoding),
-                        (header::CACHE_CONTROL, "36000")
-                    ],
-                    content.data,
-                )
-                    .into_response()
+                let mut headers = HeaderMap::new();
+                //   headers.insert(HX_TRIGGER, "close".parse().unwrap());
+                headers.insert(CONTENT_TYPE, mime.to_string().parse().unwrap());
+                headers.insert(CONTENT_ENCODING, encoding.parse().unwrap());
+                headers.insert(CACHE_CONTROL, "public, max-age=604800, s-maxage=43200".parse().unwrap());
+                //  headers.insert(StatusCode::CREATED)
+                (headers, content.data).into_response()
             }
             None => (StatusCode::NOT_FOUND, "404 Not Found").into_response(),
         }

diff --git a/src/routes/pages.rs b/src/routes/pages.rs
@@ -15,3 +15,4 @@ pub async fn index<T>(
 ) -> Result<impl IntoResponse, AppError> {
     Ok(IndexTemplate {})
 }
+
diff --git a/src/routes/profile.rs b/src/routes/profile.rs
@@ -1,11 +1,15 @@
 use askama::Template;
+use askama_axum::Response;
 use axum::{
     extract::{Extension, Path, State},
     http::StatusCode,
     response::{IntoResponse, Redirect},
     routing::get,
     Form, Router,
 };
+use axum_htmx::{HX_REDIRECT, HX_TRIGGER};
+use http::HeaderMap;
+use oauth2::HttpResponse;
 use serde::{Deserialize, Serialize};
 use sqlx::{PgPool, query};
 
@@ -90,6 +94,13 @@ struct ProfileSettingsTemplate {
     user_avatar: String,
 }
 
+#[derive(Template)]
+#[template(path = "user/settings_wrong_input.html")]
+struct ProfileSettingsInputWrongTemplate {
+    user_name: String,
+    user_avatar: String,
+}
+
 async fn profile_settings(
     Extension(user_data): Extension<Option<UserData>>,
     State(db_pool): State<PgPool>,
@@ -117,19 +128,39 @@ async fn edit_profile(
     Extension(user_data): Extension<Option<UserData>>,
     State(db_pool): State<PgPool>,
     Form(input): Form<EditProfile>,
-) -> Result<impl IntoResponse, AppError> {
+) -> Response {
     let user_id = user_data.unwrap().id;
 
+    if input.user_name.len() < 5 {
+        let mut headers = HeaderMap::new();
+        //   headers.insert(HX_TRIGGER, "close".parse().unwrap());
+
+        //  headers.insert(StatusCode::CREATED)
+        return ProfileSettingsInputWrongTemplate {
+            user_name: input.user_name,
+
+            user_avatar: input.user_avatar,
+        }.render().unwrap().into_response();
+    }
+
     query!(
         r#"UPDATE users SET name = $1, avatar = $2 WHERE id=$3;"#,
         input.user_name,
         input.user_avatar,
         &user_id
     )
         .execute(&db_pool)
-        .await?;
+        .await.unwrap();
 
-    Ok(Redirect::to("/")) //format!("/u/{user_id}")
+    let mut headers = HeaderMap::new();
+    //   headers.insert(HX_TRIGGER, "close".parse().unwrap());
+    headers.insert(HX_REDIRECT, "/user/settings".to_string().parse().unwrap());
+    //  headers.insert(StatusCode::CREATED)
+
+
+    [
+        (HX_REDIRECT, "/user/settings".to_string()),
+    ].into_response()
 }
 
 #[derive(Clone, Debug, Deserialize, Serialize)]

diff --git a/templates/article/create.html b/templates/article/create.html
@@ -12,7 +12,7 @@
         <button class="btn" onclick="my_modal_2.showModal()">
             <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path
-                    d="M5 19V5H12V12H19V13C19.7 13 20.37 13.13 21 13.35V9L15 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H13.35C13.13 20.37 13 19.7 13 19H5M14 4.5L19.5 10H14V4.5M22.5 17.25L17.75 22L15 19L16.16 17.84L17.75 19.43L21.34 15.84L22.5 17.25Z" />
+                        d="M5 19V5H12V12H19V13C19.7 13 20.37 13.13 21 13.35V9L15 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H13.35C13.13 20.37 13 19.7 13 19H5M14 4.5L19.5 10H14V4.5M22.5 17.25L17.75 22L15 19L16.16 17.84L17.75 19.43L21.34 15.84L22.5 17.25Z"/>
             </svg>
         </button>
 
@@ -23,50 +23,160 @@
 
 <body>
 
-    <main class="m-2">
+<main class="m-2">
+
+    <div class="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
+        <div class="flex items-center justify-between px-3 py-2 border-b dark:border-gray-600">
+            <div class="flex flex-wrap items-center divide-gray-200 sm:divide-x sm:rtl:divide-x-reverse dark:divide-gray-600">
+                <div class="flex items-center space-x-1 rtl:space-x-reverse sm:pe-4">
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                             viewBox="0 0 12 20">
+                            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2"
+                                  d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6"/>
+                        </svg>
+                        <span class="sr-only">Attach file</span>
+                    </button>
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                             viewBox="0 0 16 20">
+                            <path d="M8 0a7.992 7.992 0 0 0-6.583 12.535 1 1 0 0 0 .12.183l.12.146c.112.145.227.285.326.4l5.245 6.374a1 1 0 0 0 1.545-.003l5.092-6.205c.206-.222.4-.455.578-.7l.127-.155a.934.934 0 0 0 .122-.192A8.001 8.001 0 0 0 8 0Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"/>
+                        </svg>
+                        <span class="sr-only">Embed map</span>
+                    </button>
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                             viewBox="0 0 16 20">
+                            <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
+                            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
+                        </svg>
+                        <span class="sr-only">Upload image</span>
+                    </button>
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                             viewBox="0 0 16 20">
+                            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"/>
+                            <path d="M14.067 0H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.933-2ZM6.709 13.809a1 1 0 1 1-1.418 1.409l-2-2.013a1 1 0 0 1 0-1.412l2-2a1 1 0 0 1 1.414 1.414L5.412 12.5l1.297 1.309Zm6-.6-2 2.013a1 1 0 1 1-1.418-1.409l1.3-1.307-1.295-1.295a1 1 0 0 1 1.414-1.414l2 2a1 1 0 0 1-.001 1.408v.004Z"/>
+                        </svg>
+                        <span class="sr-only">Format code</span>
+                    </button>
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                             viewBox="0 0 20 20">
+                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM13.5 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm3.5 9.5A5.5 5.5 0 0 1 4.6 11h10.81A5.5 5.5 0 0 1 10 15.5Z"/>
+                        </svg>
+                        <span class="sr-only">Add emoji</span>
+                    </button>
+                </div>
+                <div class="flex flex-wrap items-center space-x-1 rtl:space-x-reverse sm:ps-4">
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                             viewBox="0 0 21 18">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M9.5 3h9.563M9.5 9h9.563M9.5 15h9.563M1.5 13a2 2 0 1 1 3.321 1.5L1.5 17h5m-5-15 2-1v6m-2 0h4"/>
+                        </svg>
+                        <span class="sr-only">Add list</span>
+                    </button>
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                             viewBox="0 0 20 20">
+                            <path d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"/>
+                        </svg>
+                        <span class="sr-only">Settings</span>
+                    </button>
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                             viewBox="0 0 20 20">
+                            <path d="M18 2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM2 18V7h6.7l.4-.409A4.309 4.309 0 0 1 15.753 7H18v11H2Z"/>
+                            <path d="M8.139 10.411 5.289 13.3A1 1 0 0 0 5 14v2a1 1 0 0 0 1 1h2a1 1 0 0 0 .7-.288l2.886-2.851-3.447-3.45ZM14 8a2.463 2.463 0 0 0-3.484 0l-.971.983 3.468 3.468.987-.971A2.463 2.463 0 0 0 14 8Z"/>
+                        </svg>
+                        <span class="sr-only">Timeline</span>
+                    </button>
+                    <button type="button"
+                            class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                             viewBox="0 0 20 20">
+                            <path d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z"/>
+                            <path d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
+                        </svg>
+                        <span class="sr-only">Download</span>
+                    </button>
+                </div>
+            </div>
+            <button type="button" data-tooltip-target="tooltip-fullscreen"
+                    class="p-2 text-gray-500 rounded cursor-pointer sm:ms-auto hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+                <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                     viewBox="0 0 19 19">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M13 1h5m0 0v5m0-5-5 5M1.979 6V1H7m0 16.042H1.979V12M18 12v5.042h-5M13 12l5 5M2 1l5 5m0 6-5 5"/>
+                </svg>
+                <span class="sr-only">Full screen</span>
+            </button>
+            <div id="tooltip-fullscreen" role="tooltip"
+                 class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                Show full screen
+                <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
+        </div>
+        <div class="px-4 py-2 bg-white rounded-b-lg dark:bg-gray-800">
+            <label for="editor" class="sr-only">Publish post</label>
+            <textarea id="editor" rows="8"
+                      class="block w-full px-0 text-sm text-gray-800 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
+                      placeholder="Write an article..." required form="publish_article"
+                      name="article_content"></textarea>
+        </div>
+    </div>
 
-        <input class="input input-bordered w-full max-w-sm" form="publish_article" name="article_content"
-            placeholder="Write article" type="text" />
 
+    <dialog class="modal" id="my_modal_2">
+        <div class="modal-box">
+            <h3 class="text-lg font-bold">Publish article?</h3>
 
-        <dialog class="modal" id="my_modal_2">
-            <div class="modal-box">
-                <h3 class="text-lg font-bold">Publish article?</h3>
+            <!--  hx-trigger="click[ctrlKey]"-->
 
-                <form class="form-control w-full max-w-sm space-y-4" hx-ext="debug" hx-post="/a/create"
-                    id="publish_article">
+            <form class="form-control w-full max-w-sm space-y-4" hx-ext="debug" hx-post="/article/create"
 
+                  id="publish_article">
 
-                    <div>
 
-                        <label>
-                            Article Title
-                            <input class="input input-bordered w-full max-w-sm" name="article_title"
-                                placeholder="Enter the title..." required type="text" />
-                        </label>
-                    </div>
+                <div>
 
+                    <label>
+                        Article Title
+                        <input class="input input-bordered w-full max-w-sm" name="article_title"
+                               placeholder="Enter the title..." required type="text"/>
+                    </label>
+                </div>
 
-                    {% if newspapers.len() != 0 %}
-                    <select class="select select-bordered w-full max-w-sm" name="publisher">
-                        <option value="None">Yourself</option>
-                        {% for newspaper in newspapers %}
-                        <option value="{{newspaper.newspaper_id}}">{{newspaper.newspaper_name}}</option>
 
-                        {% endfor %}
-                    </select>
-                    {% endif %}
+                {% if newspapers.len() != 0 %}
+                <select class="select select-bordered w-full max-w-sm" name="publisher">
+                    <option value="None">Yourself</option>
+                    {% for newspaper in newspapers %}
+                    <option value="{{newspaper.newspaper_id}}">{{newspaper.newspaper_name}}</option>
 
+                    {% endfor %}
+                </select>
+                {% endif %}
 
-                    <button class="btn btn-primary" hx-ext="debug">Publish article</button>
-                </form>
-            </div>
 
-
-            <form class="modal-backdrop" method="dialog">
-                <button>close</button>
+                <button class="btn btn-primary" hx-ext="debug">Publish article</button>
             </form>
-        </dialog>
-    </main>
+        </div>
+
+
+        <form class="modal-backdrop" method="dialog">
+            <button>close</button>
+        </form>
+    </dialog>
+</main>
 </body>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
@@ -13,10 +13,13 @@
     <link href="/dist/manifest.webmanifest" rel="manifest">
     <link rel="icon" type="image/x-icon" href="/dist/favicon.ico"/>
 
-    <!--   <script type="module" src="/dist/app.js"></script>
-   <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
-   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
--->
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/gh/maxeckel/alpine-editor@0.3.1/dist/alpine-editor.min.js"></script>
+
+    <script type="module" src="/dist/app.js"></script>
+    <!--   <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
+ -->
     <!--<script type="module" src="/dist/topojson.js"></script>
 <script type="module" src="/dist/d3.v7.min.js"></script>
 -->