Render recaptcha on registration page

This commit is contained in:
Jesse 2020-07-08 03:20:43 -04:00
parent b037ce80c3
commit 3c6a3f1d30
No known key found for this signature in database
GPG key ID: 1A8AB3257B32D91F
3 changed files with 15 additions and 0 deletions

View file

@ -22,6 +22,7 @@
<link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-1668x2224.png' media='(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'/> <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-1668x2224.png' media='(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'/>
<link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-2048x2732.png' media='(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'/> <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-2048x2732.png' media='(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'/>
<link rel='manifest' href='manifest.json'/> <link rel='manifest' href='manifest.json'/>
<script src="https://www.google.com/recaptcha/api.js"></script>
</head> </head>
<body> <body>
<div id='top-navigation-holder'></div> <div id='top-navigation-holder'></div>

View file

@ -38,6 +38,8 @@
<div class='messages'></div> <div class='messages'></div>
<div class='buttons'> <div class='buttons'>
<div id="recaptcha"></div>
<br>
<input type='submit' value='Create an account'/> <input type='submit' value='Create an account'/>
</div> </div>
</form> </form>

View file

@ -5,6 +5,7 @@ const api = require("../api.js");
const views = require("../util/views.js"); const views = require("../util/views.js");
const template = views.getTemplate("user-registration"); const template = views.getTemplate("user-registration");
const RECAPTCHA_SITE_KEY = "site key";
class RegistrationView extends events.EventTarget { class RegistrationView extends events.EventTarget {
constructor() { constructor() {
@ -20,6 +21,13 @@ class RegistrationView extends events.EventTarget {
views.syncScrollPosition(); views.syncScrollPosition();
views.decorateValidator(this._formNode); views.decorateValidator(this._formNode);
this._formNode.addEventListener("submit", (e) => this._evtSubmit(e)); this._formNode.addEventListener("submit", (e) => this._evtSubmit(e));
this.renderRecaptcha();
}
renderRecaptcha() {
grecaptcha.render(this._recaptchaNode, {
"sitekey": RECAPTCHA_SITE_KEY
});
} }
clearMessages() { clearMessages() {
@ -66,6 +74,10 @@ class RegistrationView extends events.EventTarget {
get _emailFieldNode() { get _emailFieldNode() {
return this._formNode.querySelector("[name=email]"); return this._formNode.querySelector("[name=email]");
} }
get _recaptchaNode() {
return this._formNode.querySelector("#recaptcha");
}
} }
module.exports = RegistrationView; module.exports = RegistrationView;