Initial recaptcha example cartridge

This commit is contained in:
Isaac Vallee 2021-12-22 09:45:09 -08:00
parent 8f15cd15df
commit 3ff2cdbfd4
6 changed files with 223 additions and 0 deletions

View File

@ -0,0 +1,17 @@
<?xml version='1.0' encoding='UTF-8'?>
<projectDescription>
<name>app_custom_core</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.demandware.studio.core.beehiveElementBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.demandware.studio.core.beehiveNature</nature>
</natures>
</projectDescription>

View File

@ -0,0 +1,11 @@
{
'ecmaVersion': 5,
'plugins': {
'guess-types': {
},
'outline': {
},
'demandware': {
}
}
}'

View File

@ -0,0 +1,4 @@
## cartridge.properties for cartridge app_custom_core
#Tue Nov 21 11:43:49 CEST 2021
demandware.cartridges.app_custom_core.multipleLanguageStorefront=true
demandware.cartridges.app_custom_core.id=app_custom_core

View File

@ -0,0 +1,45 @@
'use strict';
var server = require('server');
server.append('Landing', function(req, res, next) {
res.setViewData({
recaptchaUrl: 'https://www.google.com/recaptcha/api.js',
siteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' // Test Site Key from Google
});
next();
});
server.append('Subscribe', function(req, res, next) {
// Token automatically added to request by recaptcha
var token = req.form['g-recaptcha-response'];
// Add required parameters for validation call
var params = {
// This is a test secret from Google
// In practice, do not hardcode this. It's better to store
// In a custom preference or service credential Configuration
secret: '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe', // Test secret key from Google
response: token
};
// Calls recaptcha service
// Returns a Service class instance
var validationResult = recaptchaService.call(params);
// Actual response from Google
var response = verificationResult.object;
if (!response.success) {
// Handle failure by returning error to the client
res.json({
success: false,
msg: 'Recaptcha Validation Failure'
});
}
next();
});
module.exports = server.exports();

View File

@ -0,0 +1,32 @@
'use strict';
var LocalServiceRegistry = require('dw/svc/LocalServiceRegistry');
var recaptchaService = LocalServiceRegistry.createService('recaptcha.http.post', {
createRequest: function(svc, params) {
svc.setRequestMethod('POST');
// You can perform other operations, such as adding request headers
svc.addHeader('Content-Type', 'application/json');
// Add properties to the request body
svc.addParam('secret', params.secret);
svc.addParam('response', params.response);
},
parseResponse: function(svc, responseObject) {
return JSON.parse(response.text);
},
// mockCall: function(svc, requestObject) {
// // Return a mocked response
// // If configuration set to MOCK mode
// return {
// success: true,
// 'challenge_ts': Date.now(),
// hostname: 'MOCK EXAMPLE'
// };
// }
// If dealing with any sensitive information
// You should filter it out before it hits the logs
// filterLogMessage: function() {}
});
module.exports = {
recaptchaService: recaptchaService
};

View File

@ -0,0 +1,114 @@
<isdecorate template="common/layout/page">
<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addJs('/js/contactUs.js');
assets.addCss('/css/contactUs.css');
// Loads recaptcha API
assets.addJs(pdict.recaptchaUrl);
</isscript>
<div class="hero slant-down contact-us-banner">
<h1 class="page-title">${Resource.msg('title.contact.us.page', 'contactUs', null)}</h1>
</div>
<div class="container contact-us-landing-page">
<div class="row justify-content-center">
<div class="col-sm-8 col-md-6">
<div class="card">
<div class="card-body">
<form action="${pdict.actionUrl}" class="contact-us" method="POST" name="contact-us">
<iscomment> Add recaptcha container </iscomment>
<div class="g-recaptcha" data-sitekey="${pdict.siteKey}"></div>
<!--- contact us first name, last name --->
<div class="row contact-us-name">
<div class="col-sm-6">
<div class="form-group required">
<label class="form-control-label" for="contact-first-name">
${Resource.msg('label.input.contact-us-first-name', 'contactUs', null)}
</label>
<input type="text" required class="form-control required" aria-describedby="form-contact-first-name-error" id="contact-first-name" name="contactFirstName">
<div class="invalid-feedback" id="form-contact-first-name-error"></div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required">
<label class="form-control-label" for="contact-last-name">
${Resource.msg('label.input.contact-us-last-name', 'contactUs', null)}
</label>
<input type="text" required class="form-control required" aria-describedby="form-contact-last-name-error" id="contact-last-name" name="contactLastName">
<div class="invalid-feedback" id="form-contact-last-name-error"></div>
</div>
</div>
</div>
<!--- contact us email --->
<div class="row contact-us-email">
<div class="col">
<div class="form-group required">
<label class="form-control-label" for="contact-email">
${Resource.msg('label.input.contact-us-email', 'contactUs', null)}
</label>
<input type="email" required class="form-control required" aria-describedby="form-contact-email-error" id="contact-email" name="contactEmail">
<div class="invalid-feedback" id="form-contact-email-error"></div>
</div>
</div>
</div>
<!--- contact us topic --->
<div class="row contact-us-topic">
<div class="col">
<div class="form-group">
<label class="form-control-label" for="contact-topic">
${Resource.msg('label.input.contact-us-topic', 'contactUs', null)}
</label>
<select type="text" required class="form-control required" id="contact-topic" name="contactTopic">
<option value="GI">
${Resource.msg('label.input.contact-topic-general-information', 'contactUs', null)}
</option>
<option value="OS">
${Resource.msg('label.input.contact-topic-order-status', 'contactUs', null)}
</option>
<option value="MA">
${Resource.msg('label.input.contact-topic-my-account', 'contactUs', null)}
</option>
<option value="O">
${Resource.msg('label.input.contact-topic-other', 'contactUs', null)}
</option>
</select>
</div>
</div>
</div>
<!--- contact us comment --->
<div class="row contact-us-comment">
<div class="col">
<div class="form-group">
<label class="form-control-label" for="contact-comment">
${Resource.msg('label.input.contact-us-comment', 'contactUs', null)}
</label>
<textarea class="form-control" id="contact-comment" name="contactComment" rows="4" maxlength="250"></textarea>
</div>
</div>
</div>
<!--- contact us submit --->
<div class="row contact-us-submnit">
<div class="col-sm-6">
</div>
<div class="col">
<div class="form-group">
<button class="btn btn-block btn-primary subscribe-contact-us" type="submit" name="submit" value="submit">
${Resource.msg('label.input.contact-us-submit', 'contactUs', null)}
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</isdecorate>