feat(corp/rih): display & load captcha element inside the form r/6233

Change-Id: Ifd0f85d9e4f785c4cb1ae56ae67e6d999ff43c85
Reviewed-on: https://cl.tvl.fyi/c/depot/+/8694
Tested-by: BuildkiteCI
Reviewed-by: tazjin <tazjin@tvl.su>

2 files changed, 32 insertions, 3 deletions

diff --git a/corp/rih/src/home.html b/corp/rih/src/home.html
index 7f2614497949..95a77877d317 100644
--- a/corp/rih/src/home.html
+++ b/corp/rih/src/home.html
@@ -1,5 +1,17 @@
 html! {
 <main>
+  <script>
+    {r#"function captchaOnload(sitekey) {
+      if (window.smartCaptcha) {
+        const container = document.getElementById('captcha-container');
+        const widgetId = window.smartCaptcha.render(container, {
+            sitekey: sitekey,
+            hl: 'en',
+        });
+      }
+    }"#}
+  </script>
+
   <div class="container px-4 pt-5 my-5 text-center">
     <div class="row">
       <div class="col-7 ms-auto">
@@ -156,6 +168,8 @@ html! {
             <div id="personalDetailsHelp" class="form-text">{"Any specific places where you'd like to live? Would you be moving with family? Any other assistance required?"}</div>
           </div>
 
+          <div id="captcha-container" class="smart-captcha mb-3" style="height: 100px" />
+
           <button type="submit" class="btn btn-primary" disabled=true>{"Submit"}</button>
           <p class="pt-2"><i>{"This page is still under construction! Please reach out at contact@ if you have any questions."}</i></p>
         </form>
diff --git a/corp/rih/src/main.rs b/corp/rih/src/main.rs
index 7360a6979d76..2fed9dfd8f4a 100644
--- a/corp/rih/src/main.rs
+++ b/corp/rih/src/main.rs
@@ -1,8 +1,7 @@
 use fuzzy_matcher::skim::SkimMatcherV2;
 use fuzzy_matcher::FuzzyMatcher;
 use gloo::console;
-use gloo::history::BrowserHistory;
-use gloo::history::History;
+use gloo::history::{BrowserHistory, History};
 use gloo::storage::{LocalStorage, Storage};
 use rand::seq::IteratorRandom;
 use rand::thread_rng;
@@ -10,12 +9,21 @@ use serde::{Deserialize, Serialize};
 use static_markdown::markdown;
 use std::collections::BTreeSet;
 use wasm_bindgen::closure::Closure;
-use wasm_bindgen::JsCast;
+use wasm_bindgen::{JsCast, JsValue};
 use web_sys::{HtmlInputElement, HtmlTextAreaElement, KeyboardEvent};
 use yew::html::Scope;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
+/// Form submission is protected with a captcha. The development
+/// version of the captcha does not do domain checking and works on
+/// `localhost` as well.
+#[cfg(debug_assertions)]
+const CAPTCHA_KEY: &'static str = "ysc1_K7iOi3FSmsyO8pZGu8Im2iQClCtPsVx7jSRyhyCV435a732c";
+
+#[cfg(not(debug_assertions))]
+const CAPTCHA_KEY: &'static str = "ysc1_a3LVlaDRDMwU8CLSZ0WKENTI2exyOxz5J2c6x28P5339d410";
+
 /// This code ends up being compiled for the native and for the
 /// webassembly architectures during the build & test process.
 /// However, the `rust_iso3166` crate exposes a different API (!)
@@ -388,6 +396,13 @@ impl Component for App {
             Route::NotFound => todo!(),
         }
     }
+
+    fn rendered(&mut self, _: &Context<Self>, first_render: bool) {
+        if first_render {
+            let func = js_sys::Function::new_with_args("key", "captchaOnload(key)");
+            let _ = func.call1(&JsValue::NULL, &JsValue::from_str(CAPTCHA_KEY));
+        }
+    }
 }
 
 fn main() {