Review code for Contact Form


#1

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>

#2

Anyone? :grinning:
Anyone please? :sweat_smile: