首页 发现 帮助
登录
Entony
/
F_A_8_Test_app
关注 3
点赞 1
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

form

Maxim 6 年之前
父节点
15debe5ea7
当前提交
c0d334655b
共有 17 个文件被更改，包括 168 次插入 和 28 次删除
分列视图 显示文件统计
  1. 31 0
      package-lock.json
  2. 1 0
      package.json
  3. 2 0
      public/index.html
  4. 5 0
      src/components/auth/signInPage/form/formInput/index.js
  5. 33 0
      src/components/auth/signInPage/form/index.js
  6. 3 0
      src/components/auth/signInPage/form/validate/index.js
  7. 9 0
      src/components/auth/signInPage/index.js
  8. 0 0
      src/components/auth/signUpPage/index.js
  9. 7 0
      src/constants/routes.js
  10. 4 2
      src/containers/header/index.js
  11. 0 14
      src/index.css
  12. 4 2
      src/reducers/index.js
  13. 3 2
      src/router.js
  14. 0 6
      src/state/index.js
  15. 22 2
      src/styles/base/_base.scss
  16. 41 0
      src/styles/components/_signInPage.scss
  17. 3 0
      src/styles/index.scss

+ 31 - 0
package-lock.json
查看文件 

@@ -4269,6 +4269,11 @@
 
         "is-symbol": "1.0.2"
 
       }
 
     },
 
+    "es6-error": {
 
+      "version": "4.1.1",
 
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
 
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
 
+    },
 
     "escape-html": {
 
       "version": "1.0.3",
 
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 
@@ -8992,6 +8997,11 @@
 
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
 
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
 
     },
 
+    "lodash-es": {
 
+      "version": "4.17.11",
 
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
 
+      "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
 
+    },
 
     "lodash._reinterpolate": {
 
       "version": "3.0.0",
 
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
 
@@ -12433,6 +12443,11 @@
 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz",
 
       "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA=="
 
     },
 
+    "react-lifecycles-compat": {
 
+      "version": "3.0.4",
 
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
 
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
 
+    },
 
     "react-redux": {
 
       "version": "6.0.0",
 
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.0.tgz",
 
@@ -12917,6 +12932,22 @@
 
         "symbol-observable": "1.2.0"
 
       }
 
     },
 
+    "redux-form": {
 
+      "version": "8.0.4",
 
+      "resolved": "https://registry.npmjs.org/redux-form/-/redux-form-8.0.4.tgz",
 
+      "integrity": "sha512-Qdkv+c3DKSMPRi5PdmJEiIMb3RaENLCa9s5D5ZPHu013318Y8giwVmVh2ELPtdyASHeF3fAcTlzvcDua+rjjGw==",
 
+      "requires": {
 
+        "es6-error": "4.1.1",
 
+        "hoist-non-react-statics": "3.2.1",
 
+        "invariant": "2.2.4",
 
+        "is-promise": "2.1.0",
 
+        "lodash": "4.17.11",
 
+        "lodash-es": "4.17.11",
 
+        "prop-types": "15.6.2",
 
+        "react-is": "16.6.3",
 
+        "react-lifecycles-compat": "3.0.4"
 
+      }
 
+    },
 
     "redux-logger": {
 
       "version": "3.0.6",
 
       "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",

+ 1 - 0
package.json
查看文件 

@@ -13,6 +13,7 @@
 
     "react-router-dom": "^4.3.1",
 
     "react-scripts": "2.1.1",
 
     "redux": "^4.0.1",
 
+    "redux-form": "^8.0.4",
 
     "redux-logger": "^3.0.6",
 
     "redux-saga": "^0.16.2"
 
   },

+ 2 - 0
public/index.html
查看文件 

@@ -6,6 +6,8 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <meta name="theme-color" content="#000000">
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 
+    <!-- Fonts -->
 
+    <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant|Open+Sans+Condensed:300|Poiret+One" rel="stylesheet">
 
     <title>React App</title>
 
   </head>
 
   <body>

+ 5 - 0
src/components/auth/signInPage/form/formInput/index.js
查看文件 

@@ -0,0 +1,5 @@
 
+import React from 'react';
 
+
 
+export default ({ input, meta: {error}, type }) => (
 
+    <input className={`sign-in-form__input sign-in-form__input--${type === 'text' ? 'login' : 'password'}`} placeholder={type === 'text' ? 'Login' : 'Password'} type={type} {...input}/>
 
+)

+ 33 - 0
src/components/auth/signInPage/form/index.js
查看文件 

@@ -0,0 +1,33 @@
 
+import React from 'react';
 
+import { Field, reduxForm } from 'redux-form'
 
+import validate from './validate'
 
+import formInput from './formInput'
 
+import { Link } from 'react-router-dom'
 
+import * as routes from './../../../../constants/routes'
 
+
 
+
 
+class Form extends React.Component {
 
+
 
+    handleSubmit = (event) => {
 
+        alert("lol");
 
+    }
 
+
 
+    render() {
 
+        return (
 
+            <form className="sign-in-form" onSubmit={this.handleSubmit} method="POST">
 
+                <h2 className="sign-in-form__header">Sign In</h2>
 
+                <Field name="login" component={formInput} type="text"/>
 
+                <Field name="password" component={formInput} type="password" />
 
+                <button className="sign-in-form__submit-button">Sign In</button>
 
+                <p className="sign-in-form__link--forgot-password"><Link to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
 
+                <hr className="sign-in-form__divider"/>
 
+                <p className="sign-in-form__link--sign-up">Still ain't got an account? <Link to={routes.SIGN_UP}>Sign up</Link> first!</p>
 
+            </form>    
+        )
 
+    }
 
+}
 
+
 
+export default reduxForm({
 
+    form: "signIn",
 
+    validate 
+})(Form)

+ 3 - 0
src/components/auth/signInPage/form/validate/index.js
查看文件 

@@ -0,0 +1,3 @@
 
+export default function validate(values) {
 
+    
+}

+ 9 - 0
src/components/auth/signInPage/index.js
查看文件 

@@ -0,0 +1,9 @@
 
+import React from 'react';
 
+import Form from './form'
 
+
 
+
 
+export default props => (
 
+    <div className="sign-in">
 
+        <Form />
 
+    </div>
 
+)

+ 0 - 0
src/components/auth/signUpPage/index.js
查看文件


+ 7 - 0
src/constants/routes.js
查看文件 

@@ -0,0 +1,7 @@
 
+export const LANDING = '/';
 
+export const SIGN_UP = '/sign-up';
 
+export const SIGN_IN = '/sign-in';
 
+export const HOME = '/home';
 
+export const ACCOUNT = '/account';
 
+export const ADMIN = '/admin';
 
+export const PASSWORD_FORGET = '/pw-forget';

文件差异内容过多而无法显示
+ 4 - 2
src/containers/header/index.js


+ 0 - 14
src/index.css
查看文件 

@@ -1,14 +0,0 @@
 
-body {
 
-  margin: 0;
 
-  padding: 0;
 
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 
-    sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-}
 
-
 
-code {
 
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 
-    monospace;
 
-}

+ 4 - 2
src/reducers/index.js
查看文件 

@@ -1,13 +1,15 @@
 
 // Сюда добавляем редьюсеров для combineReducers и импортируем их в state,
 
 // для создания store 
-
 
 import { combineReducers } from 'redux';
 
 import signIn from './auth/signIn';
 
 import signUp from './auth/signUp';
 
 
+import { reducer as form } from 'redux-form'
 
+
 
 const combinedReducers = combineReducers({
 
     signIn,
 
-    signUp
 
+    signUp,
 
+    form
 
 })
 
 
 export default combinedReducers;

+ 3 - 2
src/router.js
查看文件 

@@ -2,13 +2,14 @@ import React from "react";
 
 import { Switch, Route } from "react-router-dom";
 
 import AuthPage from './containers/AuthPage'
 
 import Header from "./containers/header"
 
-
 
+import * as routes from './constants/routes'
 
+import signInPage from './components/auth/signInPage'
 
 
 export default () => (
 
 	<div className="container">
 
 		<Header />
 
 		<Switch>
 
-            <Route path="/" exact component={AuthPage} />
 
+			<Route path={routes.SIGN_IN} exact component={signInPage} />
 
 		</Switch>
 
 	</div>
 
 );

+ 0 - 6
src/state/index.js
查看文件 

@@ -16,12 +16,6 @@ const store = createStore(
 
     applyMiddleware(sagaMiddleware, logger)
 
 );
 
 
-// action
 
-auth.onAuthStateChanged(user => user
 
-    ? store.dispatch(userIsSignedIn(user)) 
-    : store.dispatch(userIsNotSignedIn())
 
-);
 
-
 
 export default store;
 
 
 sagaMiddleware.run(saga);

+ 22 - 2
src/styles/base/_base.scss
查看文件 

@@ -1,6 +1,26 @@
 
+body {
 
+    margin: 0;
 
+}
 
+
 
 a:hover {
 
 	text-decoration: none;
 
 }
 
-a{
 
+a {
 
     text-decoration: none;
 
-}
 
+}
 
+
 
+body {
 
+    margin: 0;
 
+    padding: 0;
 
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 
+      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 
+      sans-serif;
 
+    -webkit-font-smoothing: antialiased;
 
+    -moz-osx-font-smoothing: grayscale;
 
+}
 
+  
+code {
 
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 
+    monospace;
 
+}
 
+

+ 41 - 0
src/styles/components/_signInPage.scss
查看文件 

@@ -0,0 +1,41 @@
 
+.sign-in {
 
+    height: 83.5vh;
 
+    &-form {
 
+        font-size: 18px;
 
+        // font-family: 'Open Sans Condensed', sans-serif;
 
+        font-family: 'Poiret One', cursive;
 
+        position: relative;
 
+        left: 50%;
 
+        top: 50%;
 
+        transform: translate(-50%, -50%);
 
+        border: 3px solid lightgrey;
 
+        outline: 1px solid grey;
 
+        padding: 25px;
 
+        width: 45vw;
 
+        text-align: center;
 
+        &__input,
 
+        &__submit-button {
 
+            width: 80%;
 
+        }
 
+        &__header {
 
+            margin: 0 0 35px 0;
 
+        }
 
+        &__input {
 
+            display: block;
 
+            text-align: center;
 
+            margin: 25px auto;
 
+            border: 1px solid lightgray;
 
+            padding: 15px;
 
+            &--login {}
 
+            &--password {}
 
+        }
 
+        &__submit-button {
 
+            padding: 5px;
 
+            text-transform: uppercase;
 
+        }
 
+        &__link {}
 
+        &__divider {
 
+            width: 60%;
 
+        }
 
+    }
 
+}

+ 3 - 0
src/styles/index.scss
查看文件 

@@ -1,3 +1,6 @@
 
 @import "abstracts/variables";
 
+
 
 @import "components/header";
 
+@import "components/signInPage";
 
+
 
 @import "base/base";