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:
		
							parent
							
								
									b2ff63586a
								
							
						
					
					
						commit
						6f0ddbac06
					
				
					 5 changed files with 39 additions and 7 deletions
				
			
		
							
								
								
									
										1
									
								
								corp/rih/Cargo.lock
									
										
									
										generated
									
									
									
								
							
							
						
						
									
										1
									
								
								corp/rih/Cargo.lock
									
										
									
										generated
									
									
									
								
							| 
						 | 
					@ -1085,6 +1085,7 @@ dependencies = [
 | 
				
			||||||
 "fuzzy-matcher",
 | 
					 "fuzzy-matcher",
 | 
				
			||||||
 "getrandom",
 | 
					 "getrandom",
 | 
				
			||||||
 "gloo",
 | 
					 "gloo",
 | 
				
			||||||
 | 
					 "js-sys",
 | 
				
			||||||
 "rand",
 | 
					 "rand",
 | 
				
			||||||
 "rust_iso3166",
 | 
					 "rust_iso3166",
 | 
				
			||||||
 "serde",
 | 
					 "serde",
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -7,14 +7,15 @@ edition = "2021"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
[dependencies]
 | 
					[dependencies]
 | 
				
			||||||
fuzzy-matcher = "0.3.7"
 | 
					fuzzy-matcher = "0.3.7"
 | 
				
			||||||
 | 
					getrandom = { version = "0.2", features = ["js"] }
 | 
				
			||||||
gloo = "0.8"
 | 
					gloo = "0.8"
 | 
				
			||||||
 | 
					js-sys = "0.3"
 | 
				
			||||||
 | 
					rand = "0.8"
 | 
				
			||||||
rust_iso3166 = "0.1.10"
 | 
					rust_iso3166 = "0.1.10"
 | 
				
			||||||
serde_json = "1.0"
 | 
					serde_json = "1.0"
 | 
				
			||||||
serde_urlencoded = "*" # pinned by yew
 | 
					serde_urlencoded = "*" # pinned by yew
 | 
				
			||||||
yew = { version = "0.20", features = ["csr"] }
 | 
					yew = { version = "0.20", features = ["csr"] }
 | 
				
			||||||
yew-router = "0.17"
 | 
					yew-router = "0.17"
 | 
				
			||||||
rand = "0.8"
 | 
					 | 
				
			||||||
getrandom = { version = "0.2", features = ["js"] }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
# needs to be in sync with nixpkgs
 | 
					# needs to be in sync with nixpkgs
 | 
				
			||||||
wasm-bindgen = "= 0.2.84"
 | 
					wasm-bindgen = "= 0.2.84"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -11,7 +11,8 @@
 | 
				
			||||||
    <!-- Bootstrap -->
 | 
					    <!-- 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">
 | 
					    <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>
 | 
					    <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>
 | 
					  </head>
 | 
				
			||||||
  <body>
 | 
					 | 
				
			||||||
  </body>
 | 
					 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,17 @@
 | 
				
			||||||
html! {
 | 
					html! {
 | 
				
			||||||
<main>
 | 
					<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="container px-4 pt-5 my-5 text-center">
 | 
				
			||||||
    <div class="row">
 | 
					    <div class="row">
 | 
				
			||||||
      <div class="col-7 ms-auto">
 | 
					      <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 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>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <div id="captcha-container" class="smart-captcha mb-3" style="height: 100px" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
          <button type="submit" class="btn btn-primary" disabled=true>{"Submit"}</button>
 | 
					          <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>
 | 
					          <p class="pt-2"><i>{"This page is still under construction! Please reach out at contact@ if you have any questions."}</i></p>
 | 
				
			||||||
        </form>
 | 
					        </form>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,8 +1,7 @@
 | 
				
			||||||
use fuzzy_matcher::skim::SkimMatcherV2;
 | 
					use fuzzy_matcher::skim::SkimMatcherV2;
 | 
				
			||||||
use fuzzy_matcher::FuzzyMatcher;
 | 
					use fuzzy_matcher::FuzzyMatcher;
 | 
				
			||||||
use gloo::console;
 | 
					use gloo::console;
 | 
				
			||||||
use gloo::history::BrowserHistory;
 | 
					use gloo::history::{BrowserHistory, History};
 | 
				
			||||||
use gloo::history::History;
 | 
					 | 
				
			||||||
use gloo::storage::{LocalStorage, Storage};
 | 
					use gloo::storage::{LocalStorage, Storage};
 | 
				
			||||||
use rand::seq::IteratorRandom;
 | 
					use rand::seq::IteratorRandom;
 | 
				
			||||||
use rand::thread_rng;
 | 
					use rand::thread_rng;
 | 
				
			||||||
| 
						 | 
					@ -10,12 +9,21 @@ use serde::{Deserialize, Serialize};
 | 
				
			||||||
use static_markdown::markdown;
 | 
					use static_markdown::markdown;
 | 
				
			||||||
use std::collections::BTreeSet;
 | 
					use std::collections::BTreeSet;
 | 
				
			||||||
use wasm_bindgen::closure::Closure;
 | 
					use wasm_bindgen::closure::Closure;
 | 
				
			||||||
use wasm_bindgen::JsCast;
 | 
					use wasm_bindgen::{JsCast, JsValue};
 | 
				
			||||||
use web_sys::{HtmlInputElement, HtmlTextAreaElement, KeyboardEvent};
 | 
					use web_sys::{HtmlInputElement, HtmlTextAreaElement, KeyboardEvent};
 | 
				
			||||||
use yew::html::Scope;
 | 
					use yew::html::Scope;
 | 
				
			||||||
use yew::prelude::*;
 | 
					use yew::prelude::*;
 | 
				
			||||||
use yew_router::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
 | 
					/// This code ends up being compiled for the native and for the
 | 
				
			||||||
/// webassembly architectures during the build & test process.
 | 
					/// webassembly architectures during the build & test process.
 | 
				
			||||||
/// However, the `rust_iso3166` crate exposes a different API (!)
 | 
					/// However, the `rust_iso3166` crate exposes a different API (!)
 | 
				
			||||||
| 
						 | 
					@ -388,6 +396,13 @@ impl Component for App {
 | 
				
			||||||
            Route::NotFound => todo!(),
 | 
					            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() {
 | 
					fn main() {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue