Send Email for SMTP wtih Mailer/Mailer2 in Dart

Question

i have the next problem whe send a mail for smtp

Dart VM version: 2.1.0-dev.6.0 (Thu Sep 27 09:51:34 2018 +0200) on "macos_x64"

pubspec.yaml

environment: sdk: '>=2.0.0 <3.0.0'

dependencies: angular: ^5.0.0 angular_components: ^0.9.2 angular_router: ^2.0.0-alpha+19 angular_forms: ^2.0.0 ng_bootstrap: any bootstrap_sass: ^4.1.2 mailer2: ^1.2.3

dev_dependencies: angular_test: ^2.0.0 build_runner: ^0.10.3 build_test: ^0.10.3+2 build_web_compilers: ^0.4.4+1 test: ^1.0.0 sass_builder: ^2.0.0

contacto_componente.dart

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:easy_export_web/routes.dart';
import 'package:mailer2/mailer.dart';

@Component(
  selector: 'contacto',
  styleUrls: ['contacto_component.css'],
  templateUrl: 'contacto_component.html',
  directives: [NgModel, formDirectives, NgControl, NgControlGroup, NgClass],
  providers: [
    [const ClassProvider(Routes)]
  ],
)
class ContactoComponent implements OnInit {
  final Routes routes;

  ContactoComponent(this.routes);

  Contacto contacto = new Contacto();
  bool submitted = false;

  void onSubmit() {
    print('antes Submmit ${submitted}');
    if (submitted) {
      emailSend();
    }
    submitted = false;
  }

  emailSend() {
    String username = '[email protected]';
    String password = 'xxxxxxxxxx';

    print('email ${contacto.email}');
    print('nombre ${contacto.name}');
    print('Empresa ${contacto.enterprise}');
    print('Mensaje ${contacto.mensaje}');

    var options = new GmailSmtpOptions()
      ..username = username
      ..password = password;

    // Create our email transport.
    var emailTransport = new SmtpTransport(options);

    // Create our mail/envelope.
    var envelope = new Envelope()
      ..from = username
      ..recipients.add('[email protected]')
      ..bccRecipients.add(contacto.email)
      ..subject = 'Contacto Web EasyExport ${contacto.enterprise} :)'
      ..text = contacto.mensaje
      ..html = '<h1>Test</h1><p>Hey!</p>';

    // Email it.
    emailTransport
        .send(envelope)
        .then((envelope) => print('Email sent!'))
        .catchError((e) => print('Error occurred: $e'))
        .whenComplete(() => contacto = new Contacto());
  }

  @override
  void ngOnInit() {}

  Map<String, bool> setCssValidityClass(NgControl control) {
    final validityClass = control.valid == true ? 'is-valid' : 'is-invalid';
    return {validityClass: true};
  }
}

class Contacto {
  String email;
  String name;
  String enterprise;
  String mensaje;

  Contacto({this.email, this.name, this.enterprise, this.mensaje});
}

contacto_componente.html

<div id="contacto">
    <h1 class="cover-heading">Contacto</h1>
    <p class="lead">Enviame tus datos para que conversemos!.</p>
    <form (ngSubmit)="onSubmit()" #contactoForm="ngForm">
        <div class="form-group">
            <label for="exampleFormControlInput1">Escribe tu e-mail</label>
            <input type="email"
                   required
                   class="form-control"
                   id="exampleFormControlInput1"
                   placeholder="[email protected]"
                   [(ngModel)]="contacto.email"
                   #email="ngForm"
                   [class.is-valid]="email.valid"
                   [class.is-invalid]="!email.valid"
                   ngControl="email">
            <label for="exampleFormControlInput2">Escribe tu nombre</label>
            <input type="text"
                   required
                   class="form-control"
                   id="exampleFormControlInput2"
                   placeholder="Alan Brito"
                   [(ngModel)]="contacto.name"
                   #name="ngForm"
                   [class.is-valid]="name.valid"
                   [class.is-invalid]="!name.valid"
                   ngControl="name">
            <div [hidden]="name.valid || name.pristine" class="invalid-feedback">
                Name is required
            </div>
            <label for="exampleFormControlInput3">Escribe el nombre de tu Empresa</label>
            <input type="text"
                   required
                   class="form-control"
                   id="exampleFormControlInput3"
                   placeholder="EasyExport Ltda."
                   [(ngModel)]="contacto.enterprise"
                   #enterprise="ngForm"
                   [class.is-valid]="enterprise.valid"
                   [class.is-invalid]="!enterprise.valid"
                   ngControl="enterprise">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">Escribe tus dudas/comentarios/sugerencias!</label>
            <textarea class="form-control"
                      id="exampleFormControlTextarea1"
                      rows="3"
                      required
                      placeholder="Con Confianza..."
                      [(ngModel)]="contacto.mensaje"
                      #mensaje="ngForm"
                      [class.is-valid]="mensaje.valid"
                      [class.is-invalid]="!mensaje.valid"
                      ngControl="mensaje"></textarea>
        </div>

            <button type="submit"
                    (click)="submitted=true"
                    [disabled]="!contactoForm.form.valid"
                    class="btn btn-primary">Enviar</button>

    </form>
</div>

webdev serve

webdev serve

the problem ocurred when i run in browser

problem

full log https://www.dropbox.com/s/yggb1qd7xtyz99q/localhost-1538426918207.txt?dl=0

Answer 1

The problem here is simple - you're trying to send a SMTP message in the browser. SMTP is layered on top of TCP, not HTTP, so you need a TCP socket to use package:mailer.

Sockets are not available in the browser; therefore, you can't send an e-mail in the browser.

You can either:

1. Create a simple API that sends the e-mail
2. Use the GMail API to send via HTTP