react components for user auth

controllers/apiBuying.js

@@ -31,6 +31,11 @@ module.exports = function() {
 
 		const { _id, username } = req.user;
 		const Userinfo = req.session[_id];
+
+		if (!Userinfo.emailverfied) {
+			return res.status(401).send("Email is not verified, please verified your email address");
+		}
+
 		console.log(Userinfo);
 		if(req.body.btcAddress.length >="25" && (req.body.btcAddress[0]=="1" || req.body.btcAddress[0]=="0" || req.body.btcAddress[0]=="b")){
 			let 下 = {

controllers/authUpdate.js

@@ -118,7 +118,7 @@ module.exports = function() {
    /////////////////////
 
    authUpdate.put("/user/changeEmail", Auth, function(req, res) {
-      const { email, password } = req.body;
+      const { email, originalpass: password } = req.body;
       const { _id, username: curuser } = req.user;
       let user = undefined;
 
@@ -160,7 +160,7 @@ module.exports = function() {
 
    authUpdate.put("/user/changePass", Auth, function(req, res) {
       DEBUG && console.log(req.body);
-      const { password: original, newpassword: password } = req.body;
+      const { originalpass: original, password } = req.body;
       const { _id } = req.user;
       let user = undefined;
 

controllers/infoUpdate.js

@@ -33,10 +33,16 @@ module.exports = function() {
          return ServErr(res, err);
       });
    });
+
    //route for access user's purchases
    infoRoute.get("/api/myOrders", Auth, function(req, res) {
       DEBUG && console.log("\x1b[32mDEBUG: \x1b[0m/api/myOrders");
       const { _id: uid } = req.user;
+
+		// this way we don't have to query database
+		// const { orders } = req.session[uid];
+		// res.status(200).send(orders);
+
       CRUD.read({
          _id: uid
       }).then(info=>{

cryptoshopreact/src/AuthModal.js

@@ -0,0 +1,81 @@
+import React, { Component } from "react";
+import Login from "./components/LoginOut";
+import UserUpdate from "./components/UserUpdate";
+import Err from "./components/Error";
+import "./index.css";
+
+// this is similar to original auth but designed to fit in modal
+class Auth extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			user: {
+				login: "Login with credential",
+				register: "Register an account",
+				forgot: "Forgot your password?"
+			},
+			info: {
+				email: "Change your email",
+				password: "Change your password"
+			},
+			message: "",
+			response: ""
+		};
+	}
+
+	flagResponse = (flag, message) => {
+		this.setState({ response: message });
+	};
+
+	flagState = (mode, name) => {
+		const { [name]: value } = this.state[mode];
+		this.setState({ message: value });
+	};
+
+	renderBody(swt) {
+		switch (swt) {
+			case "user_auth":
+				return <Login flag={this.flagState} result={this.flagResponse} />;
+			case "info_auth":
+				return <UserUpdate flag={this.flagState} result={this.flagResponse} />;
+			default:
+				console.log("errrrr");
+		}
+	}
+
+	componentDidMount() {
+		const mode = this.props.switch;
+		const { user, info } = this.state;
+		mode.match(/\user/)
+			? this.setState({ message: user.login })
+			: this.setState({ message: info.email });
+	}
+
+	render() {
+		const { message, response } = this.state;
+
+		return [
+			<div key="modalheader" className="modal-header">
+				<h5 className="modal-title">{message}</h5>
+				<button
+					type="button"
+					className="close"
+					data-dismiss="modal"
+					aria-label="Close"
+				>
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>,
+			<div key="modalbody" className="modal-body">
+				{this.renderBody(this.props.switch)}
+			</div>,
+			response ? (
+				<div key="messagebody" className="modal-footer">
+					<Err response={response} />
+				</div>
+			) : null
+		];
+	}
+}
+
+export default Auth;

cryptoshopreact/src/components/Error/Error.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import "./style.css";
+
+const Err = props => {
+	return (
+		<div className="card text-white bg-danger mb-3">
+			<div className="card-body">{props.response}</div>
+		</div>
+	);
+};
+
+export default Err;

cryptoshopreact/src/components/Error/index.js

@@ -0,0 +1 @@
+export { default } from "./Error";

cryptoshopreact/src/components/Form/Form.js

@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import "./style.css";
 
 class Form extends Component {
-
 	renderFields(args, reset) {
 		const fields = args.map((elem, index) => {
 			return (
@@ -24,16 +23,17 @@ class Form extends Component {
 	}
 
 	render() {
-		const { className, fields, name } = this.props;
+		const { className, fields, name, optional } = this.props;
 
 		return (
 			<form onSubmit={this.props.submit} className={className || ""}>
-				{ this.renderFields(fields) }
-				<input key="submit" type="submit" value={name}/>
-				{ this.props.footer }
+				{this.renderFields(fields)}
+				{optional ? <div className="form-group">{optional}</div> : null}
+				<input key="submit" type="submit" value={name} />
+				{this.props.footer}
 			</form>
-		)
+		);
 	}
 }
 
-export default Form;
+export default Form;

cryptoshopreact/src/components/Form/style.css

@@ -0,0 +1,31 @@
+input[type="submit"] {
+   display: inline-block;
+   border-radius: .25rem;
+   border-width: 0px;
+   padding: .5rem 1rem;
+   color: white;
+   background-color: #007bff;
+   cursor: pointer;
+   --webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   -moz-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   -ms-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+input[type="submit"]:hover {
+	background-color: #0768d0;
+}
+
+p.--anchor>a {
+   cursor: pointer;
+   --webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   -moz-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   -ms-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+p.--anchor>a:hover {
+   color: #ff2b2b !important;
+}

cryptoshopreact/src/components/LoginOut/LoginOut.js

@@ -15,6 +15,7 @@ class Login extends Component {
 			email: "",
 			fields: fields,
 			isLogin: true,
+			checkbox: false,
 			resetPass: false
 		};
 	}
@@ -26,12 +27,16 @@ class Login extends Component {
 
 	submitHandler = evt => {
 		evt.preventDefault();
-		const { isLogin, resetPass, fields } = this.state;
+		const { isLogin, resetPass, checkbox, fields } = this.state;
 
 		for (let elem in fields) {
 			delete fields[elem].err;
 		}
 
+		if (!isLogin && !checkbox) {
+			return this.props.result("error", "please confirm you have read and agreed to our terms");
+		}
+
 		switch (true) {
 			case resetPass:
 				reset(this.state)
@@ -87,9 +92,7 @@ class Login extends Component {
 				let { field, message } = errType;
 
 				if (!field) {
-					// this is where we decided what to do with server error
-					fields.username.err = message;
-					field = "username";
+					this.props.result("error", message);
 				} else {
 					fields[field].err = message;
 				}
@@ -112,8 +115,8 @@ class Login extends Component {
 			delete fields[elem].err;
 		}
 
+		this.setflag();
 		this.setState({
-			reset: true,
 			username: "",
 			password: "",
 			passconfirm: "",
@@ -122,17 +125,28 @@ class Login extends Component {
 		});
 	}
 
+	setflag () {
+		const { isLogin, resetPass } = this.state;
+		if (resetPass) {
+			return this.props.flag("user", "forgot");
+		}
+		if (isLogin) {
+			return this.props.flag("user", "login");
+		}
+		return this.props.flag("user", "register");
+	}
+
 	renFooter() {
 		const { isLogin, resetPass } = this.state;
 		const msg = isLogin ? "New User?" : "Already Registered?";
 		return (
-			<p key="footer" className="--anchor">
+			<p key="footer" className="--anchor float-right">
 				{isLogin
 					? [
 							<a key="forgotpass" onClick={() => this.clearFields("resetPass", !resetPass)}>
-								Forgot Your Password?
+								Forgot Your Password?&nbsp;
 							</a>,
-							<span key="backslash"> / </span>
+							<span key="backslash">/&nbsp;</span>
 						]
 					: ""}
 				<a key="userchoice" onClick={() => this.clearFields("isLogin", !isLogin)}>
@@ -142,6 +156,24 @@ class Login extends Component {
 		);
 	}
 
+	renCheckbox() {
+		const { checkbox } = this.state;
+
+		return (
+			<div className="form-check">
+				<input className="form-check-input" type="checkbox" id="gridCheck" value={ checkbox } />
+				<label className="form-check-label" htmlFor="gridCheck">
+					<small id="privacyHelp" onClick={ () => { this.setState({ checkbox: !checkbox }) }}>
+						I agree to the cryptoShop&nbsp;
+						<a data-toggle="modal" data-target="#privacyPolicy" href="">
+						Privacy Policy&nbsp;
+						</a>
+					</small>
+				</label>
+			</div>
+		);
+	}
+
 	renderBody() {
 		const { isLogin, resetPass, fields } = this.state;
 		const { username, password, email, passconfirm } = fields;
@@ -168,7 +200,7 @@ class Login extends Component {
 		if (resetPass) {
 			name = "Confirm";
 			footer = (
-				<p key="footer" className="--anchor">
+				<p key="footer" className="--anchor float-right">
 					<a onClick={() => this.clearFields("resetPass", !resetPass)}>Never Mind...</a>
 				</p>
 			);
@@ -179,7 +211,7 @@ class Login extends Component {
 				fields={this.renderBody()}
 				submit={this.submitHandler}
 				input={this.inputHandler}
-				className="card"
+				optional={isLogin ? "" : this.renCheckbox()}
 				name={name}
 				footer={footer}
 				states={this.state}