├── orderReq.json ├── .vscode └── settings.json ├── README.md ├── .gitignore ├── client ├── dist │ ├── image │ │ ├── logo.png │ │ └── logo2.jpg │ ├── bundle.js.LICENSE.txt │ ├── style │ │ ├── styleDetails.css │ │ └── styleProduct.css │ └── index.html └── src │ ├── navbar │ ├── navsignin.jsx │ ├── navsignup.jsx │ ├── navBar.jsx │ ├── navbarprod.jsx │ └── navadmin.jsx │ ├── components │ ├── details.jsx │ ├── product.jsx │ ├── pro.jsx │ ├── signIn.jsx │ └── signUp.jsx │ ├── userside │ ├── productdetails.jsx │ ├── product.jsx │ └── showOrders.jsx │ ├── adminside │ ├── index.jsx │ ├── users.jsx │ ├── update.jsx │ ├── navbarAdmin.jsx │ ├── order.jsx │ ├── createProduct.jsx │ └── adminprod.jsx │ └── app.jsx ├── vapes2.json ├── server ├── src │ ├── models │ │ ├── orderModule.js │ │ ├── productModel.js │ │ └── userModel.js │ ├── routes │ │ ├── product.routes.js │ │ ├── auth.routes.js │ │ ├── order.routes.js │ │ └── user.routes.js │ ├── db │ │ └── connection.js │ └── controllers │ │ ├── products.controller.js │ │ ├── users.controller.js │ │ ├── orders.controller.js │ │ ├── auth.controller.js │ │ └── admin.contollers.js ├── files │ ├── verifyToken.js │ ├── routers.js │ └── controllers.js ├── auth.js ├── index.js └── database │ └── testDataDb.js ├── webpack.config.js ├── vapes.json └── package.json /orderReq.json: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vapeStore 2 | this is a platform to sell vapes online 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | package-lock.json 3 | /client/dist/bundle.js -------------------------------------------------------------------------------- /client/dist/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2Cmo/VapeStore-1/main/client/dist/image/logo.png -------------------------------------------------------------------------------- /client/dist/image/logo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2Cmo/VapeStore-1/main/client/dist/image/logo2.jpg -------------------------------------------------------------------------------- /vapes2.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "test", 4 | "email": "jkifdzihf", 5 | "password": "fzdejzo" 6 | } 7 | ] 8 | -------------------------------------------------------------------------------- /server/src/models/orderModule.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const orderSchema = new mongoose.Schema({ 4 | email: String, 5 | imageUrl: String, 6 | title: String, 7 | stock: Number, 8 | prise: String, 9 | }); 10 | 11 | module.exports = mongoose.model("order", orderSchema ); 12 | -------------------------------------------------------------------------------- /server/src/routes/product.routes.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const router = express.Router(); 3 | const ProductController = require("../controllers/products.controller.js") 4 | // const verify = require("./verifyToken.js") 5 | router.get("/products", ProductController.findAll); 6 | module.exports = router; 7 | -------------------------------------------------------------------------------- /server/src/models/productModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const productSchema = new mongoose.Schema({ 4 | imageUrl: String, 5 | title: String, 6 | stock: Number, 7 | description: String, 8 | prise: String, 9 | }); 10 | 11 | module.exports = mongoose.model("product", productSchema); 12 | -------------------------------------------------------------------------------- /server/src/routes/auth.routes.js: -------------------------------------------------------------------------------- 1 | 2 | const express = require("express"); 3 | const router = express.Router(); 4 | const Authcontroller = require("../controllers/auth.controller.js") 5 | // const verify = require("./verifyToken.js") 6 | 7 | router.post('/create', Authcontroller.createOne); 8 | router.post('/login', Authcontroller.findUser) 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /client/dist/bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** @license React v17.0.1 8 | * react.production.min.js 9 | * 10 | * Copyright (c) Facebook, Inc. and its affiliates. 11 | * 12 | * This source code is licensed under the MIT license found in the 13 | * LICENSE file in the root directory of this source tree. 14 | */ 15 | -------------------------------------------------------------------------------- /server/src/db/connection.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | mongoose.connect("mongodb://localhost/vapeStore", { useNewUrlParser: true, useUnifiedTopology: true }); 3 | 4 | const db = mongoose.connection; 5 | db.on("error", console.error.bind(console, "connection error:")); 6 | db.once("open", function () { 7 | console.log("db connected"); 8 | }); 9 | 10 | module.exports = db; 11 | -------------------------------------------------------------------------------- /server/files/verifyToken.js: -------------------------------------------------------------------------------- 1 | const jwt = require('jsonwebtoken'); 2 | module.exports = function (req,res,next) { 3 | const token =req.header("auth-token"); 4 | if (!token)return res.json("access denied") 5 | console.log(token); 6 | try { 7 | const verif = jwt.verify(token,"fghfghrtfjyuuikyufiy"); 8 | req.user = verif ; 9 | next(); 10 | }catch (error){ 11 | res.send('invalid token') 12 | } 13 | } -------------------------------------------------------------------------------- /server/src/routes/order.routes.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const router = express.Router(); 3 | const OrderController = require("../controllers/orders.controller.js") 4 | // const verify = require("./verifyToken.js") 5 | router.post('/order/:id', OrderController.createOrder) 6 | router.get('/orders', OrderController.findAllOrders) 7 | router.delete('/deleteOrder/:id', OrderController.deleteOrder) 8 | router.post("/order", OrderController.cOrder) 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: __dirname + "/client/src/app.jsx", 3 | module: { 4 | rules: [ 5 | { 6 | test: [/\.jsx$/], 7 | exclude: /node_modules/, 8 | use: { 9 | loader: "babel-loader", 10 | options: { 11 | presets: ["@babel/preset-react", "@babel/preset-env"], 12 | }, 13 | }, 14 | }, 15 | ], 16 | }, 17 | output: { 18 | filename: "bundle.js", 19 | path: __dirname + "/client/dist", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /server/src/models/userModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const bcrypt = require("bcrypt"); 3 | const userSchema = new mongoose.Schema({ 4 | name: String, 5 | email: String, 6 | password: String, 7 | }); 8 | 9 | userSchema.pre('save', async function (next) { 10 | try{ 11 | const salt = await bcrypt.genSalt(10) 12 | const hashedPassword = await bcrypt.hash(this.password, salt) 13 | this.password = hashedPassword 14 | next() 15 | }catch(error){ 16 | next(error); 17 | } 18 | }) 19 | 20 | module.exports = mongoose.model("user", userSchema); 21 | -------------------------------------------------------------------------------- /client/dist/style/styleDetails.css: -------------------------------------------------------------------------------- 1 | /* SignUp */ 2 | 3 | #basic { 4 | display: grid; 5 | margin-left: 43%; 6 | margin-top: 4em; 7 | } 8 | .MuiButton-label { 9 | font-size: 12px; 10 | } 11 | #firstName { 12 | font-size: 12px; 13 | } 14 | #firstName-label { 15 | font-size: 13px; 16 | } 17 | #email { 18 | font-size: 12px; 19 | } 20 | #email-label { 21 | font-size: 12px; 22 | } 23 | #password { 24 | font-size: 12px; 25 | } 26 | #password-label { 27 | font-size: 12px; 28 | } 29 | /* signIn */ 30 | #singin { 31 | display: grid; 32 | margin-top: 8em; 33 | margin-left: 40%; 34 | } 35 | -------------------------------------------------------------------------------- /server/src/controllers/products.controller.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | // const UserModel = require("../database/userModel.js"); 3 | // const ProductModel = require("../database/productModel.js"); 4 | const ProductModel = require("../models/productModel.js"); 5 | 6 | const bcrypt = require("bcrypt"); 7 | // const { signupValidation, loginValidation } = require("../auth"); 8 | const jwt = require("jsonwebtoken"); 9 | // const OrderModel= require("../database/order.js") 10 | module.exports.findAll = async function (req, res) { 11 | try { 12 | const products = await ProductModel.find({}); 13 | res.send(products); 14 | } catch (error) { 15 | res.send(error); 16 | } 17 | }; -------------------------------------------------------------------------------- /server/auth.js: -------------------------------------------------------------------------------- 1 | const Joi = require("@hapi/joi"); 2 | 3 | //signUp validation 4 | 5 | const signupValidation = data => { 6 | const schema = { 7 | name: Joi.string().min(6).required(), 8 | email: Joi.string().min(6).required().email(), 9 | password: Joi.string().min(6).required() 10 | }; 11 | return Joi.validate(data,schema) 12 | } 13 | 14 | const loginValidation = data => { 15 | const schema = { 16 | email: Joi.string().min(6).required().email(), 17 | password: Joi.string().min(6).required() 18 | }; 19 | return Joi.validate(data, schema) 20 | } 21 | 22 | module.exports.signupValidation = signupValidation 23 | module.exports.loginValidation = loginValidation -------------------------------------------------------------------------------- /server/src/controllers/users.controller.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | // const UserModel = require("../database/userModel.js"); 3 | // const ProductModel = require("../database/productModel.js"); 4 | const bcrypt = require("bcrypt"); 5 | // const { signupValidation, loginValidation } = require("../auth"); 6 | const jwt = require("jsonwebtoken"); 7 | // const OrderModel= require("../database/order.js") 8 | const OrderModel= require("../models/orderModule.js") 9 | 10 | module.exports.cOrder = async function (req, res) { 11 | console.log(req.body) 12 | try { 13 | const order = await OrderModel.create(req.body); 14 | res.send(order); 15 | } catch (err) { 16 | res.send(err); 17 | } 18 | }; -------------------------------------------------------------------------------- /server/files/routers.js: -------------------------------------------------------------------------------- 1 | // const express = require("express"); 2 | // const router = express.Router(); 3 | // const Controller = require("./controllers.js"); 4 | // const verify = require("./verifyToken.js") 5 | // router.get("/users", Controller.findAllusers); 6 | // router.post('/create', Controller.createOne); 7 | // router.post('/login', Controller.findUser) 8 | 9 | // //ADMIN 10 | // router.get("/products", Controller.findAll); 11 | // router.post('/add', Controller.addprod) 12 | // router.delete('/delete/:id', Controller.deleteOne) 13 | // router.put('/update/:id', Controller.updateprod) 14 | // router.delete('/remove/:id', Controller.deleteUser) 15 | 16 | // // client order 17 | // router.post('/order/:id', Controller.createOrder) 18 | // router.get('/orders', Controller.findAllOrders) 19 | // router.delete('/deleteOrder/:id', Controller.deleteOrder) 20 | // router.post("/order", Controller.cOrder) 21 | // module.exports = router; 22 | -------------------------------------------------------------------------------- /client/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 | vapeStore 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const bodyParser = require("body-parser"); 3 | const db = require("./src/db/connection.js"); 4 | const app = express(); 5 | const port = 3000; 6 | // const vapeRouters = require("./files/routers.js"); 7 | const AuthRouter = require("./src/routes/auth.routes.js"); 8 | const OrderRouter = require("./src/routes/order.routes.js") 9 | const ProductRouter = require("./src/routes/product.routes.js") 10 | const UserRouter = require("./src/routes/user.routes.js") 11 | 12 | app.use(express.static(__dirname + "/../client/dist")); 13 | app.use(bodyParser.json()); 14 | app.use(bodyParser.urlencoded({ extended: true })); 15 | app.use("/api/vapeStore", AuthRouter); 16 | app.use("/api/vapeStore", OrderRouter); 17 | app.use("/api/vapeStore", ProductRouter); 18 | app.use("/api/vapeStore", UserRouter); 19 | 20 | app.listen(port, () => { 21 | console.log(`Example app listening at http://localhost:${port}`); 22 | }); 23 | -------------------------------------------------------------------------------- /server/src/routes/user.routes.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const router = express.Router(); 3 | const UserController = require("../controllers/users.controller.js") 4 | const AdminController = require("../controllers/admin.contollers.js") 5 | const Authcontroller = require("../controllers/auth.controller.js") 6 | const OrderController = require("../controllers/orders.controller.js") 7 | const ProductController = require("../controllers/products.controller.js") 8 | 9 | // const verify = require("./verifyToken.js") 10 | router.get("/users", AdminController.findAllusers); 11 | // router.post('/create', Controller.createOne); 12 | // router.post('/login', Controller.findUser) 13 | //ADMIN 14 | router.get("/products", AdminController.findAll); 15 | router.post('/add', AdminController.addprod) 16 | router.delete('/delete/:id', AdminController.deleteOne) 17 | router.put('/update/:id', AdminController.updateprod) 18 | router.delete('/remove/:id', AdminController.deleteUser) 19 | module.exports = router; 20 | -------------------------------------------------------------------------------- /server/database/testDataDb.js: -------------------------------------------------------------------------------- 1 | const vapes = require("../../vapes.json"); 2 | const vapes2 = require("../../vapes2.json"); 3 | var mongoose = require("mongoose"); 4 | // const user = require("./userModel.js"); 5 | const product = require("./productModel.js"); 6 | const users = require("./userModel.js"); 7 | const order = require("./order.js"); 8 | 9 | mongoose.connect("mongodb://localhost/vapeStore"); 10 | 11 | var seedDb = function (vapes) { 12 | product.insertMany(vapes, (err, res) => { 13 | if (err) { 14 | console.log(err); 15 | } else { 16 | console.log(res); 17 | } 18 | }); 19 | }; 20 | 21 | seedDb(vapes); 22 | 23 | var seedDbuser = function (vapes2) { 24 | users.insertMany(vapes2, (err, res) => { 25 | if (err) { 26 | console.log(err); 27 | } else { 28 | console.log(res); 29 | } 30 | }); 31 | }; 32 | 33 | seedDbuser(vapes2); 34 | 35 | 36 | var seedDbuser = function (orderReq) { 37 | order.insertMany(orderReq, (err, res) => { 38 | if (err) { 39 | console.log(err); 40 | } else { 41 | console.log(res); 42 | } 43 | }); 44 | }; 45 | 46 | seedDbuser(orderReq); 47 | -------------------------------------------------------------------------------- /client/src/navbar/navsignin.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import AppBar from "@material-ui/core/AppBar"; 4 | import Toolbar from "@material-ui/core/Toolbar"; 5 | import Typography from "@material-ui/core/Typography"; 6 | import Button from "@material-ui/core/Button"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | 9 | const useStyles = makeStyles((theme) => ({ 10 | root: { 11 | flexGrow: 1, 12 | }, 13 | menuButton: { 14 | marginRight: theme.spacing(2), 15 | }, 16 | title: { 17 | flexGrow: 1, 18 | }, 19 | })); 20 | 21 | export default function ButtonAppBar(props) { 22 | const classes = useStyles(); 23 | 24 | return ( 25 |
26 | 27 | 28 | 34 | props.changeView("details")}> 35 | Vapers Store 36 | 37 | 38 | 39 | 40 |
41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /client/src/navbar/navsignup.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import AppBar from "@material-ui/core/AppBar"; 4 | import Toolbar from "@material-ui/core/Toolbar"; 5 | import Typography from "@material-ui/core/Typography"; 6 | import Button from "@material-ui/core/Button"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | 9 | const useStyles = makeStyles((theme) => ({ 10 | root: { 11 | flexGrow: 1, 12 | }, 13 | menuButton: { 14 | marginRight: theme.spacing(2), 15 | }, 16 | title: { 17 | flexGrow: 1, 18 | }, 19 | })); 20 | 21 | export default function ButtonAppBar(props) { 22 | const classes = useStyles(); 23 | 24 | return ( 25 |
26 | 27 | 28 | 34 | props.changeView("details")}> 35 | Vapers Store 36 | 37 | 38 | 39 | 40 | 41 |
42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /client/src/navbar/navBar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import AppBar from "@material-ui/core/AppBar"; 4 | import Toolbar from "@material-ui/core/Toolbar"; 5 | import Typography from "@material-ui/core/Typography"; 6 | import Button from "@material-ui/core/Button"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | 9 | const useStyles = makeStyles((theme) => ({ 10 | root: { 11 | flexGrow: 1, 12 | }, 13 | menuButton: { 14 | marginRight: theme.spacing(2), 15 | }, 16 | title: { 17 | flexGrow: 1, 18 | }, 19 | })); 20 | 21 | export default function ButtonAppBar(props) { 22 | const classes = useStyles(); 23 | 24 | return ( 25 |
26 | 27 | 28 | 34 | props.changeView("details")}> 35 | Vapers Store 36 | 37 | 38 | 39 | 40 | 41 |
42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /server/src/controllers/orders.controller.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | // const UserModel = require("../database/userModel.js"); 3 | // const ProductModel = require("../database/productModel.js"); 4 | // const bcrypt = require("bcrypt"); 5 | // const { signupValidation, loginValidation } = require("../auth"); 6 | // const jwt = require("jsonwebtoken"); 7 | const OrderModel= require("../models/orderModule.js") 8 | // const OrderModel= require("../database/order.js") 9 | module.exports.createOrder = async function (req, res) { 10 | console.log(req.body) 11 | try { 12 | const order = await OrderModel.create(req.body); 13 | res.send(order); 14 | } catch (err) { 15 | res.send(err); 16 | } 17 | }; 18 | module.exports.findAllOrders = async function (req, res) { 19 | try { 20 | const order = await OrderModel.find({}); 21 | res.send(order); 22 | } catch (error) { 23 | res.send(error); 24 | } 25 | }; 26 | module.exports.deleteOrder = async function (req, res) { 27 | console.log(req.params._id); 28 | try { 29 | const order = await OrderModel.findByIdAndDelete({ 30 | _id: req.params.id, 31 | }); 32 | res.send(order); 33 | } catch (err) { 34 | res.send(err); 35 | } 36 | }; 37 | module.exports.cOrder = async function (req, res) { 38 | console.log(req.body) 39 | try { 40 | const order = await OrderModel.create(req.body); 41 | res.send(order); 42 | } catch (err) { 43 | res.send(err); 44 | } 45 | }; -------------------------------------------------------------------------------- /vapes.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "imageUrl": " https://cdn.shopify.com/s/files/1/0241/2241/products/Geekvape-Aegis-X-Kit-Gunmetal-Camo_532x532.jpg?v=1605994285", 4 | "title": "vapePurpil", 5 | "stock": "5", 6 | "description": "lorem ipsum dolor sit amet, consectet null a ante et just eu et" 7 | }, 8 | { 9 | "imageUrl": " https://assets.vaping.com/media/wysiwyg/product_descriptions/SMOK%20Novo%202/smok%20novo2%20spin_094.jpg?quality=80&scale.option=fill&scale.width=1280", 10 | "title": "vapeBlue", 11 | "stock": "15", 12 | "description": "lorem ipsum dolor sit amet, consectet null a ante et just eu et" 13 | }, 14 | { 15 | "imageUrl": " https://cdn.shopify.com/s/files/1/0209/9072/products/Planet-of-the-Vapes-ONE-Straight-Glass-Mouthpiece-dark-glass_1024x1024.jpg?v=1611761571", 16 | "title": "vapeBlack", 17 | "stock": "2", 18 | "description": "lorem ipsum dolor sit amet, consectet null a ante et just eu et" 19 | }, 20 | { 21 | "imageUrl": " https://i.ebayimg.com/images/g/nYgAAOSwqgFeQpiq/s-l640.jpg", 22 | "title": "vapeNewModel", 23 | "stock": "7", 24 | "description": "lorem ipsum dolor sit amet, consectet null a ante et just eu et" 25 | }, 26 | { 27 | "imageUrl": " https://d1q4q7ketxgxfn.cloudfront.net/media/catalog/product/cache/312af16b4230f9639b105af4a9030f8d/5/0/500182_vapouriz_vswitch_crossoverkit_rosegold_001.png", 28 | "title": "vapePink", 29 | "stock": "50", 30 | "description": "lorem ipsum dolor sit amet, consectet null a ante et just eu et" 31 | } 32 | ] 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vapeStore", 3 | "version": "1.0.0", 4 | "description": "this is a platform to sell vapes online", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack --watch --mode=development", 9 | "prod": "webpack --mode=production", 10 | "start": "nodemon server/index.js", 11 | "data": "node server/database/testDataDb.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/Semer-Ben-Salem/vapeStore.git" 16 | }, 17 | "keywords": [], 18 | "author": "", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/Semer-Ben-Salem/vapeStore/issues" 22 | }, 23 | "homepage": "https://github.com/Semer-Ben-Salem/vapeStore#readme", 24 | "devDependencies": { 25 | "@babel/core": "^7.13.1", 26 | "babel-loader": "^8.2.2", 27 | "path": "^0.12.7", 28 | "webpack": "^5.24.1", 29 | "webpack-cli": "^4.5.0" 30 | }, 31 | "dependencies": { 32 | "@babel/preset-env": "^7.13.5", 33 | "@babel/preset-react": "^7.12.13", 34 | "@hapi/joi": "^15.0.3", 35 | "@material-ui/core": "^4.11.3", 36 | "@material-ui/icons": "^4.11.2", 37 | "@material-ui/lab": "^4.0.0-alpha.57", 38 | "axios": "^0.21.1", 39 | "bcrypt": "^5.0.1", 40 | "express": "^4.17.1", 41 | "jquery": "^3.6.0", 42 | "jsonwebtoken": "^8.5.1", 43 | "mongoose": "^5.11.18", 44 | "react": "^17.0.1", 45 | "react-dom": "^17.0.1", 46 | "react-material-ui-carousel": "^2.2.1", 47 | "sweetalert2": "^10.15.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /client/src/components/details.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import Card from '@material-ui/core/Card'; 4 | import CardActionArea from '@material-ui/core/CardActionArea'; 5 | import CardActions from '@material-ui/core/CardActions'; 6 | import CardContent from '@material-ui/core/CardContent'; 7 | import CardMedia from '@material-ui/core/CardMedia'; 8 | import Button from '@material-ui/core/Button'; 9 | import Typography from '@material-ui/core/Typography'; 10 | 11 | const useStyles = makeStyles({ 12 | root: { 13 | maxWidth: 345, 14 | }, 15 | media: { 16 | height: 140, 17 | }, 18 | }); 19 | 20 | export default function Prodetail(props) { 21 | const classes = useStyles(); 22 | 23 | return ( 24 |
25 | 26 | 27 | 32 | 33 | 34 | {props.product.title} 35 | 36 | 37 | {props.product.description} 38 | 39 | 40 | 41 | 42 | 45 | 48 | 49 | 50 |
51 | ); 52 | } -------------------------------------------------------------------------------- /client/dist/style/styleProduct.css: -------------------------------------------------------------------------------- 1 | .card { 2 | display: grid; 3 | grid-template-columns: repeat(3, 1fr); 4 | grid-auto-rows: auto; 5 | grid-gap: 1rem; 6 | flex-direction: column; 7 | align-items: center; 8 | margin-left: 3em; 9 | margin-right: 3em; 10 | margin-top: 3em; 11 | margin-bottom: 2em; 12 | } 13 | #prodImage { 14 | height: 285px; 15 | width: 333px; 16 | margin-left: 3em; 17 | } 18 | .admincard { 19 | display: grid; 20 | grid-template-columns: repeat(3, 1fr); 21 | grid-auto-rows: auto; 22 | grid-gap: 0rem; 23 | flex-direction: column; 24 | align-items: center; 25 | margin-left: 25em; 26 | margin-right: 3em; 27 | margin-top: -13em; 28 | margin-bottom: 2em; 29 | } 30 | .detailscard { 31 | margin-left: 58rem; 32 | margin-top: 8rem; 33 | } 34 | .MuiCardMedia-root.makeStyles-media-8 { 35 | height: 285px; 36 | width: 333px; 37 | } 38 | .update-container { 39 | margin-left: 36em; 40 | 41 | } 42 | .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-formControl { 43 | width: 38rem; 44 | } 45 | main.makeStyles-content-26 { 46 | margin-left: -86px; 47 | } 48 | .MuiPaper-root.MuiCard-root.makeStyles-root-29.MuiPaper-elevation1.MuiPaper-rounded { 49 | width: 77ch; 50 | } 51 | .makeStyles-root-29 { 52 | margin-left: 24em; 53 | } 54 | .orders{ 55 | display: flex; 56 | grid-gap: 1rem; 57 | flex-direction: column; 58 | align-items: center; 59 | margin-left: 3em; 60 | margin-right: 3em; 61 | margin-top: 3em; 62 | margin-bottom: 2em; 63 | } 64 | .MuiCardMedia-root.makeStyles-media-15{ 65 | height: 306px 66 | } 67 | .MuiPaper-root.MuiCard-root.makeStyles-root-29.MuiPaper-outlined.MuiPaper-rounded{ 68 | margin-right: 45em; 69 | margin-left: 45em; 70 | margin-bottom: 2em; 71 | } 72 | /* .MuiCardContent-root{ 73 | margin-left: 26em; 74 | } */ -------------------------------------------------------------------------------- /client/src/userside/productdetails.jsx: -------------------------------------------------------------------------------- 1 | import React , { useState }from 'react'; 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import Card from '@material-ui/core/Card'; 4 | import CardActionArea from '@material-ui/core/CardActionArea'; 5 | import CardActions from '@material-ui/core/CardActions'; 6 | import CardContent from '@material-ui/core/CardContent'; 7 | import CardMedia from '@material-ui/core/CardMedia'; 8 | import Button from '@material-ui/core/Button'; 9 | import Typography from '@material-ui/core/Typography'; 10 | import axios from "axios" 11 | const useStyles = makeStyles({ 12 | root: { 13 | maxWidth: 345, 14 | }, 15 | media: { 16 | height: 140, 17 | }, 18 | }); 19 | 20 | export default function Prodetail(props) { 21 | const classes = useStyles(); 22 | const [state, setState] = useState({ 23 | email:localStorage.getItem("user") , 24 | imageUrl:props.product.imageUrl, 25 | title:props.product.title , 26 | stock:props.product.stock, 27 | prise: props.product.prise 28 | }); 29 | const handleClick =()=>{ 30 | axios.post(`/api/vapeStore/order/${props.product._id}`,state).then((res)=>{ 31 | alert ("your order is passed") 32 | }).catch((err)=>{console.log(err);}) 33 | } 34 | return ( 35 |
36 | 37 | 38 | 43 | 44 | 45 | {props.product.title} 46 | 47 | 48 | {props.product.description} 49 | 50 | 51 | 52 | 53 | 56 | 59 | 60 | 61 |
62 | ); 63 | } -------------------------------------------------------------------------------- /server/src/controllers/auth.controller.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | // const UserModel = require("../database/userModel.js"); 3 | const UserModel = require("../models/userModel.js"); 4 | 5 | // const ProductModel = require("../database/productModel.js"); 6 | const bcrypt = require("bcrypt"); 7 | const { signupValidation, loginValidation } = require("../../auth.js"); 8 | const jwt = require("jsonwebtoken"); 9 | // const OrderModel= require("../database/order.js") 10 | module.exports.createOne = async (req, res) => { 11 | //VALIDATE THE DATA 12 | const { error } = signupValidation(req.body); 13 | if (error) return res.send(error.details[0].message); 14 | 15 | //CHECK IF THE USER IS ALREADY IN THE DATABASE 16 | const emailExist = await UserModel.findOne({ email: req.body.email }); 17 | if (emailExist) return res.send("Email already exists"); 18 | 19 | //CRATE A NEW USER 20 | const newUser = new UserModel({ 21 | name: req.body.name, 22 | email: req.body.email, 23 | password: req.body.password, 24 | }); 25 | try { 26 | const saveUser = await newUser.save(); 27 | res.json(saveUser); 28 | } catch (error) { 29 | res.json(error); 30 | } 31 | }; 32 | module.exports.findUser = async (req, res) => { 33 | // VALIDATE THE DATA 34 | if (req.body.email === "admin" && req.body.password === "admin") { 35 | res.send("admin"); 36 | const token = jwt.sign({ _id: 00 }, "fghfghrtfjyuuikyufiy"); 37 | res.header("auth-token", token); 38 | res.send({ mesaage: "admin", token: token }); 39 | } else { 40 | const { error } = loginValidation(req.body); 41 | if (error) return res.send(error.details[0].message); 42 | 43 | try { 44 | const user = await UserModel.findOne({ email: req.body.email }); 45 | if (!user) { 46 | console.log("user not found"); 47 | } 48 | if (await bcrypt.compare(req.body.password, user.password)) { 49 | // create and assign a token 50 | const token = jwt.sign({ _id: user._id }, "fghfghrtfjyuuikyufiy"); 51 | res.header("auth-token", token); 52 | res.send({ message: "success", token: token }); 53 | } else { 54 | res.send("Email or password incorrect"); 55 | } 56 | } catch (err) { 57 | res.send(err); 58 | } 59 | } 60 | }; -------------------------------------------------------------------------------- /server/src/controllers/admin.contollers.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | var mongoose = require("mongoose"); 4 | const UserModel = require("../models/userModel.js"); 5 | const ProductModel = require("../models/productModel.js"); 6 | // const bcrypt = require("bcrypt"); 7 | // const { signupValidation, loginValidation } = require("../auth"); 8 | // const jwt = require("jsonwebtoken"); 9 | const OrderModel= require("../models/orderModule.js") 10 | module.exports.findAll = async function (req, res) { 11 | try { 12 | const products = await ProductModel.find({}); 13 | res.send(products); 14 | } catch (error) { 15 | res.send(error); 16 | } 17 | }; 18 | 19 | module.exports.addprod = async function (req, res) { 20 | console.log(req.body) 21 | try { 22 | const product = await ProductModel.create(req.body); 23 | res.send(product); 24 | } catch (err) { 25 | res.send(err); 26 | } 27 | }; 28 | 29 | module.exports.deleteOne = async function (req, res) { 30 | console.log(req.params._id); 31 | try { 32 | const product = await ProductModel.findByIdAndDelete({ 33 | _id: req.params.id, 34 | }); 35 | res.send(product); 36 | } catch (err) { 37 | res.send(err); 38 | } 39 | }; 40 | module.exports.updateprod = async function (req, res) { 41 | const prod = { 42 | imageUrl: req.body.imageUrl, 43 | title: req.body.title, 44 | stock: req.body.stock, 45 | description: req.body.description, 46 | }; 47 | try { 48 | let product = await ProductModel.findOne({ _id: req.params.id }) 49 | let update = await product.update(prod) 50 | res.send(update); 51 | } catch (err) { 52 | res.send(err); 53 | } 54 | }; 55 | module.exports.findAllusers = async function (req, res) { 56 | try { 57 | const products = await UserModel.find({}); 58 | res.send(products); 59 | } catch (error) { 60 | res.send(error); 61 | } 62 | }; 63 | module.exports.deleteUser = async function (req, res) { 64 | console.log(req.params._id); 65 | try { 66 | const product = await UserModel.findByIdAndDelete({ 67 | _id: req.params.id, 68 | }); 69 | res.send(product); 70 | } catch (err) { 71 | res.send(err); 72 | } 73 | }; 74 | module.exports.findAllOrders = async function (req, res) { 75 | try { 76 | const order = await OrderModel.find({}); 77 | res.send(order); 78 | } catch (error) { 79 | res.send(error); 80 | } 81 | }; -------------------------------------------------------------------------------- /client/src/userside/product.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Card from "@material-ui/core/Card"; 4 | import CardActionArea from "@material-ui/core/CardActionArea"; 5 | import CardActions from "@material-ui/core/CardActions"; 6 | import CardContent from "@material-ui/core/CardContent"; 7 | import CardMedia from "@material-ui/core/CardMedia"; 8 | import Button from "@material-ui/core/Button"; 9 | // import Typography from "@material-ui/core/Typography"; 10 | // import { makeStyles } from '@material-ui/core/styles'; 11 | import AppBar from '@material-ui/core/AppBar'; 12 | import Toolbar from '@material-ui/core/Toolbar'; 13 | import Typography from '@material-ui/core/Typography'; 14 | // import Button from '@material-ui/core/Button'; 15 | import IconButton from '@material-ui/core/IconButton'; 16 | // import MenuIcon from '@material-ui/icons/Menu'; 17 | 18 | 19 | const useStyles = makeStyles({ 20 | root: { 21 | maxWidth: 345, 22 | }, 23 | media: { 24 | height: 140, 25 | }, 26 | root: { 27 | flexGrow: 1, 28 | }, 29 | // menuButton: { 30 | // marginRight: theme.spacing(2), 31 | // }, 32 | title: { 33 | flexGrow: 1, 34 | } 35 | }); 36 | export default function MediaCard(props) { 37 | const classes = useStyles(); 38 | return ( 39 |
40 | {props.data.map((product, i) => { 41 | return ( 42 |
43 | 44 | 45 | 46 | 47 | 48 | {product.title} 49 | 50 | 51 | {product.description} 52 | 53 | 54 | 55 | 56 | 59 | 62 | 63 |
64 | ); 65 | })} 66 |
67 | ); 68 | } -------------------------------------------------------------------------------- /client/src/components/product.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Card from "@material-ui/core/Card"; 4 | import CardActionArea from "@material-ui/core/CardActionArea"; 5 | import CardActions from "@material-ui/core/CardActions"; 6 | import CardContent from "@material-ui/core/CardContent"; 7 | import CardMedia from "@material-ui/core/CardMedia"; 8 | import Button from "@material-ui/core/Button"; 9 | // import Typography from "@material-ui/core/Typography"; 10 | // import { makeStyles } from '@material-ui/core/styles'; 11 | import AppBar from '@material-ui/core/AppBar'; 12 | import Toolbar from '@material-ui/core/Toolbar'; 13 | import Typography from '@material-ui/core/Typography'; 14 | // import Button from '@material-ui/core/Button'; 15 | import IconButton from '@material-ui/core/IconButton'; 16 | // import MenuIcon from '@material-ui/icons/Menu'; 17 | 18 | 19 | const useStyles = makeStyles({ 20 | root: { 21 | maxWidth: 345, 22 | }, 23 | media: { 24 | height: 140, 25 | }, 26 | root: { 27 | flexGrow: 1, 28 | }, 29 | // menuButton: { 30 | // marginRight: theme.spacing(2), 31 | // }, 32 | title: { 33 | flexGrow: 1, 34 | } 35 | }); 36 | export default function MediaCard(props) { 37 | const classes = useStyles(); 38 | return ( 39 |
40 | 41 | {props.data.map((product, i) => { 42 | return ( 43 |
44 | 45 | 46 | 47 | 48 | 49 | {product.title} 50 | 51 | 52 | {product.description} 53 | 54 | 55 | 56 | 57 | 60 | 63 | 64 |
65 | ); 66 | })} 67 |
68 | ); 69 | } -------------------------------------------------------------------------------- /client/src/navbar/navbarprod.jsx: -------------------------------------------------------------------------------- 1 | import React , { useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import AppBar from "@material-ui/core/AppBar"; 4 | import Toolbar from "@material-ui/core/Toolbar"; 5 | import Typography from "@material-ui/core/Typography"; 6 | import Button from "@material-ui/core/Button"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | 9 | import Badge from '@material-ui/core/Badge'; 10 | import { withStyles } from '@material-ui/core/styles'; 11 | 12 | import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; 13 | const useStyles = makeStyles((theme) => ({ 14 | root: { 15 | flexGrow: 1, 16 | }, 17 | menuButton: { 18 | marginRight: theme.spacing(2), 19 | }, 20 | title: { 21 | flexGrow: 1, 22 | }, 23 | })); 24 | const StyledBadge = withStyles((theme) => ({ 25 | badge: { 26 | right: -8, 27 | top: 13, 28 | border: `1px solid ${theme.palette.background.paper}`, 29 | padding: '30 1px', 30 | }, 31 | }))(Badge); 32 | export default function ButtonAppBar(props) { 33 | const classes = useStyles(); 34 | const [state, setState]= useState({ 35 | order : JSON.parse(localStorage.getItem("order")) 36 | }) 37 | const logout = ()=>{ 38 | localStorage.clear() 39 | window.location.reload() 40 | } 41 | 42 | const showOrder = () =>{ 43 | console.log(state.order) 44 | 45 | } 46 | const shopping = ()=>{ 47 | if(state.order===undefined){ 48 | state.order= [] 49 | } 50 | } 51 | {shopping()} 52 | const number =()=>{ 53 | if(JSON.parse(localStorage.getItem('order'))=== null){ 54 | return 0 55 | }else{ 56 | return JSON.parse(localStorage.getItem('order')).length 57 | }} 58 | 59 | return ( 60 |
61 | 62 | 63 | 64 | 70 | props.changeView("pro")} > 71 | Vapers Store 72 | 73 | props.changeView("showorder")}> 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
84 | ); 85 | } -------------------------------------------------------------------------------- /client/src/adminside/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Adminnavbar from "../navbar/navadmin.jsx"; 3 | import Adminprod from "./adminprod.jsx"; 4 | import axios from "axios"; 5 | import Update from "./update.jsx"; 6 | import CreateProd from "./createProduct.jsx"; 7 | import Orders from "./order.jsx" 8 | import Navbar from "./navbarAdmin.jsx" 9 | import Users from "./users.jsx" 10 | export default class Admin extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | data: [], 15 | view: "", 16 | product: null, 17 | uptodate: { imageUrl: "", title: "", stock: "", description: "" }, 18 | }; 19 | this.handelDelete = this.handelDelete.bind(this); 20 | this.changeView = this.changeView.bind(this); 21 | this.renderView = this.renderView.bind(this); 22 | 23 | } 24 | componentDidMount() { 25 | if ( 26 | localStorage.getItem("token") && 27 | localStorage.getItem("token") !== "admin" 28 | ) { 29 | this.setState({ view: "pro" }); 30 | } else if (localStorage.getItem("token") === "admin") { 31 | this.setState({ view: "admin" }); 32 | } 33 | this.fetchData(); 34 | } 35 | fetchData() { 36 | axios.get("/api/vapeStore/products").then((res) => { 37 | this.setState({ data: res.data }); 38 | }); 39 | } 40 | changeView(view, product) { 41 | this.setState({ 42 | view: view, 43 | product: product, 44 | }); 45 | } 46 | handelDelete(id) { 47 | console.log(id); 48 | axios 49 | .delete(`/api/vapeStore/delete/${id}`) 50 | .then((result) => { 51 | console.log(result); 52 | }) 53 | .catch((err) => { 54 | console.log(err); 55 | }); 56 | } 57 | 58 | 59 | 60 | renderView() { 61 | const { view } = this.state; 62 | if (view === "admin") { 63 | return ( 64 |
65 | this.changeView(view,product)} product={this.state.product}/> 66 | this.changeView(view,product)} 68 | data={this.state.data} 69 | /> 70 |
71 | ); 72 | } 73 | if (view === "update") { 74 | return
this.changeView(view,product)} product={this.state.product}/> this.changeView(view,product)} product={this.state.product} />
; 75 | } 76 | if(view === "create"){ 77 | return
this.changeView(view,product)}/>
78 | } 79 | if (view === "order") { 80 | return
this.changeView(view,product)}/>
; 81 | } 82 | if (view === "user") { 83 | return
this.changeView(view,product)}/>
; 84 | } 85 | } 86 | 87 | render() { 88 | return ( 89 |
90 |
{this.renderView()}
91 |
92 | ); 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /client/src/components/pro.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState }from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Card from "@material-ui/core/Card"; 4 | import CardActionArea from "@material-ui/core/CardActionArea"; 5 | import CardActions from "@material-ui/core/CardActions"; 6 | import CardContent from "@material-ui/core/CardContent"; 7 | import CardMedia from "@material-ui/core/CardMedia"; 8 | import Button from "@material-ui/core/Button"; 9 | // import Typography from "@material-ui/core/Typography"; 10 | // import { makeStyles } from '@material-ui/core/styles'; 11 | import AppBar from '@material-ui/core/AppBar'; 12 | import Toolbar from '@material-ui/core/Toolbar'; 13 | import Typography from '@material-ui/core/Typography'; 14 | // import Button from '@material-ui/core/Button'; 15 | import IconButton from '@material-ui/core/IconButton'; 16 | // import MenuIcon from '@material-ui/icons/Menu'; 17 | import Navbarprod from "../navbar/navbarprod.jsx" 18 | import Swal from 'sweetalert2'; 19 | import $ from "jquery"; 20 | const useStyles = makeStyles({ 21 | root: { 22 | maxWidth: 345, 23 | }, 24 | media: { 25 | height: 140, 26 | }, 27 | root: { 28 | flexGrow: 1, 29 | }, 30 | // menuButton: { 31 | // marginRight: theme.spacing(2), 32 | // }, 33 | title: { 34 | flexGrow: 1, 35 | } 36 | }); 37 | export default function MediaCard(props) { 38 | const classes = useStyles(); 39 | var order = [] 40 | const addTopanie = (product) =>{ 41 | console.log(product) 42 | if(localStorage.getItem("order")){ 43 | var orderParse = localStorage.getItem( "order") 44 | var email = localStorage.getItem("user") 45 | var parseEmail = JSON.stringify(email) 46 | console.log(parseEmail); 47 | order = JSON.parse(orderParse) 48 | order.push([product.title, product.prise, product.imageUrl,parseEmail]) 49 | localStorage.setItem("order", JSON.stringify(order)) 50 | } else { 51 | order.push([product.title, product.prise, product.imageUrl]) 52 | localStorage.setItem("order", JSON.stringify(order)) 53 | } 54 | 55 | } 56 | 57 | 58 | return ( 59 |
60 | {props.data.map((product, i) => { 61 | return ( 62 |
63 | 64 | 65 | 66 | 67 | 68 | {product.title} 69 | 70 | 71 | {product.description} 72 | 73 | 74 | 75 | 76 | 79 | 88 | 89 |
90 | ); 91 | })} 92 | 93 | 94 |
95 | ); 96 | } -------------------------------------------------------------------------------- /client/src/adminside/users.jsx: -------------------------------------------------------------------------------- 1 | import React , { useState }from 'react'; 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import Card from '@material-ui/core/Card'; 4 | import CardActions from '@material-ui/core/CardActions'; 5 | import CardContent from '@material-ui/core/CardContent'; 6 | import Button from '@material-ui/core/Button'; 7 | import Typography from '@material-ui/core/Typography'; 8 | import axios from "axios" 9 | import Swal from 'sweetalert2' 10 | 11 | const useStyles = makeStyles({ 12 | root: { 13 | minWidth: 275, 14 | }, 15 | bullet: { 16 | display: 'inline-block', 17 | margin: '0 2px', 18 | transform: 'scale(0.8)', 19 | }, 20 | title: { 21 | fontSize: 14, 22 | }, 23 | pos: { 24 | marginBottom: 12, 25 | }, 26 | }); 27 | 28 | export default function OutlinedCard() { 29 | const classes = useStyles(); 30 | const [state, setState] = useState({ 31 | data: [] 32 | }); 33 | const componentDidMount=()=>{fetchData()} 34 | const fetchData=()=> { 35 | axios.get("/api/vapeStore/users").then((res) => { 36 | setState({ data: res.data }); 37 | }); 38 | } 39 | const handelDelete = (user) => { 40 | const swalWithBootstrapButtons = Swal.mixin({ 41 | customClass: { 42 | confirmButton: 'btn btn-success', 43 | cancelButton: 'btn btn-danger' 44 | }, 45 | buttonsStyling: false 46 | }) 47 | 48 | swalWithBootstrapButtons.fire({ 49 | title: 'Are you sure?', 50 | text: "You won't be able to revert this!", 51 | icon: 'warning', 52 | showCancelButton: true, 53 | confirmButtonText: 'Yes, delete it!', 54 | cancelButtonText: 'No, cancel!', 55 | reverseButtons: true 56 | }).then((result) => { 57 | if (result.isConfirmed) { 58 | swalWithBootstrapButtons.fire( 59 | 'Deleted!', 60 | 'Your user has been deleted.', 61 | 'success', 62 | 63 | ).then(() => {location.reload()}) 64 | axios 65 | .delete(`/api/vapeStore/remove/${user._id}`) 66 | .then((result) => { 67 | console.log(result); 68 | console.log(result.statusText); 69 | 70 | }) 71 | .catch((err) => { 72 | console.log(err); 73 | }); 74 | 75 | 76 | } else if ( 77 | /* Read more about handling dismissals below */ 78 | result.dismiss === Swal.DismissReason.cancel 79 | ) { 80 | swalWithBootstrapButtons.fire( 81 | 'Cancelled', 82 | 'Your user is safe :)', 83 | 'error' 84 | ) 85 | } 86 | }) 87 | 88 | 89 | }; 90 | const bull = •; 91 | componentDidMount() 92 | return ( 93 |
94 | {state.data.map((user, i)=>{return( 95 | 96 | 97 | 98 | User 99 | 100 | 101 | Username : {user.name} 102 | 103 | 104 | Email : {user.email} 105 | 106 | 107 | 108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | )})}
116 | ); 117 | } -------------------------------------------------------------------------------- /client/src/app.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import axios from "axios"; 4 | import Product from "./components/product.jsx"; 5 | import Signup from "./components/signUp.jsx"; 6 | import Signin from "./components/signIn.jsx"; 7 | import NavBar from "./navbar/navBar.jsx"; 8 | import Pro from "./components/pro.jsx"; 9 | import Admin from "./adminside/index.jsx"; 10 | import Prodetail from "./components/details.jsx"; 11 | import Navsignup from "./navbar/navsignup.jsx"; 12 | import Navsignin from "./navbar/navsignin.jsx"; 13 | import Navbarprod from './navbar/navbarprod.jsx'; 14 | import Userprod from "./userside/product.jsx"; 15 | import Userdetails from "./userside/productdetails.jsx"; 16 | import ShowOrders from './userside/showOrders.jsx' 17 | export default class App extends React.Component { 18 | constructor(props) { 19 | super(props); 20 | this.state = { 21 | data: [], 22 | view: "details", 23 | product:null, 24 | }; 25 | } 26 | componentDidMount() { 27 | if (localStorage.getItem("token") && localStorage.getItem("token") !== "admin") { 28 | this.setState({ view: "pro" }); 29 | } else if (localStorage.getItem("token") === "admin"){ 30 | this.setState({ view: "admin" }); 31 | } 32 | this.fetchData(); 33 | } 34 | 35 | fetchData() { 36 | axios.get("/api/vapeStore/products").then((res) => { 37 | this.setState({ data: res.data }); 38 | }); 39 | } 40 | 41 | changeView(view,product) { 42 | this.setState({ 43 | view: view, 44 | product: product, 45 | }); 46 | } 47 | 48 | renderView() { 49 | const { view } = this.state; 50 | if (view === "details") { 51 | return
this.changeView(data)} /> this.changeView(view,product) } />
; 52 | } 53 | if (view === "signup") { 54 | return
this.changeView(data)}/> this.changeView(view)} />
; 55 | } 56 | if (view === "signin") { 57 | return
this.changeView(data)}/> this.changeView(view)} />
; 58 | } 59 | if (view === "pro") { 60 | return
this.changeView(data)}/> this.changeView(view,product)} product={this.state.product} />
; 61 | } 62 | if (view === "admin") { 63 | return
this.changeView(view,product)} />
; 64 | } 65 | if (view === "Prodetail") { 66 | return
this.changeView(data)}/> this.changeView(view,product) } product={this.state.product} />
; 67 | } 68 | if (view === "userprod") { 69 | return
this.changeView(data)}/> this.changeView(view,product) } data={this.state.data} product={this.state.product} />
; 70 | } 71 | if (view === "showorder") { 72 | return
this.changeView(data)}/> this.changeView(view,product)} product={this.state.product}data={this.state.data} />
; 73 | } 74 | } 75 | 76 | render() { 77 | { 78 | 79 | if (this.state.view !== "admin") { 80 | return ( 81 |
82 | 83 |
{this.renderView()}
84 |
85 | ); 86 | } 87 | return ( 88 |
89 | 90 |
{this.renderView()}
91 |
92 | ); 93 | } 94 | } 95 | } 96 | 97 | ReactDOM.render(, document.getElementById("app")); 98 | -------------------------------------------------------------------------------- /client/src/userside/showOrders.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Card from "@material-ui/core/Card"; 4 | import CardActionArea from "@material-ui/core/CardActionArea"; 5 | import CardActions from "@material-ui/core/CardActions"; 6 | import CardContent from "@material-ui/core/CardContent"; 7 | import CardMedia from "@material-ui/core/CardMedia"; 8 | import Button from "@material-ui/core/Button"; 9 | // import Typography from "@material-ui/core/Typography"; 10 | // import { makeStyles } from '@material-ui/core/styles'; 11 | import AppBar from "@material-ui/core/AppBar"; 12 | import Toolbar from "@material-ui/core/Toolbar"; 13 | import Typography from "@material-ui/core/Typography"; 14 | // import Button from '@material-ui/core/Button'; 15 | import IconButton from "@material-ui/core/IconButton"; 16 | // import MenuIcon from '@material-ui/icons/Menu'; 17 | import Navbarprod from "../navbar/navbarprod.jsx"; 18 | import axios from "axios"; 19 | import { Alert, AlertTitle } from '@material-ui/lab'; 20 | const useStyles = makeStyles((theme) => ({ 21 | root: { 22 | width: '100%', 23 | '& > * + *': { 24 | marginTop: theme.spacing(2), 25 | }, 26 | }, 27 | })); 28 | export default function Orders(props) { 29 | const classes = useStyles(); 30 | var list = []; 31 | var email; 32 | var title; 33 | var imageUrl; 34 | var prise; 35 | var order = JSON.parse(localStorage.getItem("order")); 36 | var tottale = 0 37 | const [state, setState] = useState({ 38 | email: email, 39 | imageUrl: imageUrl, 40 | title: title, 41 | stock: 0, 42 | prise: prise, 43 | }); 44 | const handleClick = () => { 45 | var arrOfArray = JSON.parse(localStorage.getItem("order")) 46 | console.log(JSON.parse(localStorage.getItem("order"))) 47 | arrOfArray.map((e,i)=>{ 48 | var onePruduct = { 49 | email: localStorage.getItem("user"), 50 | imageUrl: e[2], 51 | title: e[0], 52 | stock: 0, 53 | prise: e[1], 54 | } 55 | console.log("send ==> " , onePruduct) 56 | axios 57 | .post(`/api/vapeStore/order`, onePruduct) 58 | .then((res) => { 59 | console.log("seccess") 60 | localStorage.removeItem("order"); 61 | window.location.reload(); 62 | }) 63 | .catch((err) => { 64 | console.log(err); 65 | }); 66 | }) 67 | 68 | }; 69 | 70 | if (order === null) { 71 | return ( 72 |
73 |
74 | 75 | Warning 76 | You have No order 77 | 78 |
79 | 80 | 81 |
82 | ); 83 | } else { 84 | order.map((e, i) => { 85 | var a = e[1] * 1 86 | tottale = tottale + a 87 | list.push(
88 | 89 | 90 | 91 | 92 | 93 | { e[0]} 94 | 95 | 96 | {e[1]} 97 | 98 | 99 | 100 | 101 | 102 | 103 |
104 | ); 105 | console.log(order); 106 | 107 | (email = e[3]), (imageUrl = e[2]), (title = e[0]), (prise = e[1]); 108 | }); 109 | return ( 110 |
111 | {list} 112 | Total price {tottale} £ 113 | 114 | 119 |
120 | ); 121 | } 122 | } 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /client/src/components/signIn.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Avatar from "@material-ui/core/Avatar"; 3 | import Button from "@material-ui/core/Button"; 4 | import CssBaseline from "@material-ui/core/CssBaseline"; 5 | import TextField from "@material-ui/core/TextField"; 6 | import Link from "@material-ui/core/Link"; 7 | import Grid from "@material-ui/core/Grid"; 8 | import Box from "@material-ui/core/Box"; 9 | import Toolbar from "@material-ui/core/Toolbar"; 10 | import AppBar from "@material-ui/core/AppBar"; 11 | import Typography from "@material-ui/core/Typography"; 12 | import { makeStyles } from "@material-ui/core/styles"; 13 | import Container from "@material-ui/core/Container"; 14 | import IconButton from "@material-ui/core/IconButton"; 15 | import axios from "axios"; 16 | import Product from "./product.jsx"; 17 | import Swal from 'sweetalert2' 18 | function Copyright() { 19 | return ( 20 | 21 | {"Copyright © "} 22 | Vape Store {new Date().getFullYear()} 23 | {"."} 24 | 25 | ); 26 | } 27 | 28 | const useStyles = makeStyles((theme) => ({ 29 | paper: { 30 | marginTop: theme.spacing(18), 31 | display: "flex", 32 | flexDirection: "column", 33 | alignItems: "center", 34 | }, 35 | avatar: { 36 | margin: theme.spacing(1), 37 | backgroundColor: theme.palette.secondary.main, 38 | }, 39 | form: { 40 | width: "100%", 41 | marginTop: theme.spacing(1), 42 | }, 43 | submit: { 44 | margin: theme.spacing(3, 0, 2), 45 | }, 46 | })); 47 | 48 | export default function SignIn(props) { 49 | const classes = useStyles(); 50 | 51 | const [state, setState] = useState({ 52 | email: "", 53 | password: "", 54 | }); 55 | const handelChange = function (event) { 56 | const { name, value } = event.target; 57 | setState((prevState) => ({ ...prevState, [name]: value })); 58 | }; 59 | 60 | const handleClick = function () { 61 | var obj = { email: state.email, password: state.password }; 62 | // console.log(state.name , state.password) 63 | axios 64 | .post("/api/vapeStore/login", obj) 65 | .then((res) => { 66 | console.log(res.data); 67 | if (res.data === "admin") { 68 | localStorage.setItem("token" ,"admin") 69 | return props.changeView("admin"); 70 | } else { 71 | if (res.data.message === "success") { 72 | console.log('im in'); 73 | localStorage.setItem("token", res.data.token); 74 | localStorage.setItem("user", obj.email); 75 | 76 | // console.log(localStorage.token); 77 | return props.changeView("pro"); 78 | } else { 79 | Swal.fire({ 80 | icon: 'error', 81 | title: 'Oops...', 82 | text: 'Something went wrong! Email or password incorrect . Please try again', 83 | 84 | }) 85 | } 86 | } 87 | }) 88 | .catch((err) => { 89 | console.log(err); 90 | }); 91 | }; 92 | 93 | return ( 94 |
95 | 96 | 97 |
98 | 99 | 100 | Login 101 | 102 |
103 | handelChange(e)} 114 | /> 115 | handelChange(e)} 126 | /> 127 | 128 | 137 | 138 | 139 | props.changeView("signup")} 142 | > 143 | {"Don't have an account? Sign Up"} 144 | 145 | 146 | 147 | 148 |
149 | 150 | 151 | 152 | 153 |
154 | ); 155 | } 156 | -------------------------------------------------------------------------------- /client/src/navbar/navadmin.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import { makeStyles, useTheme } from '@material-ui/core/styles'; 4 | import Drawer from '@material-ui/core/Drawer'; 5 | import CssBaseline from '@material-ui/core/CssBaseline'; 6 | import AppBar from '@material-ui/core/AppBar'; 7 | import Toolbar from '@material-ui/core/Toolbar'; 8 | import List from '@material-ui/core/List'; 9 | import Typography from '@material-ui/core/Typography'; 10 | import Divider from '@material-ui/core/Divider'; 11 | import IconButton from '@material-ui/core/IconButton'; 12 | import Card from '@material-ui/core/Card'; 13 | import CardActionArea from '@material-ui/core/CardActionArea'; 14 | import CardActions from '@material-ui/core/CardActions'; 15 | import CardContent from '@material-ui/core/CardContent'; 16 | import CardMedia from '@material-ui/core/CardMedia'; 17 | // import MenuIcon from '@material-ui/icons/Menu'; 18 | // import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; 19 | // import ChevronRightIcon from '@material-ui/icons/ChevronRight'; 20 | import ListItem from '@material-ui/core/ListItem'; 21 | import ListItemIcon from '@material-ui/core/ListItemIcon'; 22 | import ListItemText from '@material-ui/core/ListItemText'; 23 | // import InboxIcon from '@material-ui/icons/MoveToInbox'; 24 | // import MailIcon from '@material-ui/icons/Mail'; 25 | 26 | const drawerWidth = 240; 27 | 28 | const useStyles = makeStyles((theme) => ({ 29 | root: { 30 | display: 'flex', 31 | }, 32 | appBar: { 33 | transition: theme.transitions.create(['margin', 'width'], { 34 | easing: theme.transitions.easing.sharp, 35 | duration: theme.transitions.duration.leavingScreen, 36 | }), 37 | }, 38 | appBarShift: { 39 | width: `calc(100% - ${drawerWidth}px)`, 40 | marginLeft: drawerWidth, 41 | transition: theme.transitions.create(['margin', 'width'], { 42 | easing: theme.transitions.easing.easeOut, 43 | duration: theme.transitions.duration.enteringScreen, 44 | }), 45 | }, 46 | menuButton: { 47 | marginRight: theme.spacing(2), 48 | }, 49 | hide: { 50 | display: 'none', 51 | }, 52 | drawer: { 53 | width: drawerWidth, 54 | flexShrink: 0, 55 | }, 56 | drawerPaper: { 57 | width: drawerWidth, 58 | }, 59 | drawerHeader: { 60 | display: 'flex', 61 | alignItems: 'center', 62 | padding: theme.spacing(0, 1), 63 | // necessary for content to be below app bar 64 | ...theme.mixins.toolbar, 65 | justifyContent: 'flex-end', 66 | }, 67 | content: { 68 | flexGrow: 1, 69 | padding: theme.spacing(3), 70 | transition: theme.transitions.create('margin', { 71 | easing: theme.transitions.easing.sharp, 72 | duration: theme.transitions.duration.leavingScreen, 73 | }), 74 | marginLeft: -drawerWidth, 75 | }, 76 | contentShift: { 77 | transition: theme.transitions.create('margin', { 78 | easing: theme.transitions.easing.easeOut, 79 | duration: theme.transitions.duration.enteringScreen, 80 | }), 81 | marginLeft: 0, 82 | }, 83 | })); 84 | 85 | export default function PersistentDrawerLeft() { 86 | const classes = useStyles(); 87 | const theme = useTheme(); 88 | const [open, setOpen] = React.useState(false); 89 | 90 | const handleDrawerOpen = () => { 91 | setOpen(true); 92 | }; 93 | 94 | const handleDrawerClose = () => { 95 | setOpen(false); 96 | }; 97 | 98 | return ( 99 |
100 | 101 | 107 | 108 | 115 | 116 | 117 | 118 | Persistent drawer 119 | 120 | 121 | 122 | 131 |
132 | 133 | {theme.direction} 134 | 135 |
136 | 137 | 138 | {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( 139 | 140 | {index} 141 | 142 | 143 | ))} 144 | 145 | 146 | 147 | {['All mail', 'Trash', 'Spam'].map((text, index) => ( 148 | 149 | {index} 150 | 151 | 152 | ))} 153 | 154 | 155 |
160 | 161 | 162 | 163 |
164 |
165 | ); 166 | } -------------------------------------------------------------------------------- /client/src/components/signUp.jsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import axios from 'axios'; 3 | import Avatar from '@material-ui/core/Avatar'; 4 | import Button from '@material-ui/core/Button'; 5 | import CssBaseline from '@material-ui/core/CssBaseline'; 6 | import TextField from '@material-ui/core/TextField'; 7 | import Link from '@material-ui/core/Link'; 8 | import Grid from '@material-ui/core/Grid'; 9 | import Box from '@material-ui/core/Box'; 10 | import Typography from '@material-ui/core/Typography'; 11 | import { makeStyles } from '@material-ui/core/styles'; 12 | import Container from '@material-ui/core/Container'; 13 | import AppBar from '@material-ui/core/AppBar'; 14 | import Toolbar from '@material-ui/core/Toolbar'; 15 | import IconButton from '@material-ui/core/IconButton'; 16 | import Swal from 'sweetalert2' 17 | 18 | function Copyright() { 19 | return ( 20 | 21 | {'Copyright © '} 22 | 23 | Vape Store 24 | {' '} 25 | {new Date().getFullYear()} 26 | {'.'} 27 | 28 | ); 29 | } 30 | 31 | const useStyles = makeStyles((theme) => ({ 32 | paper: { 33 | marginTop: theme.spacing(8), 34 | display: 'flex', 35 | flexDirection: 'column', 36 | alignItems: 'center', 37 | }, 38 | avatar: { 39 | margin: theme.spacing(1), 40 | backgroundColor: theme.palette.secondary.main, 41 | }, 42 | form: { 43 | width: '100%', // Fix IE 11 issue. 44 | marginTop: theme.spacing(3), 45 | }, 46 | submit: { 47 | margin: theme.spacing(3, 0, 2), 48 | }, 49 | root: { 50 | flexGrow: 1, 51 | }, 52 | menuButton: { 53 | marginRight: theme.spacing(2), 54 | }, 55 | title: { 56 | flexGrow: 1, 57 | }, 58 | })); 59 | 60 | export default function SignUp(props) { 61 | const classes = useStyles(); 62 | const [state, setState] = useState({ 63 | name: "", 64 | email: "", 65 | password: "" 66 | }) 67 | const handleChange = (e) => { 68 | const { name ,value } = e.target 69 | setState(prevState =>({ 70 | ...prevState, 71 | [name]: value 72 | })) 73 | console.log(state); 74 | } 75 | const handleSubmit = (e) => { 76 | e.preventDefault(); 77 | const userToAdd = { 78 | name: state.name, 79 | email: state.email, 80 | password: state.password 81 | } 82 | axios.post('/api/vapestore/create',userToAdd) 83 | .then((response)=>{ 84 | console.log(typeof response.data) 85 | if(typeof response.data=== 'object'){ 86 | Swal.fire({ 87 | position: 'middle', 88 | icon: 'success', 89 | title: 'Your work has been saved', 90 | showConfirmButton: false, 91 | timer: 1500 92 | }).then(()=>{props.changeView("signin")}) 93 | }else if (typeof response.data!== 'object'){ 94 | Swal.fire({ 95 | icon: 'error', 96 | title: 'Oops...', 97 | text: response.data, 98 | }) 99 | } 100 | }).catch((error)=>{ 101 | console.log(error) 102 | }) 103 | } 104 | return ( 105 |
106 | 107 | 108 | 109 | 110 |
111 | 112 | 113 | 114 | 115 | Sign up 116 | 117 |
118 | 119 | 120 | handleChange(e)} 130 | /> 131 | 132 | 133 | handleChange(e)} 142 | /> 143 | 144 | 145 | handleChange(e)} 155 | /> 156 | 157 | 158 | 168 | 169 | 170 | props.changeView("signin")}> 171 | Already have an account? Sign in 172 | 173 | 174 | 175 |
176 |
177 | 178 | 179 | 180 | 181 |
182 | ); 183 | } -------------------------------------------------------------------------------- /client/src/adminside/update.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import TextField from "@material-ui/core/TextField"; 4 | import Button from "@material-ui/core/Button"; 5 | import Card from "@material-ui/core/Card"; 6 | import CardActionArea from "@material-ui/core/CardActionArea"; 7 | import CardActions from "@material-ui/core/CardActions"; 8 | import CardContent from "@material-ui/core/CardContent"; 9 | import CardMedia from "@material-ui/core/CardMedia"; 10 | import axios from "axios"; 11 | import Swal from 'sweetalert2' 12 | const useStyles = makeStyles((theme) => ({ 13 | root: { 14 | "& > *": { 15 | margin: theme.spacing(1), 16 | width: "25ch", 17 | display: "grid", 18 | }, 19 | }, 20 | })); 21 | 22 | export default function BasicTextFields(props) { 23 | const classes = useStyles(); 24 | const [state, setState] = useState({ 25 | uptodate: { 26 | imageUrl: props.product.imageUrl, 27 | title: props.product.title, 28 | stock: props.product.stock, 29 | description: props.product.description, 30 | prise: props.product.prise, 31 | }, 32 | id: 0, 33 | }); 34 | const getData = (data) => { 35 | setState({ uptodate: data }), setState({ id: data._id }); 36 | }; 37 | const handleSubmit = () => { 38 | axios 39 | .put(`/api/vapeStore/update/${props.product._id}`, state.uptodate) 40 | .then((result) => { 41 | Swal.fire({ 42 | position: 'middle', 43 | icon: 'success', 44 | title: 'Your updates has been saved', 45 | showConfirmButton: false, 46 | timer: 1500 47 | }).then(() => {location.reload()}) 48 | }); 49 | }; 50 | const handleChange = (e) => { 51 | switch (e.target.name) { 52 | case "imageUrl": 53 | setState({ 54 | uptodate: { 55 | imageUrl: e.target.value, 56 | title: state.uptodate.title, 57 | stock: state.uptodate.stock, 58 | description: state.uptodate.value, 59 | prise: state.uptodate.prise, 60 | }, 61 | }); 62 | break; 63 | case "title": 64 | setState({ 65 | uptodate: { 66 | imageUrl: state.uptodate.imageUrl, 67 | title: e.target.value, 68 | stock: state.uptodate.stock, 69 | description: state.uptodate.value, 70 | prise: state.uptodate.prise, 71 | }, 72 | }); 73 | break; 74 | case "stock": 75 | setState({ 76 | uptodate: { 77 | imageUrl: state.uptodate.imageUrl, 78 | title: state.uptodate.title, 79 | stock: e.target.value, 80 | description: state.uptodate.value, 81 | prise: state.uptodate.prise, 82 | }, 83 | }); 84 | break; 85 | case "description": 86 | setState({ 87 | uptodate: { 88 | imageUrl: state.uptodate.imageUrl, 89 | title: state.uptodate.title, 90 | stock: state.uptodate.stock, 91 | description: e.target.value, 92 | prise: state.uptodate.prise, 93 | }, 94 | }); 95 | break; 96 | case "prise": 97 | setState({ 98 | uptodate: { 99 | imageUrl: state.uptodate.imageUrl, 100 | title: state.uptodate.title, 101 | stock: state.uptodate.stock, 102 | description: state.uptodate.description, 103 | prise: e.target.value, 104 | }, 105 | }); 106 | break; 107 | } 108 | }; 109 | return ( 110 |
111 |
112 | 113 | 114 | 120 | 121 | 122 | handleChange(e)} 129 | autoComplete="imageUrl" 130 | /> 131 | handleChange(e)} 138 | autoComplete="title" 139 | /> 140 | handleChange(e)} 147 | autoComplete="stock" 148 | /> 149 | handleChange(e)} 156 | autoComplete="prise" 157 | /> 158 | handleChange(e)} 165 | autoComplete="description" 166 | /> 167 | 170 | 171 |
172 | ); 173 | } 174 | -------------------------------------------------------------------------------- /server/files/controllers.js: -------------------------------------------------------------------------------- 1 | // var mongoose = require("mongoose"); 2 | // const UserModel = require("../src/models/userModel.js"); 3 | // const ProductModel = require("../src/models/productModel.js"); 4 | // const bcrypt = require("bcrypt"); 5 | // const { signupValidation, loginValidation } = require("../auth"); 6 | // const jwt = require("jsonwebtoken"); 7 | // const OrderModel= require("../src/models/orderModule.js") 8 | // module.exports.findAllusers = async function (req, res) { 9 | // try { 10 | // const products = await UserModel.find({}); 11 | // res.send(products); 12 | // } catch (error) { 13 | // res.send(error); 14 | // } 15 | // }; 16 | // module.exports.deleteUser = async function (req, res) { 17 | // console.log(req.params._id); 18 | // try { 19 | // const product = await UserModel.findByIdAndDelete({ 20 | // _id: req.params.id, 21 | // }); 22 | // res.send(product); 23 | // } catch (err) { 24 | // res.send(err); 25 | // } 26 | // }; 27 | // module.exports.createOne = async (req, res) => { 28 | // //VALIDATE THE DATA 29 | // const { error } = signupValidation(req.body); 30 | // if (error) return res.send(error.details[0].message); 31 | 32 | // //CHECK IF THE USER IS ALREADY IN THE DATABASE 33 | // const emailExist = await UserModel.findOne({ email: req.body.email }); 34 | // if (emailExist) return res.send("Email already exists"); 35 | 36 | // //CRATE A NEW USER 37 | // const newUser = new UserModel({ 38 | // name: req.body.name, 39 | // email: req.body.email, 40 | // password: req.body.password, 41 | // }); 42 | // try { 43 | // const saveUser = await newUser.save(); 44 | // res.json(saveUser); 45 | // } catch (error) { 46 | // res.json(error); 47 | // } 48 | // }; 49 | // module.exports.findUser = async (req, res) => { 50 | // // VALIDATE THE DATA 51 | // if (req.body.email === "admin" && req.body.password === "admin") { 52 | // res.send("admin"); 53 | // const token = jwt.sign({ _id: 00 }, "fghfghrtfjyuuikyufiy"); 54 | // res.header("auth-token", token); 55 | // res.send({ mesaage: "admin", token: token }); 56 | // } else { 57 | // const { error } = loginValidation(req.body); 58 | // if (error) return res.send(error.details[0].message); 59 | 60 | // try { 61 | // const user = await UserModel.findOne({ email: req.body.email }); 62 | // if (!user) { 63 | // console.log("user not found"); 64 | // } 65 | // if (await bcrypt.compare(req.body.password, user.password)) { 66 | // // create and assign a token 67 | // const token = jwt.sign({ _id: user._id }, "fghfghrtfjyuuikyufiy"); 68 | // res.header("auth-token", token); 69 | // res.send({ message: "success", token: token }); 70 | // } else { 71 | // res.send("Email or password incorrect"); 72 | // } 73 | // } catch (err) { 74 | // res.send(err); 75 | // } 76 | // } 77 | // }; 78 | // // crud for admin 79 | // module.exports.findAll = async function (req, res) { 80 | // try { 81 | // const products = await ProductModel.find({}); 82 | // res.send(products); 83 | // } catch (error) { 84 | // res.send(error); 85 | // } 86 | // }; 87 | 88 | // module.exports.addprod = async function (req, res) { 89 | // console.log(req.body) 90 | // try { 91 | // const product = await ProductModel.create(req.body); 92 | // res.send(product); 93 | // } catch (err) { 94 | // res.send(err); 95 | // } 96 | // }; 97 | 98 | // module.exports.deleteOne = async function (req, res) { 99 | // console.log(req.params._id); 100 | // try { 101 | // const product = await ProductModel.findByIdAndDelete({ 102 | // _id: req.params.id, 103 | // }); 104 | // res.send(product); 105 | // } catch (err) { 106 | // res.send(err); 107 | // } 108 | // }; 109 | // module.exports.updateprod = async function (req, res) { 110 | // const prod = { 111 | // imageUrl: req.body.imageUrl, 112 | // title: req.body.title, 113 | // stock: req.body.stock, 114 | // description: req.body.description, 115 | // }; 116 | // try { 117 | // let product = await ProductModel.findOne({ _id: req.params.id }) 118 | // let update = await product.update(prod) 119 | // res.send(update); 120 | // } catch (err) { 121 | // res.send(err); 122 | // } 123 | // }; 124 | 125 | // // module.exports.update = async (req, res) => { 126 | // // try { 127 | // // const update = await ProductModel.updateOne( 128 | // // { _id: req.params._id }, 129 | // // { 130 | // // $set: { 131 | // // imageUrl: req.body.imageUrl, 132 | // // title: req.body.title, 133 | // // stock: req.body.stock, 134 | // // description: req.body.description, 135 | // // }, 136 | // // } 137 | // // ); 138 | // // res.json(update); 139 | // // } catch (error) { 140 | // // res.json({ message: error }); 141 | // // } 142 | // // }; 143 | 144 | 145 | // // user side 146 | // // create order 147 | // module.exports.createOrder = async function (req, res) { 148 | // console.log(req.body) 149 | // try { 150 | // const order = await OrderModel.create(req.body); 151 | // res.send(order); 152 | // } catch (err) { 153 | // res.send(err); 154 | // } 155 | // }; 156 | // module.exports.findAllOrders = async function (req, res) { 157 | // try { 158 | // const order = await OrderModel.find({}); 159 | // res.send(order); 160 | // } catch (error) { 161 | // res.send(error); 162 | // } 163 | // }; 164 | // module.exports.deleteOrder = async function (req, res) { 165 | // console.log(req.params._id); 166 | // try { 167 | // const order = await OrderModel.findByIdAndDelete({ 168 | // _id: req.params.id, 169 | // }); 170 | // res.send(order); 171 | // } catch (err) { 172 | // res.send(err); 173 | // } 174 | // }; 175 | // module.exports.cOrder = async function (req, res) { 176 | // console.log(req.body) 177 | // try { 178 | // const order = await OrderModel.create(req.body); 179 | // res.send(order); 180 | // } catch (err) { 181 | // res.send(err); 182 | // } 183 | // }; -------------------------------------------------------------------------------- /client/src/adminside/navbarAdmin.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import clsx from "clsx"; 3 | import { makeStyles, useTheme } from "@material-ui/core/styles"; 4 | import Drawer from "@material-ui/core/Drawer"; 5 | import CssBaseline from "@material-ui/core/CssBaseline"; 6 | import AppBar from "@material-ui/core/AppBar"; 7 | import Toolbar from "@material-ui/core/Toolbar"; 8 | import List from "@material-ui/core/List"; 9 | import Typography from "@material-ui/core/Typography"; 10 | import Divider from "@material-ui/core/Divider"; 11 | import IconButton from "@material-ui/core/IconButton"; 12 | import MenuIcon from "@material-ui/icons/Menu"; 13 | import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; 14 | import ChevronRightIcon from "@material-ui/icons/ChevronRight"; 15 | import ListItem from "@material-ui/core/ListItem"; 16 | import ListItemIcon from "@material-ui/core/ListItemIcon"; 17 | import ListItemText from "@material-ui/core/ListItemText"; 18 | import InboxIcon from "@material-ui/icons/MoveToInbox"; 19 | import Button from "@material-ui/core/Button"; 20 | import MailIcon from "@material-ui/icons/Mail"; 21 | 22 | const drawerWidth = 240; 23 | 24 | const useStyles = makeStyles((theme) => ({ 25 | root: { 26 | display: "flex", 27 | }, 28 | appBar: { 29 | transition: theme.transitions.create(["margin", "width"], { 30 | easing: theme.transitions.easing.sharp, 31 | duration: theme.transitions.duration.leavingScreen, 32 | }), 33 | }, 34 | appBarShift: { 35 | width: `calc(100% - ${drawerWidth}px)`, 36 | marginLeft: drawerWidth, 37 | transition: theme.transitions.create(["margin", "width"], { 38 | easing: theme.transitions.easing.easeOut, 39 | duration: theme.transitions.duration.enteringScreen, 40 | }), 41 | }, 42 | menuButton: { 43 | marginRight: theme.spacing(2), 44 | }, 45 | hide: { 46 | display: "none", 47 | }, 48 | drawer: { 49 | width: drawerWidth, 50 | flexShrink: 0, 51 | }, 52 | drawerPaper: { 53 | width: drawerWidth, 54 | }, 55 | drawerHeader: { 56 | display: "flex", 57 | alignItems: "center", 58 | padding: theme.spacing(0, 1), 59 | // necessary for content to be below app bar 60 | ...theme.mixins.toolbar, 61 | justifyContent: "flex-end", 62 | }, 63 | content: { 64 | flexGrow: 1, 65 | padding: theme.spacing(3), 66 | transition: theme.transitions.create("margin", { 67 | easing: theme.transitions.easing.sharp, 68 | duration: theme.transitions.duration.leavingScreen, 69 | }), 70 | marginLeft: -drawerWidth, 71 | }, 72 | contentShift: { 73 | transition: theme.transitions.create("margin", { 74 | easing: theme.transitions.easing.easeOut, 75 | duration: theme.transitions.duration.enteringScreen, 76 | }), 77 | marginLeft: 0, 78 | }, 79 | })); 80 | 81 | export default function PersistentDrawerLeft(props) { 82 | const classes = useStyles(); 83 | const theme = useTheme(); 84 | const [open, setOpen] = React.useState(false); 85 | 86 | const handleDrawerOpen = () => { 87 | setOpen(true); 88 | }; 89 | 90 | const handleDrawerClose = () => { 91 | setOpen(false); 92 | }; 93 | const logout = () => { 94 | localStorage.clear(); 95 | window.location.reload(); 96 | }; 97 | return ( 98 |
99 | 100 | 106 | 107 | 114 | 115 | 116 | window.location.reload()} 120 | > 121 | Vape Store 122 | 123 | 124 | 125 | 134 |
135 | 136 | {theme.direction === "ltr" ? ( 137 | 138 | ) : ( 139 | 140 | )} 141 | 142 |
143 | 144 | 145 | 146 | 147 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 199 | 200 | 201 | 202 |
207 |
208 |
209 |
210 | ); 211 | } 212 | -------------------------------------------------------------------------------- /client/src/adminside/order.jsx: -------------------------------------------------------------------------------- 1 | import React , { useState }from "react"; 2 | import clsx from "clsx"; 3 | import { makeStyles, useTheme } from "@material-ui/core/styles"; 4 | import Drawer from "@material-ui/core/Drawer"; 5 | import CssBaseline from "@material-ui/core/CssBaseline"; 6 | import AppBar from "@material-ui/core/AppBar"; 7 | import Toolbar from "@material-ui/core/Toolbar"; 8 | import List from "@material-ui/core/List"; 9 | import Typography from "@material-ui/core/Typography"; 10 | import Divider from "@material-ui/core/Divider"; 11 | import IconButton from "@material-ui/core/IconButton"; 12 | // import MenuIcon from '@material-ui/icons/Menu'; 13 | // import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; 14 | // import ChevronRightIcon from '@material-ui/icons/ChevronRight'; 15 | import ListItem from "@material-ui/core/ListItem"; 16 | import ListItemIcon from "@material-ui/core/ListItemIcon"; 17 | import ListItemText from "@material-ui/core/ListItemText"; 18 | import Button from "@material-ui/core/Button"; 19 | // import InboxIcon from '@material-ui/icons/MoveToInbox'; 20 | // import MailIcon from '@material-ui/icons/Mail'; 21 | import Card from "@material-ui/core/Card"; 22 | import CardActionArea from "@material-ui/core/CardActionArea"; 23 | import CardActions from "@material-ui/core/CardActions"; 24 | import CardContent from "@material-ui/core/CardContent"; 25 | import CardMedia from "@material-ui/core/CardMedia"; 26 | import axios from "axios"; 27 | 28 | 29 | const drawerWidth = 240; 30 | 31 | const useStyles = makeStyles((theme) => ({ 32 | root: { 33 | display: "flex", 34 | maxWidth: 345, 35 | flexGrow: 1, 36 | }, 37 | appBar: { 38 | transition: theme.transitions.create(["margin", "width"], { 39 | easing: theme.transitions.easing.sharp, 40 | duration: theme.transitions.duration.leavingScreen, 41 | }), 42 | }, 43 | appBarShift: { 44 | width: `calc(100% - ${drawerWidth}px)`, 45 | marginLeft: drawerWidth, 46 | transition: theme.transitions.create(["margin", "width"], { 47 | easing: theme.transitions.easing.easeOut, 48 | duration: theme.transitions.duration.enteringScreen, 49 | }), 50 | }, 51 | media: { 52 | height: 140, 53 | }, 54 | menuButton: { 55 | marginRight: theme.spacing(2), 56 | }, 57 | hide: { 58 | display: "none", 59 | }, 60 | drawer: { 61 | width: drawerWidth, 62 | flexShrink: 0, 63 | }, 64 | drawerPaper: { 65 | width: drawerWidth, 66 | }, 67 | drawerHeader: { 68 | display: "flex", 69 | alignItems: "center", 70 | padding: theme.spacing(0, 1), 71 | // necessary for content to be below app bar 72 | ...theme.mixins.toolbar, 73 | justifyContent: "flex-end", 74 | }, 75 | content: { 76 | flexGrow: 1, 77 | padding: theme.spacing(3), 78 | transition: theme.transitions.create("margin", { 79 | easing: theme.transitions.easing.sharp, 80 | duration: theme.transitions.duration.leavingScreen, 81 | }), 82 | marginLeft: -drawerWidth, 83 | }, 84 | contentShift: { 85 | transition: theme.transitions.create("margin", { 86 | easing: theme.transitions.easing.easeOut, 87 | duration: theme.transitions.duration.enteringScreen, 88 | }), 89 | marginLeft: 0, 90 | }, 91 | title: { 92 | flexGrow: 1, 93 | }, 94 | })); 95 | 96 | export default function PersistentDrawerLeft(props) { 97 | const classes = useStyles(); 98 | const theme = useTheme(); 99 | const [open, setOpen] = React.useState(false); 100 | const [state, setState]= useState({ 101 | data:[] 102 | }) 103 | const handleDrawerOpen = () => { 104 | setOpen(true); 105 | }; 106 | 107 | const handleDrawerClose = () => { 108 | setOpen(false); 109 | }; 110 | const logout = () => { 111 | localStorage.clear(); 112 | window.location.reload(); 113 | }; 114 | const componentDidMount=() =>{ 115 | 116 | fetchData(); 117 | } 118 | 119 | const fetchData=() =>{ 120 | axios.get("/api/vapeStore/orders").then((res) => { 121 | setState({ data: res.data }); 122 | }); 123 | } 124 | const handelDelete = (product) => { 125 | console.log("deleted order", product._id); 126 | axios 127 | .delete(`/api/vapeStore/deleteOrder/${product._id}`) 128 | .then((result) => { 129 | console.log(result); 130 | }) 131 | .catch((err) => { 132 | console.log(err); 133 | }) 134 | window.location.reload(); 135 | }; 136 | 137 | componentDidMount() 138 | return ( 139 |
140 | 141 | {state.data.map((product, i) => { 142 | {if(product){ return
143 | 144 | 145 | 154 |
155 | 156 | {theme.direction} 157 | 158 |
159 | 160 | 161 | 162 | 163 | 166 | 169 | 172 | 173 | 174 | 175 | 176 | 177 |
182 |
183 |
184 | 185 | 186 | 192 | 193 | 194 | {product.title} 195 | 196 | 197 | 202 | {product.email} 203 | 204 | 213 | 214 | 215 | 216 | 217 | 218 |
219 |
}} 220 | 221 | })} 222 |
223 | ); 224 | } 225 | -------------------------------------------------------------------------------- /client/src/adminside/createProduct.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Avatar from "@material-ui/core/Avatar"; 3 | import Button from "@material-ui/core/Button"; 4 | import CssBaseline from "@material-ui/core/CssBaseline"; 5 | import TextField from "@material-ui/core/TextField"; 6 | import FormControlLabel from "@material-ui/core/FormControlLabel"; 7 | import Checkbox from "@material-ui/core/Checkbox"; 8 | import Link from "@material-ui/core/Link"; 9 | import Grid from "@material-ui/core/Grid"; 10 | import Box from "@material-ui/core/Box"; 11 | import axios from "axios"; 12 | import Typography from "@material-ui/core/Typography"; 13 | import { makeStyles } from "@material-ui/core/styles"; 14 | import Container from "@material-ui/core/Container"; 15 | import Swal from 'sweetalert2' 16 | function Copyright() { 17 | return ( 18 | 19 | {"Copyright © "} 20 | 21 | Avangers 22 | {" "} 23 | {new Date().getFullYear()} 24 | {"."} 25 | 26 | ); 27 | } 28 | 29 | const useStyles = makeStyles((theme) => ({ 30 | paper: { 31 | marginTop: theme.spacing(8), 32 | display: "flex", 33 | flexDirection: "column", 34 | alignItems: "center", 35 | }, 36 | avatar: { 37 | margin: theme.spacing(1), 38 | backgroundColor: theme.palette.secondary.main, 39 | }, 40 | form: { 41 | width: "100%", // Fix IE 11 issue. 42 | marginTop: theme.spacing(3), 43 | }, 44 | submit: { 45 | margin: theme.spacing(3, 0, 2), 46 | }, 47 | })); 48 | 49 | export default function SignUp() { 50 | const classes = useStyles(); 51 | const [state, setState] = useState({ 52 | uptodate : { imageUrl: "", 53 | title: "", 54 | stock: "", 55 | description: "", 56 | prise: "",} 57 | }); 58 | const handleChange = (e) => { 59 | 60 | 61 | switch (e.target.name) { 62 | case "imageUrl": 63 | setState({ 64 | uptodate: { 65 | imageUrl: e.target.value, 66 | title: state.uptodate.title, 67 | stock: state.uptodate.stock, 68 | description: state.uptodate.description, 69 | prise: state.uptodate.prise 70 | }, 71 | }); 72 | break; 73 | case "title": 74 | setState({ 75 | uptodate: { 76 | imageUrl: state.uptodate.imageUrl, 77 | title: e.target.value, 78 | stock: state.uptodate.stock, 79 | description: state.uptodate.description, 80 | prise: state.uptodate.prise 81 | }, 82 | }); 83 | break; 84 | case "stock": 85 | setState({ 86 | uptodate: { 87 | imageUrl: state.uptodate.imageUrl, 88 | title: state.uptodate.title, 89 | stock: e.target.value, 90 | description: state.uptodate.description, 91 | prise: state.uptodate.prise 92 | }, 93 | }); 94 | break; 95 | case "description": 96 | setState({ 97 | uptodate: { 98 | imageUrl: state.uptodate.imageUrl, 99 | title: state.uptodate.title, 100 | stock: state.uptodate.stock, 101 | description: e.target.value, 102 | prise: state.uptodate.prise 103 | }, 104 | }); 105 | break; 106 | case "prise": 107 | setState({ 108 | uptodate: { 109 | imageUrl: state.uptodate.imageUrl, 110 | title: state.uptodate.title, 111 | stock: state.uptodate.stock, 112 | description: state.uptodate.description, 113 | prise: e.target.value 114 | }, 115 | }); 116 | break; 117 | } 118 | console.log(state.uptodate) 119 | }; 120 | 121 | const handleSubmit = () => { 122 | console.log(state.uptodate); 123 | axios 124 | .post("/api/vapeStore/add", state.uptodate) 125 | .then((response) => { 126 | 127 | let timerInterval 128 | Swal.fire({ 129 | title: 'Product Added', 130 | html: 'Check the user list ', 131 | timer: 2000, 132 | timerProgressBar: true, 133 | didOpen: () => { 134 | Swal.showLoading() 135 | timerInterval = setInterval(() => { 136 | const content = Swal.getContent() 137 | if (content) { 138 | const b = content.querySelector('b') 139 | if (b) { 140 | b.textContent = Swal.getTimerLeft() 141 | } 142 | } 143 | }, 100) 144 | }, 145 | willClose: () => { 146 | clearInterval(timerInterval) 147 | } 148 | }).then((result) => { 149 | /* Read more about handling dismissals below */ 150 | if (result.dismiss === Swal.DismissReason.timer) { 151 | console.log('I was closed by the timer') 152 | } 153 | }) 154 | window.location.reload() 155 | }) 156 | .catch((error) => { 157 | alert("error"); 158 | }); 159 | 160 | }; 161 | return ( 162 | 163 | 164 |
165 |
166 | 167 | 168 | handleChange(e)} 177 | /> 178 | 179 | 180 | handleChange(e)} 190 | /> 191 | 192 | 193 | handleChange(e)} 203 | /> 204 | 205 | 206 | handleChange(e)} 217 | /> 218 | 219 | 220 | handleChange(e)} 231 | /> 232 | 233 | 234 | 243 |
244 |
245 | 246 | 247 | 248 | 249 | ); 250 | } 251 | -------------------------------------------------------------------------------- /client/src/adminside/adminprod.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import clsx from "clsx"; 3 | import { makeStyles, useTheme } from "@material-ui/core/styles"; 4 | import Drawer from "@material-ui/core/Drawer"; 5 | import CssBaseline from "@material-ui/core/CssBaseline"; 6 | import AppBar from "@material-ui/core/AppBar"; 7 | import Toolbar from "@material-ui/core/Toolbar"; 8 | import List from "@material-ui/core/List"; 9 | import Typography from "@material-ui/core/Typography"; 10 | import Divider from "@material-ui/core/Divider"; 11 | import IconButton from "@material-ui/core/IconButton"; 12 | import MenuIcon from '@material-ui/icons/Menu'; 13 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; 14 | import ChevronRightIcon from '@material-ui/icons/ChevronRight'; 15 | import ListItem from "@material-ui/core/ListItem"; 16 | import ListItemIcon from "@material-ui/core/ListItemIcon"; 17 | import ListItemText from "@material-ui/core/ListItemText"; 18 | import Button from "@material-ui/core/Button"; 19 | // import InboxIcon from '@material-ui/icons/MoveToInbox'; 20 | // import MailIcon from '@material-ui/icons/Mail'; 21 | import Card from "@material-ui/core/Card"; 22 | import CardActionArea from "@material-ui/core/CardActionArea"; 23 | import CardActions from "@material-ui/core/CardActions"; 24 | import CardContent from "@material-ui/core/CardContent"; 25 | import CardMedia from "@material-ui/core/CardMedia"; 26 | import axios from "axios"; 27 | import Swal from 'sweetalert2' 28 | 29 | const drawerWidth = 240; 30 | 31 | const useStyles = makeStyles((theme) => ({ 32 | root: { 33 | display: "flex", 34 | maxWidth: 345, 35 | flexGrow: 1, 36 | }, 37 | appBar: { 38 | transition: theme.transitions.create(["margin", "width"], { 39 | easing: theme.transitions.easing.sharp, 40 | duration: theme.transitions.duration.leavingScreen, 41 | }), 42 | }, 43 | appBarShift: { 44 | width: `calc(100% - ${drawerWidth}px)`, 45 | marginLeft: drawerWidth, 46 | transition: theme.transitions.create(["margin", "width"], { 47 | easing: theme.transitions.easing.easeOut, 48 | duration: theme.transitions.duration.enteringScreen, 49 | }), 50 | }, 51 | media: { 52 | height: 140, 53 | }, 54 | menuButton: { 55 | marginRight: theme.spacing(2), 56 | }, 57 | hide: { 58 | display: "none", 59 | }, 60 | drawer: { 61 | width: drawerWidth, 62 | flexShrink: 0, 63 | }, 64 | drawerPaper: { 65 | width: drawerWidth, 66 | }, 67 | drawerHeader: { 68 | display: "flex", 69 | alignItems: "center", 70 | padding: theme.spacing(0, 1), 71 | // necessary for content to be below app bar 72 | ...theme.mixins.toolbar, 73 | justifyContent: "flex-end", 74 | }, 75 | content: { 76 | flexGrow: 1, 77 | padding: theme.spacing(3), 78 | transition: theme.transitions.create("margin", { 79 | easing: theme.transitions.easing.sharp, 80 | duration: theme.transitions.duration.leavingScreen, 81 | }), 82 | marginLeft: -drawerWidth, 83 | }, 84 | contentShift: { 85 | transition: theme.transitions.create("margin", { 86 | easing: theme.transitions.easing.easeOut, 87 | duration: theme.transitions.duration.enteringScreen, 88 | }), 89 | marginLeft: 0, 90 | }, 91 | title: { 92 | flexGrow: 1, 93 | }, 94 | })); 95 | 96 | export default function PersistentDrawerLeft(props) { 97 | const classes = useStyles(); 98 | const theme = useTheme(); 99 | const [open, setOpen] = React.useState(false); 100 | 101 | const handleDrawerOpen = () => { 102 | setOpen(true); 103 | }; 104 | 105 | const handleDrawerClose = () => { 106 | setOpen(false); 107 | }; 108 | const logout = () => { 109 | localStorage.clear(); 110 | window.location.reload(); 111 | }; 112 | 113 | const handelDelete = (product) => { 114 | const swalWithBootstrapButtons = Swal.mixin({ 115 | customClass: { 116 | confirmButton: 'btn btn-success', 117 | cancelButton: 'btn btn-danger' 118 | }, 119 | buttonsStyling: false 120 | }) 121 | 122 | swalWithBootstrapButtons.fire({ 123 | title: 'Are you sure?', 124 | text: "You won't be able to revert this!", 125 | icon: 'warning', 126 | showCancelButton: true, 127 | confirmButtonText: 'Yes, delete it!', 128 | cancelButtonText: 'No, cancel!', 129 | reverseButtons: true 130 | }).then((result) => { 131 | if (result.isConfirmed) { 132 | swalWithBootstrapButtons.fire( 133 | 'Deleted!', 134 | 'Your Product has been deleted.', 135 | 'success', 136 | 137 | ).then(() => {location.reload()}) 138 | axios 139 | .delete(`/api/vapeStore/delete/${product._id}`) 140 | .then((result) => { 141 | console.log(result); 142 | console.log(result.statusText); 143 | 144 | }) 145 | .catch((err) => { 146 | console.log(err); 147 | }); 148 | 149 | 150 | } else if ( 151 | /* Read more about handling dismissals below */ 152 | result.dismiss === Swal.DismissReason.cancel 153 | ) { 154 | swalWithBootstrapButtons.fire( 155 | 'Cancelled', 156 | 'Your product is safe :)', 157 | 'error' 158 | ) 159 | } 160 | }) 161 | 162 | 163 | }; 164 | const getData = (data) => { 165 | setState({ uptodate: data }), setState({ id: data._id }); 166 | }; 167 | 168 | return ( 169 |
170 | {props.data.map((product, i) => { 171 | return ( 172 |
173 | 174 | {/* 180 | 181 | 188 | 189 | 190 | 191 | Vape Store 192 | 193 | 200 | 201 | 202 | 203 | 212 |
213 | 214 | {theme.direction === 'ltr' ? : } 215 | 216 | 217 | {theme.direction} 218 | 219 |
220 | 221 | 222 | 223 | 224 | 227 | 230 | 233 | 234 | 235 | 236 | 237 | 238 | */} 239 |
244 |
245 |
246 | 247 | 248 | 254 | 255 | 256 | {product.title} 257 | 258 | 263 | {product.description} 264 | 265 | 274 | 283 | 284 | 285 | 286 | 287 |
288 |
289 | ); 290 | })} 291 |
292 | ); 293 | } 294 | --------------------------------------------------------------------------------