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

Change-Id: Ifd0f85d9e4f785c4cb1ae56ae67e6d999ff43c85
Reviewed-on: https://cl.tvl.fyi/c/depot/+/8694
Tested-by: BuildkiteCI
Reviewed-by: tazjin <tazjin@tvl.su>
This commit is contained in:
Vincent Ambo 2023-06-02 12:48:52 +03:00 committed by tazjin
parent b2ff63586a
commit 6f0ddbac06
5 changed files with 39 additions and 7 deletions

1
corp/rih/Cargo.lock generated
View file

@ -1085,6 +1085,7 @@ dependencies = [
"fuzzy-matcher",
"getrandom",
"gloo",
"js-sys",
"rand",
"rust_iso3166",
"serde",

View file

@ -7,14 +7,15 @@ edition = "2021"
[dependencies]
fuzzy-matcher = "0.3.7"
getrandom = { version = "0.2", features = ["js"] }
gloo = "0.8"
js-sys = "0.3"
rand = "0.8"
rust_iso3166 = "0.1.10"
serde_json = "1.0"
serde_urlencoded = "*" # pinned by yew
yew = { version = "0.20", features = ["csr"] }
yew-router = "0.17"
rand = "0.8"
getrandom = { version = "0.2", features = ["js"] }
# needs to be in sync with nixpkgs
wasm-bindgen = "= 0.2.84"

View file

@ -11,7 +11,8 @@
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<!-- Captcha setup -->
<script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer></script>
</head>
<body>
</body>
</html>

View file

@ -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>

View file

@ -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() {