💄 UI: [前端]:登陆注册页页面完成

front/src/App.jsx

@@ -3,10 +3,12 @@ import { Route, Switch, Redirect } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import store from "./redux";
-import Login from "./pages/public/Login";
 import Main from "./pages/index";
 import NotFound from "./pages/public/notFound/NotFound";
 
+import Login from "./pages/public/Login";
+import RegisterOrReset from "./pages/public/RegisterOrReset";
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -23,6 +25,8 @@ class App extends Component {
           <Switch>
             <Route exact path="/" component={Main} />
             <Route exact path="/public/login" component={Login} />
+            <Route exact path="/public/register" component={RegisterOrReset} />
+            <Route exact path="/public/resetPassword" component={RegisterOrReset} />
             <Route exact path="/404" component={NotFound} />
             {/* 当前面的路由都匹配不到时就会重定向到/404 */}
             <Redirect path="/" to="/404" />

front/src/components/IconFont.jsx

@@ -1,7 +1,8 @@
 import { Icon } from "antd";
 
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: "//at.alicdn.com/t/font_1261825_8aroyishrdq.js"
+  scriptUrl: "//at.alicdn.com/t/font_1261825_09wguqxg78th.js"
+
 });
 
 export default IconFont;

front/src/layout/LoginLayout/index.jsx

@@ -31,7 +31,7 @@ export function LoginLayout({ type, children }) {
     <div className={"fullScreen " + styles.main}>
       <div className={styles.LOGO}>CR</div>
       <div className={styles.content}>
-        {type === RESET_PASSWORD_TYPE ? <div>重置密码</div> : <LoginOrRegister type={type} />}
+        {type === RESET_PASSWORD_TYPE ? <div style={{ fontSize: "0.3rem" }}>重置密码</div> : <LoginOrRegister type={type} />}
         {children}
         {type === RESET_PASSWORD_TYPE ? <Link to="/public/login">返回登录注册</Link> : null}
       </div>

front/src/pages/public/Login/index.jsx

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
+import { Link } from "react-router-dom";
 import queryString from "query-string";
-import { Button, Input, message } from "antd";
+import { Button, Input, message, Checkbox } from "antd";
 import IconFont from "../../../components/IconFont";
 import styles from "./index.module.less";
 import { connect } from "react-redux";
-import { changeLoginInfo, DATA_NAME } from "../../../redux/action/loginInfoAction";
+import { changeLoginInfo, DATA_NAME } from "../../../redux/action/LoginInfoAction.js";
 import axios from "../../../util/httpUtil";
 import { LoginLayout, LOGIN_TYPE } from "../../../layout/LoginLayout";
 
@@ -22,17 +23,15 @@ class Login extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      username: "",
+      email: "",
-      password: ""
+      password: "",
+      rememberMe: false
     };
     this.query = queryString.parse(window.location.search);
   }
 
-  usernameInput = e => {
+  valueChange = e => {
-    this.setState({ username: e.target.value });
+    this.setState({ [e.target.name]: e.target.value });
-  };
-  passwordInput = e => {
-    this.setState({ password: e.target.value });
   };
 
   submit = () => {
@@ -52,11 +51,21 @@ class Login extends Component {
   };
 
   render() {
+    const { email, password, rememberMe } = this.state;
     return (
       <LoginLayout type={LOGIN_TYPE}>
         <div className={styles.main}>
-          <Input type="text" placeholder="输入邮箱" />
+          <Input type="text" size="large" name="email" value={email} onChange={this.valueChange} addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />} placeholder="邮箱" />
-          <Input type="text" placeholder="验证码" addonAfter={<span className={styles.getCode}>获取验证码</span>} />
+          <Input type="text" size="large" name="password" value={password} onChange={this.valueChange} addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />} placeholder="密码" />
+          <div className={styles.action}>
+            <Checkbox value={rememberMe} name="rememberMe" onChange={this.valueChange}>
+              记住我
+            </Checkbox>
+            <Link to="/public/resetPassword">忘记密码</Link>
+          </div>
+          <Button type="primary" onClick={this.submit} block>
+            登录
+          </Button>
         </div>
       </LoginLayout>
     );

front/src/pages/public/Login/index.module.less

@@ -1,21 +1,18 @@
 .main {
   text-align: center;
-  padding: 2em;
+  padding: 0.2rem;
-  width: 30em;
+  width: 4rem;
   border-radius: 5px;
 
-  .getCode {
+  .action {
-    cursor: pointer;
+    padding: 0.1rem 0;
+    display: flex;
+    justify-content: space-between;
   }
 
   :global {
     .ant-input {
-      border-top: 0;
+      background: #f7f7f7;
-      border-left: 0;
-      border-right: 0;
-      border-bottom: 1px solid black !important;
-      border-radius: 0;
-      margin-bottom: 1em;
     }
   }
 }

front/src/pages/public/RegisterOrReset/index.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import IconFont from "../../../components/IconFont";
+import { Button, Input, Checkbox } from "antd";
+import { LoginLayout, REGISTER_TYPE, RESET_PASSWORD_TYPE } from "../../../layout/LoginLayout";
+import styles from "./index.module.less";
+import { Link } from "react-router-dom";
+import axios from "../../../util/httpUtil";
+
+export default class Register extends React.Component {
+  constructor(props) {
+    super(props);
+    let type = props.location.pathname.split("/").reverse()[0];
+    this.state = {
+      current: type === "register" ? REGISTER_TYPE : RESET_PASSWORD_TYPE,
+      email: "",
+      password: "",
+      repassword: "",
+      code: ""
+    };
+  }
+
+  /**
+   * 获取验证码
+   */
+  getCode = () => {};
+
+  changeData = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  submit = () => {};
+
+  render() {
+    const { current, email, password, repassword, code } = this.state;
+    return (
+      <LoginLayout type={current}>
+        <div className={styles.main}>
+          <Input type="text" size="large" name="email" value={email} onChange={this.changeData} addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />} placeholder="邮箱" />
+          <Input type="password" size="large" name="password" value={password} onChange={this.changeData} addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />} placeholder="密码" />
+          <Input type="password" size="large" name="repassword" value={repassword} onChange={this.changeData} addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />} placeholder="重复密码" />
+          <Input
+            type="text"
+            size="large"
+            name="code"
+            value={code}
+            onChange={this.changeData}
+            addonBefore={<IconFont type="icon-yanzhengma54" style={{ fontSize: "0.3rem" }} />}
+            addonAfter={
+              <span style={{ cursor: "pointer" }} onClick={this.getCode}>
+                获取验证码
+              </span>
+            }
+            placeholder="验证码"
+          />
+          <Button type="primary" className={styles.submit} onClick={this.submit} block>
+            {current === REGISTER_TYPE ? "注册" : "重置密码"}
+          </Button>
+        </div>
+      </LoginLayout>
+    );
+  }
+}

front/src/pages/public/RegisterOrReset/index.module.less

@@ -0,0 +1,22 @@
+.main {
+  text-align: center;
+  padding: 0.2rem;
+  width: 4rem;
+  border-radius: 5px;
+
+  .action {
+    padding: 0.1rem 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .submit {
+    margin-top: 0.1rem;
+  }
+
+  :global {
+    .ant-input {
+      background: #f7f7f7;
+    }
+  }
+}

front/src/redux/reducer/index.js

@@ -1,11 +1,10 @@
 import { combineReducers } from "redux";
-import { DATA_NAME } from "../action/loginInfoAction";
+import { DATA_NAME } from "../action/LoginInfoAction.js";
 import loginInfo from "./loginInfo";
 
 const data = {};
 data[DATA_NAME] = loginInfo;
 
-
 const reducer = combineReducers(data);
 
 export default reducer;

front/src/redux/reducer/loginInfo.js

@@ -1,4 +1,4 @@
-import * as loginAction from "../action/loginInfoAction";
+import * as loginAction from "../action/LoginInfoAction.js";
 
 function getInitData() {
   let token, userInfo;