I want to be able to send a real email to a gmail/yahoo account by clicking on a send email button (Using React , LoopBack , MongoDB)

Question

(Using React/LoopBack/MongoDB) I would like to send the email to the email that is already saved in the user's account collection , there is an email attribute that I can access through this.props.account.email , I searched online but I didn't know how to implement any correctly , is there any certain imports ? How can I make it send the email through a button click . Here is my front-end code which is for the page that the button is found (The button is found right under the return):

--------- Code --------

/* eslint linebreak-style: ["error", "windows"] */
import React, { Component } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';

// Grommet
import Box from 'grommet/components/Box';
import Heading from 'grommet/components/Heading';
import Accordion from 'grommet/components/Accordion';
import AccordionItem from '../../Components/Accordion';

import AccountDescrSection from './Sections/AccountDescription';

import AccountActions from '../../../../Redux/AccountRedux';

import ActivityIndicator from '../../../../Components/ActivityIndicator';


import './Styles.scss';

class AccountScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      activeSection: []
    };
  }

  componentDidMount() {
    this.props.get();
  }

  componentWillMount() {
    this.getComments();
  }
  getComments() {
    axios.get('http://localhost:3001/api/Comments')
      .then(response => {
        console.log(response.data);
      });
  }


  render() {
    return (

      <Box pad='medium' className='dashboard-settings'>
        <p>
          { (
            <button
              style={{ background: 'yellow', color: 'black', style: 'text-align:center;' }}
            >
            Send email
            </button>
          )}
        </p>
        <Helmet>
          <title>Office Hours | Account Settings</title>
        </Helmet>
        <Box>
          <Heading tag='h3' className='screen-title'>
            Profile
          </Heading>
        </Box>
        <Choose>
          <When condition={ this.props.fetching || !this.props.account.id }>
            <Box align='center' pad='xlarge' margin='large'>
              <ActivityIndicator />
            </Box>
          </When>
          <Otherwise>
            <Accordion active={this.state.activeSection} animate={false} openMulti={false}>

              {AccordionItem({
                title: 'Name',
                description: <div><b>{this.props.account.name}</b></div>
              })}

              {AccordionItem({
                title: 'Description',
                description: <div><b>{this.props.account.description}</b></div>,
                content: <AccountDescrSection close={() => this.setState({ activeSection: [] })} />
              })}


              {AccordionItem({
                title: 'Email address',
                description: <div>{this.props.account.email}</div>
              })}

              {AccordionItem({
                title: 'Description',
                description: <div><b>{this.props.account.description}</b></div>
              })}

              {AccordionItem({
                title: 'Password',
                description: <div>Click on edit profile to change or edit password </div>

              })}
            </Accordion>
          </Otherwise>
        </Choose>
      </Box>
    );
  }
}

const mapStateToProps = store => {
  return {
    account: store.account.data,
    fetching: store.account.fetching
  };
};

const mapDispatchToProps = dispatch => {
  return {
    get: () => dispatch(AccountActions.accountGet())
  };
};

AccountScreen.propTypes = {
  get: PropTypes.func,
  fetching: PropTypes.bool,
  account: PropTypes.object,
  comment: PropTypes.object
};

export default connect(mapStateToProps, mapDispatchToProps)(AccountScreen);
enter code here

Thanks in advance.

Answer 1

You can create and call a custom method in loopback and use nodemailer to send an email

Model.on('method', function(info) {
  //var url = ''; if you want to give a link
  var html = 'Click <a href="' + url +  '">here</a>';
  Model.app.models.Emailmodel.send({
    to: info.email,
    from: senderAddress,
    subject: 'your subject',
    html: html
  }, function(err) {
    if (err) return console.log('> error sending email');
    console.log('> sending email to:', info.email);
  });
});