Merge pull request 307zoo-Aeolus#1 from 307zoo-Aeolus/password_yqw

change & forget pw
TannyXie · Jul 4, 2020 · 5071c66 · 5071c66
2 parents fccb097 + bc95ed2
commit 5071c66
Show file tree

Hide file tree

Showing 6 changed files with 300 additions and 50 deletions.
diff --git a/src/index.js b/src/index.js
@@ -13,6 +13,8 @@ import Research from "views/Research/Research.js";
 import ProfilePage from "views/ProfilePage/ProfilePage.js";
 import LoginPage from "views/LoginPage/LoginPage.js";
 import RegisterPage from "views/RegisterPage/Register.js";
+import ChangePW from "views/ChangePW/ChangePW.js";
+import ForgetPW from "views/ForgetPW/ForgetPW.js";
 
 var hist = createBrowserHistory();
 
@@ -25,6 +27,8 @@ ReactDOM.render(
       <Route path="/profile-page" component={ProfilePage} />
       <Route path="/login-page" component={LoginPage} />
       <Route path="/register-page" component={RegisterPage} />
+      <Route path="/change-pw" component={ChangePW} />
+      <Route path="/forget-pw" component={ForgetPW} />
       <Route path="/" component={Components} />
     </Switch>
   </Router>,

diff --git a/src/views/ChangePW/ChangePW.js b/src/views/ChangePW/ChangePW.js
@@ -0,0 +1,138 @@
+import React from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Icon from "@material-ui/core/Icon";
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Button from "components/CustomButtons/Button.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import CustomInput from "components/CustomInput/CustomInput.js";
+
+import styles from "assets/jss/material-kit-react/views/loginPage.js";
+
+import image from "assets/img/home-bg-art.jpg";
+
+const useStyles = makeStyles(styles);
+
+function jumpTo(e, href) {
+  e.stopPropagation();
+  window.location.href = href;
+}
+
+function handleSubmit(e) {
+  e.preventDefault();
+  const oldpsw = document.getElementById("oldpsw").value;
+  const newpsw = document.getElementById("newpsw").value;
+  const values = {
+    oldpsw: oldpsw,
+    newpsw: newpsw,
+  };
+  console.log(values);
+}
+
+export default function ChangePW(props) {
+  const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
+  setTimeout(function () {
+    setCardAnimation("");
+  }, 700);
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        onClick={(e) => jumpTo(e, "/")}
+        absolute
+        color="transparent"
+        brand="Aeolus"
+        rightLinks={<HeaderLinks />}
+        {...rest}
+      />
+      <div
+        className={classes.pageHeader}
+        style={{
+          backgroundImage: "url(" + image + ")",
+          backgroundSize: "cover",
+          backgroundPosition: "top center",
+        }}
+      >
+        <div className={classes.container}>
+          <GridContainer justify="center">
+            <GridItem xs={12} sm={12} md={4}>
+              <Card className={classes[cardAnimaton]}>
+                <form
+                  className={classes.form}
+                  onSubmit={(e) => handleSubmit(e)}
+                >
+                  <CardHeader color="primary" className={classes.cardHeader}>
+                    <h4>Change Password</h4>
+                  </CardHeader>
+                  <CardBody>
+                    <CustomInput
+                      labelText="Old Password"
+                      id="oldpsw"
+                      formControlProps={{
+                        fullWidth: true,
+                        required: true,
+                      }}
+                      inputProps={{
+                        type: "password",
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <Icon className={classes.inputIconsColor}>
+                              lock_outline
+                            </Icon>
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                    <CustomInput
+                      labelText="New Password"
+                      id="newpsw"
+                      formControlProps={{
+                        fullWidth: true,
+                        required: true,
+                      }}
+                      inputProps={{
+                        type: "password",
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <Icon className={classes.inputIconsColor}>
+                              lock_outline
+                            </Icon>
+                          </InputAdornment>
+                        ),
+                        autoComplete: "off",
+                      }}
+                    />
+                  </CardBody>
+                  <CardFooter className={classes.cardFooter}>
+                    <Button color="primary" fullWidth type="submit">
+                      Change
+                    </Button>
+                  </CardFooter>
+                  <CardFooter
+                    className={classes.cardFooter}
+                    style={{ marginTop: "-15px" }}
+                  >
+                    <Button simple style={{ color: "grey" }} href="login-page">
+                      Go to Login
+                    </Button>
+                  </CardFooter>
+                </form>
+              </Card>
+            </GridItem>
+          </GridContainer>
+        </div>
+        <Footer whiteFont />
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/ForgetPW/ForgetPW.js b/src/views/ForgetPW/ForgetPW.js
@@ -0,0 +1,115 @@
+import React from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import People from "@material-ui/icons/People";
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Button from "components/CustomButtons/Button.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import CustomInput from "components/CustomInput/CustomInput.js";
+
+import styles from "assets/jss/material-kit-react/views/loginPage.js";
+
+import image from "assets/img/home-bg-art.jpg";
+
+const useStyles = makeStyles(styles);
+
+function jumpTo(e, href) {
+  e.stopPropagation();
+  window.location.href = href;
+}
+
+function handleSubmit(e) {
+  e.preventDefault();
+  const name = document.getElementById("name").value;
+  const values = {
+    username: name,
+  };
+  console.log(values);
+}
+
+export default function ForgetPW(props) {
+  const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
+  setTimeout(function () {
+    setCardAnimation("");
+  }, 700);
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        onClick={(e) => jumpTo(e, "/")}
+        absolute
+        color="transparent"
+        brand="Aeolus"
+        rightLinks={<HeaderLinks />}
+        {...rest}
+      />
+      <div
+        className={classes.pageHeader}
+        style={{
+          backgroundImage: "url(" + image + ")",
+          backgroundSize: "cover",
+          backgroundPosition: "top center",
+        }}
+      >
+        <div className={classes.container}>
+          <GridContainer justify="center">
+            <GridItem xs={12} sm={12} md={4}>
+              <Card className={classes[cardAnimaton]}>
+                <form
+                  className={classes.form}
+                  onSubmit={(e) => handleSubmit(e)}
+                >
+                  <CardHeader color="primary" className={classes.cardHeader}>
+                    <h4>Reset Password</h4>
+                  </CardHeader>
+                  <CardBody>
+                    <CustomInput
+                      labelText="Your name"
+                      id="name"
+                      formControlProps={{
+                        fullWidth: true,
+                        required: true,
+                      }}
+                      inputProps={{
+                        type: "text",
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <People className={classes.inputIconsColor} />
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                  </CardBody>
+                  <CardFooter className={classes.cardFooter}>
+                    <Button color="primary" fullWidth type="submit">
+                      Reset
+                    </Button>
+                  </CardFooter>
+                  <CardFooter
+                    className={classes.cardFooter}
+                    style={{ marginTop: "-15px" }}
+                  >
+                    <Button simple style={{ color: "grey" }} href="login-page">
+                      Go to Login
+                    </Button>
+                  </CardFooter>
+                </form>
+              </Card>
+            </GridItem>
+          </GridContainer>
+        </div>
+        <Footer whiteFont />
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/LoginPage/LoginPage.js b/src/views/LoginPage/LoginPage.js
@@ -34,7 +34,7 @@ function handleSubmit(e) {
   const name = document.getElementById("name").value;
   const password = document.getElementById("password").value;
   const values = {
-    name: name,
+    username: name,
     password: password,
   };
   console.log(values);
@@ -129,6 +129,13 @@ export default function LoginPage(props) {
                     >
                       Go to register
                     </Button>
+                    <Button
+                      simple
+                      style={{ color: "grey", marginLeft: "20px" }}
+                      href="forget-pw"
+                    >
+                      Forget password?
+                    </Button>
                   </CardFooter>
                 </form>
               </Card>