Added email otp validation at time of register.

frontend/src/LoginComponents/Register.js

@@ -2,15 +2,19 @@ import axios from "axios";
 import { Form, Formik } from "formik";
 import { Fragment, useState } from "react";
 import { Link } from "react-router-dom";
-import { Button, Card, CardBody, Col, Input, Row } from "reactstrap";
+import { Button, Card, CardBody, Col, Input, ModalBody, ModalHeader, Row } from "reactstrap";
 import * as Yup from 'yup';
 import InputBox from "../Components/InputBox";
 import PageHeader from "../Components/PageHeader";
+import { handleError, handleSuccess } from "../utils/Sweetalert";
 //import 'react-widgets/dist/css/react-widgets.css'
 
 const Register = (props) => {
     const [data, setData] = useState([{ id: 0, text: 'Select' }, { id: 1, text: 'Students' }, { id: 2, text: 'Teachers' }]);
     const [role, setRole] = useState(0);
+    const [otp, setOtp] = useState(0);
+    const [isVerified, setIsVerified] = useState(false)
+    const [otpVerified, setOtpVerified] = useState(false)
     const initialValues = {
         firstName: '',
         lastName: '',
@@ -42,11 +46,28 @@ const Register = (props) => {
                 props.history.push('/')
             })
         }
-        catch(exception) {
+        catch (exception) {
             alert('Getting errror')
         }
 
     }
+    const Generate = async (email) => {
+        await axios.get(`https://localhost:44323/api/Register/GenerateOTP?email=${email}`).then((res) => {
+            if (res.status == 200) {
+                setOtp(res.data);
+                setIsVerified(true);
+            }
+        })
+    }
+    const Verify = (enteredotp) => {
+        if (otp == enteredotp) {
+            setOtpVerified(true);
+            handleSuccess("Successfully Verified..")
+        }
+        else {
+            handleError("Invalid OTP")
+        }
+    }
     return <Fragment>
         <Card>
             <CardBody>
@@ -125,10 +146,20 @@ const Register = (props) => {
                                         <p style={{ color: 'red' }}>{errors && errors.confirmPassword}</p>
                                     </Col>
                                 </Row>
+                                {!otpVerified &&
+                                    <Row>
+                                        <Col md='4'></Col>
+                                        <Col md='2' className=''><InputBox type='number' label='OTP:' name='otp' handleChange={handleChange} /> </Col>
+                                        <Col md='1' className='mt-4'>
+                                            {!isVerified ? <Button className='bg-info' onClick={() => Generate(values.email)}>Generate</Button>
+                                                : <Button className='bg-info' onClick={() => Verify(values.otp)}>Verify</Button>}
+                                        </Col>
+                                    </Row>
+                                }
                                 <Row className="pt-4">
                                     <Col md='4' />
                                     <Col md='2'>
-                                        <Button type='submit' className="btn btn-success">Register</Button>
+                                        <Button disabled={!otpVerified} type='submit' className="btn btn-success">Register</Button>
                                     </Col>
                                     <Col md='2'><Button type="reset" className="btn btn-warning">Clear</Button></Col>
                                 </Row>

server/BusinessLogic/RegisterService.cs

@@ -5,6 +5,8 @@
 using Microsoft.Extensions.Configuration;
 using Microsoft.IdentityModel.Tokens;
 using System.IdentityModel.Tokens.Jwt;
+using System.Net.Mail;
+using System.Net;
 using System.Security.Claims;
 using System.Text;
 
@@ -18,6 +20,7 @@ public interface IRegisterService
         Register GetUserWithId(int id);
         dynamic Login(string email, string password, int roleId);
         TokenModel RefreshGeneratedToken(TokenModel model, int Id);
+        int SendEmail(string emailToAddress);
     }
     public class RegisterService : IRegisterService
     {
@@ -88,6 +91,46 @@ private string GenerateString()
             return random.ToString();
         }
 
+        public int SendEmail(string emailToAddress)
+        {            string smtpAddress = "smtp.gmail.com";
+            int portNumber = 587;
+            int otp = Convert.ToInt32(GenerateString());
+            bool enableSSL = true;
+            string emailFromAddress = "[email protected]"; //Sender Email Address
+            string password = "xcka afny abfe mkwn"; //Sender Password
+
+            string subject = "Verify OTP";
+            string body = "<div style='font-family: Helvetica,Arial,sans-serif;min-width:1000px;overflow:auto;line-height:2'>"
+         + "<div style='margin:50px auto;width:70%;padding:20px 0'>" +
+           "<div style='border-bottom:1px solid #eee'>" +
+             "<a href='' style='font-size:1.4em;color: #00466a;text-decoration:none;font-weight:600'>Holy Mary Institute of Technology and Science</a>" +
+           "</div>" +
+           "<p style='font-size:1.1em'>Hi,</p>" +
+           "<p>Thank you for choosing HITS. Use the following OTP to complete your Sign Up procedures. OTP is valid for 5 minutes</p>" +
+           "<h2 style='background: #00466a;margin: 0 auto;width: max-content;padding: 0 10px;color: #fff;border-radius: 4px;'>" + otp + "</h2>" +
+           "<p style='font-size:0.9em;'>Regards,<br />HITS</p>" +
+           "<hr style='border:none;border-top:1px solid #eee' />" +
+           "<div style='float:right;padding:8px 0;color:#aaa;font-size:0.8em;line-height:1;font-weight:300'>" +
+            " <p>HITS Inc</p>  <p>Keesara, ghatkesar</p> <p>Hyderabad</p> </div></div></div>";
+            using (MailMessage mail = new MailMessage())
+            {
+                mail.From = new MailAddress(emailFromAddress, "Holy Mary");
+                mail.To.Add(emailToAddress);
+                mail.Subject = subject;
+                mail.Body = body;
+                mail.IsBodyHtml = true;
+                //mail.Attachments.Add(new Attachment("D:\\TestFile.txt"));//--Uncomment this to send any attachment
+                using (SmtpClient smtp = new SmtpClient(smtpAddress, portNumber))
+                {
+                    smtp.Credentials = new NetworkCredential(emailFromAddress, password);
+                    smtp.EnableSsl = enableSSL;
+                    smtp.Send(mail);
+                }
+            }
+
+            return otp;
+        }
+
         public string GenerateAccesstoken(Register user)
         {
             var claims = new[] { new Claim("Id", user.Id.ToString()) };

server/WebApplication1/Controllers/RegisterController.cs

@@ -31,6 +31,11 @@ public IActionResult AddUser(RegisterModel register)
             _registerService.AddUser(_mapper.Map<Register>(register));
             return Ok();
         }
+        [HttpGet("GenerateOTP")]
+        public int GenerateOTP(string email)
+        {
+           return _registerService.SendEmail(email);
+        }
         [HttpGet("Id")]
         public IActionResult GetUserWithId(int Id)
         {

server/WebApplication1/Properties/launchSettings.json

@@ -6,7 +6,7 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
-      "applicationUrl": "https://localhost:65062;http://localhost:65063"
+      "applicationUrl": "https://localhost:44323;http://localhost:65063"
     }
   }
 }

server/WebApplication1/appsettings.json

@@ -7,7 +7,7 @@
   },
   "AllowedHosts": "*",
   "ConnectionStrings": {
-    "DBConnection": "server=DESKTOP-HF14CRK\\SQLEXPRESS; database=VENU;User Id=venu;Password=Ramvenu@123;MultipleActiveResultSets=true;TrustServerCertificate=True;"
+    "DBConnection": "server=DESKTOP-HF14CRK\\SQLEXPRESS; database=University_NewDB;User Id=venu;Password=Ramvenu@123;MultipleActiveResultSets=true;TrustServerCertificate=True;"
   },
   "JwtAuthenticate": {
     "Key": "This is My University Key",