otp,upload

charts,otp,imaguplaod/backend/index.js

@@ -0,0 +1,152 @@
+const express = require('express');
+const app = express();
+const bodyParser = require('body-parser');
+const methodOverride = require('method-override');
+const cors = require('cors');
+const fileUpload = require('express-fileupload');
+
+app.use(fileUpload());
+
+const mongo = require('mongodb');
+const MongoClient = require('mongodb').MongoClient
+const connectionString = 'mongodb+srv://naveen:[email protected]/practice1?retryWrites=true&w=majority';
+const client = new MongoClient(connectionString);
+const nodemailer = require('nodemailer');
+
+var transporter = nodemailer.createTransport({
+    service: 'gmail',
+    auth: {
+        user: '[email protected]',
+        pass: 'fclmdrowqvvftbjo'
+    }
+})
+
+
+
+app.use(methodOverride('_method'));
+app.use(bodyParser.urlencoded({extended:true}))
+app.use(express.json())
+app.use(cors())
+
+var db;
+var register;
+var images;
+MongoClient.connect(connectionString, { useUnifiedTopology:true }).then(client => {
+    console.log('Connected to Database');
+
+    db = client.db('practice1');
+    register = db.collection('register')
+    images = db.collection('images')
+
+})
+
+app.post('/sendOTP', (req,res) => {
+    // console.log(req.body.email);
+    register.findOne({
+        Email:req.body.email
+    }).then(function(succ){
+        // console.log(succ)
+        if(succ == null){
+            // console.log('no')
+            res.send('noemail');
+        }else{
+            // console.log(Math.floor(Math.random() * 999999));
+            var otp = Math.floor(Math.random() * 999999);
+
+            register.updateOne({
+                Email:req.body.email
+            },{ $set:{
+                otp:otp
+            }
+        }).then(function(succss){
+            // console.log(succss);
+            var mailOption = {
+                from: '[email protected]',
+                to: req.body.email,
+                subject: 'OTP Verification',
+                text: 'Your OTP is '+otp+', Please dont share with anyone.'
+            }
+
+            transporter.sendMail(mailOption, function(error, sccc){
+                if(error){
+                    console.log(error)
+                }else{
+                    console.log("Email Sent");
+                    res.send(succ);
+
+                }
+            })
+
+
+
+        })
+        }
+    }).catch(function(err){
+        res.send('error');
+    })
+})
+
+
+
+
+app.post('/submitOTP', (req,res) => {
+    var id = new mongo.ObjectId(req.body.uid);
+    var otp = parseInt(req.body.otp);
+    console.log(otp);
+    register.findOne({
+        _id:id,
+        otp:otp
+    }).then(function(succ){
+        if(succ == null){
+            // console.log('error');
+            res.send('error');
+        }else{
+            // console.log('yes');
+            res.send('true');
+        }
+    })
+})
+
+
+
+app.post('/submitPassword', (req,res) => {
+    var id = new mongo.ObjectId(req.body.uid);
+    var password = req.body.newpass
+    register.updateOne({
+        _id:id
+    },{
+        $set:{
+         Password:password   
+        }
+    }).then(function(succ){
+        res.send(true);
+    }).catch(function(err){
+        res.send('error');
+    })
+})
+
+app.post('/uppp', (req,res) => {
+    if(req.files === null){
+        res.send('error 404');
+    }
+    var file = req.files.file;
+
+    file.mv(`${__dirname}/../src/images/${file.name}`).then(function(succ){
+        images.insertOne({
+            imageName:file.name
+        }).then(function(succcc){
+            req.send('true');
+        })
+    })
+})
+
+app.get('/getimage', (req,res) => {
+    images.find().toArray().then(function(succ){
+        res.send(succ);
+        console.log(succ)
+    })
+})
+
+app.listen(30, () => {
+    console.log('Server Started');
+})

charts,otp,imaguplaod/frontend/About.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import {Link, useHistory} from 'react-router-dom';
+import {Card, CardContent, TextField, Button, Grid, CardMedia} from '@material-ui/core';
+import Axios from 'axios';
+import image from './ait.png';
+function About(){
+
+const history = useHistory();
+
+function sendotp(){
+	var email = document.getElementById('email').value;
+	if(email == ''){
+		alert('Please fill your emial');
+	}else{
+		Axios.post('http://localhost:30/sendOTP', {email:email}).then(function(succ) {
+			// console.log(succ);
+			if(succ.data == 'noemail'){
+				alert('Sry this email is not registered');
+			}else if(succ.data == 'error'){
+				alert('Something went wrong, please try again later');
+			}else{
+				alert('Mail has been send, please check');
+				// console.log(succ.data);
+				var path = '/otp/?id='+succ.data._id;
+				history.push(path);
+			}
+		})
+	}
+}
+const [file, setFile] = useState();
+
+
+function uploadimage(){
+	const formData = new FormData();
+	formData.append('file', file)
+	Axios.post('http://localhost:30/uppp', formData , {
+		headers: {
+			'Content-Type': 'multipart/form-data'
+		}
+	}).then(function(succ){
+		if(succ.data == true){
+			alert('Image Inserted');
+		}
+	})
+}
+
+const [allimg, setAllimg] = useState([]);
+
+function getAllImage(){
+	Axios.get('http://localhost:30/getimage').then(function(succ){
+		setAllimg(succ.data);
+		console.log(succ.data);
+	})
+}
+
+useEffect(() => {
+	getAllImage();
+}, [])
+
+	return(
+		<div>
+			<h1>Welcome to About</h1>
+			<Link to='/'>Home</Link>
+			<Grid container>
+			<Grid xs={4}>
+				<h4 align="center">Forgot Password</h4>
+				<CardContent>
+					<TextField id='email' fullWidth label="Fill your Email" />
+				</CardContent>
+				<CardContent>
+					<Button variant='contained' color='primary' onClick={sendotp}>Send OTP</Button>
+				</CardContent>
+			</Grid>
+			<Grid xs={4}>
+				<h4>Upload Image</h4>
+				<CardContent>
+					<TextField fullWidth id='image' type="file" onChange={(event) => {setFile(event.target.files[0])}} label="File Upload" />
+				</CardContent>
+				<CardContent>
+					<Button variant='contained' color='secondary' onClick={uploadimage}>Submit</Button>
+				</CardContent>
+
+			</Grid>
+			<Grid xs={4}>
+				{allimg.map((row) => (
+					<div key={row._id}>
+						{row.imageName}
+					</div>
+				))}
+			</Grid>
+			</Grid>
+
+		</div>
+		)
+}
+
+export default About;

charts,otp,imaguplaod/frontend/App.js

@@ -0,0 +1,20 @@
+import './App.css';
+import {BrowserRouter as Router, Route} from 'react-router-dom';
+import Home from './Home';
+import About from './About';
+import Otp from './otp';
+import Newpassword from './newpass';
+
+
+function App() {
+  return (
+    <Router className="App">
+      <Route path='/' exact component={Home} />
+      <Route path='/about' component={About} />
+      <Route path='/otp' component={Otp} />
+      <Route path='/newpassword' component={Newpassword} />
+    </Router>
+  );
+}
+
+export default App;

charts,otp,imaguplaod/frontend/Home.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import {Link, useHistory} from 'react-router-dom';
+import { Chart } from 'chart.js';
+import { Line, Bar } from 'react-chartjs-2';
+import { Grid } from '@material-ui/core';
+function Home(){
+
+const history = useHistory();
+
+function changethis(){
+	let path = `About`; 
+    history.push(path);
+}
+
+
+const data = {
+	labels: ['apple','mango','banana','orange'],
+	datasets: [{
+		backgroundColor:'maroon',
+		label:'Products Qty',
+		data: [10,20,15,2],
+		hoverBackgroundColor:'green',
+	}]
+}
+
+
+	return(
+		<div>
+			<h1>Welcome to Home</h1>
+			<Link to='/About'>About</Link>
+			<button onClick={changethis}>Click</button>
+
+			<Grid container>
+			<Grid xs={6}>
+
+				<Line data={data} />
+
+			</Grid>
+			<Grid xs={6}>
+
+				<Bar data={data} />
+
+			</Grid>
+			</Grid>
+
+
+
+
+		</div>
+		)
+}
+
+export default Home;