Hi guys,
Please be mean and criticize the following code I have for a contact form:
I want to be sure I am following Meteor best practices.
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';
import { TAPi18n } from 'meteor/tap:i18n';
import { sendMessage } from '../../../api/contact/methods.js';
import swal from 'sweetalert2';
import './contact.html';
Template.Page_contact.onCreated(function() {
this.errors = new ReactiveDict();
});
Template.Page_contact.helpers({
errorClass(field) {
const errors = Template.instance().errors;
return errors.get(field) && errors.get(field).length>0 && 'has-error';
},
errors(field) {
const instance = Template.instance();
return instance.errors.get(field);
}
});
Template.Page_contact.events({
'submit #js-contact-form'(event, instance) {
event.preventDefault();
let form = event.target;
sendMessage.call({
name: form.name.value,
email: form.email.value,
subject: form.subject.value,
message: form.message.value
},
(err, result) => {
instance.errors.clear();
if (err) {
console.log('err');
console.log(err);
if (err.error === 'validation-error') {
let errors = {};
err.details.forEach((field) => {
if (!errors[field.name]) {
errors[field.name] = [];
}
errors[field.name].push(TAPi18n.__('pages.contact.'+field.type));
});
instance.errors.set(errors);
}
} else {
form.reset();
swal({
type: 'success',
title: TAPi18n.__('pages.contact.messageSent'),
showCloseButton: true,
confirmButtonText: TAPi18n.__('pages.contact.close'),
confirmButtonClass: 'btn btn-primary',
buttonsStyling: false
});
}
}
);
}
});
template html
<template name="Page_contact">
<div class="jumbotron jumbotron-sm margin-top-thirty">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1>{{_ 'pages.contact.contactUs'}} <small>{{_ 'pages.contact.feelFreeToContactUs'}}</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="well well-sm">
<form id="js-contact-form" novalidate="novalidate">
<div class="row">
<div class="col-md-6">
<div class="form-group {{errorClass 'name'}}">
<label for="name">{{_ 'pages.contact.name'}}</label>
<input type="text" class="form-control" name="name" required="required" />
{{#each error in errors "name"}}
<div class="help-block">{{error}}</div>
{{/each}}
</div>
<div class="form-group {{errorClass 'email'}}">
<label for="email">{{_ 'pages.contact.emailAddress'}}</label>
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-envelope-o"></span></span>
<input type="email" class="form-control" name="email" required="required" />
</div>
{{#each error in errors "email"}}
<div class="help-block">{{error}}</div>
{{/each}}
</div>
<div class="form-group {{errorClass 'subject'}}">
<label for="subject">{{_ 'pages.contact.subject'}}</label>
<input type="text" class="form-control" name="subject" required="required" />
{{#each error in errors "subject"}}
<div class="help-block">{{error}}</div>
{{/each}}
</div>
</div>
<div class="col-md-6">
<div class="form-group {{errorClass 'message'}}">
<label for="name">{{_ 'pages.contact.message'}}</label>
<textarea class="form-control" rows="9" cols="25" name="message" required="required"></textarea>
{{#each error in errors "message"}}
<div class="help-block">{{error}}</div>
{{/each}}
</div>
</div>
<div class="col-md-offset-6 col-md-6">
<button type="submit" class="btn btn-primary btn-block">{{_ 'pages.contact.send'}}</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4">
<form>
<legend><span class="fa fa-globe"></span> {{_ 'pages.contact.info'}}</legend>
<!-- <address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">
P:</abbr>
(123) 456-7890
</address> -->
<address>
<strong>Juan Pablo</strong><br>
jpfernandezl<i class="fa fa-at"></i>gmail.com
</address>
</form>
</div>
</div>
</div>
</template>
