title: In react, reset password with email functionality
body: <p>I used the react app and however I did not realize until recently that, I also need a reset-password email functionality.</p>
  <p>So I am stuck in react forget password page.</p>
  <p>Here is my code:
  Index.js</p>
  <pre><code>import React, {useEffect, useRef, useState} from 'react';
  import Layout from &quot;../MyLayout&quot;;
  import {Link} from &quot;react-router-dom&quot;;
  import CheckButton from &quot;react-validation/build/button&quot;;
  import Input from &quot;react-validation/build/input&quot;;
  import Form from &quot;react-validation/build/form&quot;;
  import AuthService from &quot;../../services/auth.service&quot;;
  import {isEmail} from &quot;validator&quot;;
  
  const required = (value) =&gt; {
      if (!value) {
          return (
              &lt;span style={{display: 'block'}} className=&quot;form-inlineMessage error&quot;&gt;
                  This field is required!
              &lt;/span&gt;
          );
      }
  };
  
  function ForgotPassword(props) {
      const form = useRef();
      const checkBtn = useRef();
      const [email, setEmail] = useState(&quot;&quot;);
      const [loading, setLoading] = useState(false);
      const [message, setMessage] = useState(&quot;&quot;);
      const onChangeUsername = (e) =&gt; {
          const email = e.target.value;
          setEmail(email);
      };
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          setMessage(&quot;&quot;);
          setLoading(true);
          form.current.validateAll();
          if (checkBtn.current.context._errors.length === 0) {
              AuthService.forgotPassword(email).then((response) =&gt; {
                      setMessage(response.message);
                      setLoading(false);
                      // props.history.push(&quot;/login&quot;);
                  },
                  (error) =&gt; {
                      const resMessage =
                          (error.response &amp;&amp;
                              error.response.data &amp;&amp;
                              error.response.data.message) ||
                          error.message ||
                          error.toString();
                      setLoading(false);
                      setMessage(resMessage);
                  }
              );
          } else {
              setLoading(false);
          }
      };
      return (
          &lt;Layout&gt;
              &lt;section className=&quot;breadcrumbs&quot;&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;breadcrumb&quot;&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;
                              &lt;li&gt;Reset Password&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;section className=&quot;forget_page_Mn&quot;&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;page_heading text-center&quot;&gt;
                          &lt;h1&gt;Reset your password&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;form-content_text text-center&quot;&gt;
                          &lt;p&gt;We will send you an email to reset your password.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;forget_page_wrapper&quot;&gt;
                          &lt;Form onSubmit={handleSubmit} ref={form}&gt;
                              &lt;div className=&quot;forget_form form_Mn&quot;&gt;
                                  &lt;div className=&quot;form-field&quot;&gt;
                                      &lt;label className=&quot;form-label&quot; htmlFor=&quot;reset_email&quot;&gt;Email Address&lt;span className=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                                      &lt;Input
                                          type=&quot;text&quot;
                                          className=&quot;form-input&quot;
                                          name=&quot;email&quot;
                                          value={email}
                                          onChange={onChangeUsername}
                                          validations={[required]}
                                      /&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-actions text-center&quot;&gt;
                                      &lt;button className=&quot;button btn-secondry&quot; name=&quot;button&quot; disabled={loading}&gt;
                                          {loading &amp;&amp; (
                                              &lt;i className=&quot;fa fa-spinner fa-spin&quot; aria-hidden=&quot;true&quot;/&gt;
                                          )}
                                          &lt;span&gt;Submit&lt;/span&gt;
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                                  {message &amp;&amp; (
                                      &lt;div className=&quot;form-group&quot;&gt;
                                          &lt;span style={{display: 'block'}} className=&quot;form-inlineMessage error text-center&quot;&gt;
                                              {message}
                                           &lt;/span&gt;
                                      &lt;/div&gt;
                                  )}
                                  &lt;CheckButton style={{display: &quot;none&quot;}} ref={checkBtn}/&gt;
                                  &lt;div className=&quot;form-actions-alredy-customer text-center&quot;&gt;
                                      &lt;p className=&quot;alredy-customer-link&quot;&gt;Already have an account? &lt;Link to=&quot;/login&quot;&gt;Log In&lt;/Link&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/Form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/Layout&gt;
      )
  }
  export default ForgotPassword;
  </code></pre>
  <p>AuthController.js</p>
  <pre><code>exports.forgotPassword = function (req, res) { 
    
      var input = JSON.parse(JSON.stringify(req.body)); 
       
      var error_msg = '';
      if(!input.email){
          error_msg = 'Please provide valid E-mail Address.';
      }   
      if(error_msg != ''){ 
          return res.send(JSON.stringify({
              &quot;status&quot;: failStatus,
              &quot;message&quot;: error_msg,  
          })); 
      }else{
  
          var userData = { 
              email    : input.email
          };
  
          var responseArr = {};  
          Users.checkEmailExist(result){  
              if(result[0].count &amp;&amp; result[0].count &gt; 0){ 
                  updateData = {
                      reset_password_code : randomstring.generate(10), 
                      email : input.email
                  } 
                  Users.updateData(updateData,function(updateResult){  
                      if(updateResult){      
                          Users.getUserByEmail(input.email,function(userDetail){
                              // Send mail to user 
                              var mailData = { 
                                  'receiver_id' :  userDetail[0].id,  
                                  'template_slug' : 'forgot-password' 
                              }  
                              Mails.SendMail(mailData);  
                              responseArr.user_id = userDetail.id;  
                              // Save Business profile 
                              return res.send(JSON.stringify({  
                                  &quot;status&quot;: successStatus,
                                  &quot;message&quot;: 'Reset password link is sent to your email. Please check.', 
                                  &quot;data&quot;: responseArr,         
                              }));  
                          }); 
  
                      }else{ 
                          return res.send(JSON.stringify({ 
                              &quot;status&quot;: failStatus,  
                              &quot;message&quot;: 'Data could  not updated. Please try again.',
                              &quot;data&quot;: '{}'  
                          })); 
                      }   
                  }); 
              }else{
                  return res.send(JSON.stringify({ 
                      &quot;status&quot;: SessionExpireStatus,  
                      &quot;message&quot;: 'Email is not registered.',
                      &quot;data&quot;: responseArr  
                  })); 
              }
          });   
             
      }
      return false;  
  };
  </code></pre>
  <p>MailController.js</p>
  <pre><code>exports.SendMail = function (mail_data){     
  
      console.log(mail_data);   
      connectPool.getConnection(function(err, connection) {
      if (err) {
          connection.release(); 
          console.log(' Error getting mysql_pool connection: ' + err);
          throw err;
      } 
      connection.query('SELECT * from users where id = ? ',[mail_data.receiver_id], function(error, result){
          if(error){
              console.log(error);   
          }else{
    
              var userDetail = result;   
              //console.log(userDetail); //return true; 
              connection.query('SELECT subject,description from email_templates where slug = ? ',[mail_data.template_slug],function(err,emailTempalate) {   
                  if(userDetail[0].first_name){
                      connection.release();     
                         
                      var body_message = emailTempalate[0].description;  
                      body_message =  body_message.replace('[[NAME]]',userDetail[0].first_name);  
                       
                      // Reset password link
                      var resetPasswordLink = WebsiteURL+&quot;resetPassword/&quot;+userDetail[0].reset_password_code; 
                      body_message =  body_message.replace('[[PASSWORD_RESET_URL]]',resetPasswordLink);
                      body_message =  body_message.replace('[[PASSWORD_RESET_URL]]',resetPasswordLink);
                      body_message =  body_message.replace('[[PASSWORD_RESET_URL]]',resetPasswordLink);
     
                      var subject =  emailTempalate[0].subject; 
                      var mail = {
                          from    :   'google.com &lt;google@gmail.com&gt;',
                          to      :   [String(userDetail[0].email)],   
                          subject :   subject,   
                          html    :   body_message   
                      }   
                      smtpTransport.sendMail(mail, function(error, response){
                          if(error){  
                              console.log(error); 
                              smtpTransport.close(); 
                              return res.send(JSON.stringify({
                                  &quot;status&quot;: 201,
                                  &quot;message&quot;: 'Error in sending mail.',
                                  &quot;data&quot;: error, 
                               })); 
  
                          }else{   
                              console.log('mail sent'); 
                              smtpTransport.close();
                              return res.send(JSON.stringify({
                                  &quot;status&quot;: 201,
                                  &quot;message&quot;: 'Password reset successful.
                                  &quot;data&quot;: data,   
                              }));  
                          }     
                      }); 
  
  
                  }else{
                      console.log(userDetail+mail_data);   
                  }
                   
                   
              }); 
          }
       });   
      }); 
  }
  </code></pre>
  <p>If anybody has any suggestions as to how I can go about this? Please let me know. Thanks</p>