add: cloudflare turnstile captcha

add: "popular communities" card in communities list

crates/app/src/langs/en-US.toml

@@ -48,6 +48,8 @@ version = "1.0.0"
 "communities:action.select" = "Select"
 "communities:label.create_new" = "Create new community"
 "communities:label.name" = "Name"
+"communities:label.my_communities" = "My communities"
+"communities:label.popular_communities" = "Popular communities"
 "communities:action.join" = "Join"
 "communities:action.cancel_request" = "Cancel request"
 "communities:action.leave" = "Leave"

crates/app/src/public/css/style.css

@@ -149,6 +149,11 @@ article {
 }
 
 /* typo */
+ul,
+ol {
+    margin-left: 1rem;
+}
+
 pre,
 code {
     font-family: "Jetbrains Mono", "Fire Code", monospace;

crates/app/src/public/html/auth/register.html

@@ -1,6 +1,11 @@
 {% extends "auth/base.html" %} {% block head %}
 <title>Register</title>
 {% endblock %} {% block title %}Register{% endblock %} {% block content %}
+<script
+    src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+    defer
+></script>
+
 <form class="w-full flex flex-col gap-4" onsubmit="register(event)">
     <div class="flex flex-col gap-1">
         <label for="username"><b>Username</b></label>
@@ -24,6 +29,48 @@
         />
     </div>
 
+    <hr />
+
+    <div class="card-nest w-full">
+        <div class="card small flex items-center gap-2">
+            {{ icon "scroll-text" }}
+            <b>Policies</b>
+        </div>
+
+        <div class="card secondary flex flex-col gap-2">
+            <span>By continuing, you agree to the following policies:</span>
+
+            <ul>
+                <li>
+                    <a href="{{ config.policies.terms_of_service }}"
+                        >Terms of service</a
+                    >
+                </li>
+
+                <li>
+                    <a href="{{ config.policies.privacy }}">Privacy policy</a>
+                </li>
+            </ul>
+
+            <div class="flex gap-2">
+                <input
+                    type="checkbox"
+                    name="policy_consent"
+                    id="policy_consent"
+                    class="w-content"
+                    required
+                />
+                <label for="policy_consent">I agree</label>
+            </div>
+        </div>
+    </div>
+
+    <div
+        class="cf-turnstile"
+        data-sitekey="{{ config.turnstile.site_key }}"
+    ></div>
+
+    <hr />
     <button>Submit</button>
 </form>
 
@@ -38,6 +85,10 @@
             body: JSON.stringify({
                 username: e.target.username.value,
                 password: e.target.password.value,
+                policy_consent: e.target.policy_consent.checked,
+                captcha_response: e.target.querySelector(
+                    "[name=cf-turnstile-response]",
+                ).value,
             }),
         })
             .then((res) => res.json())

crates/app/src/public/html/communities/list.html

@@ -30,8 +30,31 @@
             </button>
         </form>
     </div>
-    {% endif %} {% for item in list %} {{
-    components::community_listing_card(community=item) }} {% endfor %}
+    {% endif %}
+
+    <div class="card-nest w-full">
+        <div class="card small flex items-center gap-2">
+            {{ icon "award" }}
+            <span>{{ text "communities:label.my_communities" }}</span>
+        </div>
+
+        <div class="card flex flex-col gap-2">
+            {% for item in list %} {{
+            components::community_listing_card(community=item) }} {% endfor %}
+        </div>
+    </div>
+
+    <div class="card-nest w-full">
+        <div class="card small flex items-center gap-2">
+            {{ icon "trending-up" }}
+            <span>{{ text "communities:label.popular_communities" }}</span>
+        </div>
+
+        <div class="card flex flex-col gap-2">
+            {% for item in popular_list %} {{
+            components::community_listing_card(community=item) }} {% endfor %}
+        </div>
+    </div>
 </main>
 
 <script>

crates/app/src/public/html/components.html

@@ -51,7 +51,7 @@ community %}
 />
 {% endif %} {%- endmacro %} {% macro community_listing_card(community) -%}
 <a
-    class="card w-full flex items-center gap-4"
+    class="card secondary w-full flex items-center gap-4"
     href="/community/{{ community.title }}"
 >
     {{ components::community_avatar(id=community.id, community=community,

crates/app/src/routes/api/v1/auth/mod.rs

@@ -3,7 +3,7 @@ pub mod ipbans;
 pub mod profile;
 pub mod social;
 
-use super::AuthProps;
+use super::{LoginProps, RegisterProps};
 use crate::{
     State, get_user_from_token,
     model::{ApiReturn, Error, auth::User},
@@ -16,12 +16,14 @@ use axum::{
 use axum_extra::extract::CookieJar;
 use tetratto_shared::hash::hash;
 
+use cf_turnstile::{SiteVerifyRequest, TurnstileClient};
+
 /// `/api/v1/auth/register`
 pub async fn register_request(
     headers: HeaderMap,
     jar: CookieJar,
     Extension(data): Extension<State>,
-    Json(props): Json<AuthProps>,
+    Json(props): Json<RegisterProps>,
 ) -> impl IntoResponse {
     let data = &(data.read().await).0;
     let user = get_user_from_token!(jar, data);
@@ -50,8 +52,31 @@ pub async fn register_request(
         return (None, Json(Error::NotAllowed.into()));
     }
 
+    // check captcha
+    let client = TurnstileClient::new(data.0.turnstile.secret_key.clone().into());
+
+    let validated = match client
+        .siteverify(SiteVerifyRequest {
+            response: props.captcha_response,
+            ..Default::default()
+        })
+        .await
+    {
+        Ok(v) => v,
+        Err(e) => return (None, Json(Error::MiscError(e.to_string()).into())),
+    };
+
+    if !validated.success | !props.policy_consent {
+        return (
+            None,
+            Json(Error::MiscError("Captcha failed".to_string()).into()),
+        );
+    }
+
     // ...
     let mut user = User::new(props.username, props.password);
+    user.settings.policy_consent = true;
+
     let (initial_token, t) = User::create_token(&real_ip);
     user.tokens.push(t);
 
@@ -81,7 +106,7 @@ pub async fn login_request(
     headers: HeaderMap,
     jar: CookieJar,
     Extension(data): Extension<State>,
-    Json(props): Json<AuthProps>,
+    Json(props): Json<LoginProps>,
 ) -> impl IntoResponse {
     let data = &(data.read().await).0;
     let user = get_user_from_token!(jar, data);

crates/app/src/routes/api/v1/mod.rs

@@ -188,11 +188,19 @@ pub fn routes() -> Router {
 }
 
 #[derive(Deserialize)]
-pub struct AuthProps {
+pub struct LoginProps {
     pub username: String,
     pub password: String,
 }
 
+#[derive(Deserialize)]
+pub struct RegisterProps {
+    pub username: String,
+    pub password: String,
+    pub policy_consent: bool,
+    pub captcha_response: String,
+}
+
 #[derive(Deserialize)]
 pub struct CreateCommunity {
     pub title: String,

crates/app/src/routes/pages/communities.rs

@@ -108,6 +108,11 @@ pub async fn list_request(jar: CookieJar, Extension(data): Extension<State>) ->
         Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
     };
 
+    let popular_list = match data.0.get_popular_communities().await {
+        Ok(p) => p,
+        Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
+    };
+
     let mut communities: Vec<Community> = Vec::new();
     for membership in &list {
         match data.0.get_community_by_id(membership.community).await {
@@ -118,7 +123,9 @@ pub async fn list_request(jar: CookieJar, Extension(data): Extension<State>) ->
 
     let lang = get_lang!(jar, data.0);
     let mut context = initial_context(&data.0.0, lang, &Some(user)).await;
+
     context.insert("list", &communities);
+    context.insert("popular_list", &popular_list);
 
     // return
     Ok(Html(