Initial recaptcha example cartridge
This commit is contained in:
parent
8f15cd15df
commit
3ff2cdbfd4
17
int_recaptcha/int_recaptcha/.project
Normal file
17
int_recaptcha/int_recaptcha/.project
Normal 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>
|
11
int_recaptcha/int_recaptcha/.tern-project
Normal file
11
int_recaptcha/int_recaptcha/.tern-project
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
'ecmaVersion': 5,
|
||||
'plugins': {
|
||||
'guess-types': {
|
||||
},
|
||||
'outline': {
|
||||
},
|
||||
'demandware': {
|
||||
}
|
||||
}
|
||||
}'
|
@ -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
|
@ -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();
|
@ -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
|
||||
};
|
@ -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>
|
Loading…
Reference in New Issue
Block a user