Update authorization forms

src/components/HeaderButtons.jsx

@@ -53,34 +53,15 @@ export const AddPost = ({ children }) => {
 export const LogOut = ({onClick}) => 
   <ImportOutlined className="Links" onClick={onClick} />
 
-// export const Feed = () => {
-//   return (
-//     <>
-//       <Link to={`/feed`}  onClick={()=>console.log('щас фид')}>
-//         <a className="button"> Feed </a>
-//       </Link>
-//     </>
-//   )
-// }
-
-// export const Explore = () => (
-//   <Link to={`/explore`}>
-//     <a size="large" className="button">
-//       {' '}
-//       Explore{' '}
-//     </a>
-//   </Link>
-// )
 
-const User = ({ my_Id, aboutMe: { _id, login, avatar } = {}, onMyPage }) => {
-  // console.log('_id in user', _id)
+const User = ({ my_Id, aboutMe: { _id, avatar } = {}, onMyPage }) => {
   
   useEffect(() => {
     if (my_Id)
       onMyPage(my_Id)
   }, [my_Id])
   return (
-    <Link to={`/profile/${_id}`} onClick={()=>console.log('щас юзер')}>
+    <Link to={`/profile/${_id}`}>
       {avatar?.url ? (
         <Avatar src={'/' + avatar?.url} size={50} className="Avatar" />
       ) : (

src/components/LoginRegisterLogout.jsx

@@ -1,193 +0,0 @@
-import { actionFullRegister, actionClearPromise } from '../actions'
-import React, { useState } from 'react'
-import { connect } from 'react-redux'
-import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
-import { Link } from 'react-router-dom'
-import { actionClearUserData } from '../redux/saga'
-import { message } from 'antd'
-import { useEffect } from 'react'
-import { LogOut } from './HeaderButtons'
-import { ImportOutlined } from '@ant-design/icons'
-import {
-  actionClearDataLogoutTypeSaga,
-  actionLoginTypeSaga,
-  actionRegisterTypeSaga,
-} from '../redux/saga'
-import logo from '../materials/logo3.png'
-
-const LoginForm = ({ onLogin, children, auth, register, onClearPromise }) => {
-  const [login, setLogin] = useState('')
-  const [password, setPassword] = useState('')
-  const [checked, setChecked] = useState(false)
-  useEffect(() => {
-    if (auth?.status === 'FULFILLED' && auth?.payload === null) {
-      message.error({
-        content: 'You entered wrong login or password',
-        style: {
-          marginTop: '80px',
-        },
-      })
-    }
-  }, [auth])
-
-  useEffect(() => {
-    if (register?.status === 'FULFILLED' && register?.payload === null) {
-      message.error({
-        content: 'This login is already in the database',
-        style: {
-          marginTop: '80px',
-        },
-      })
-    }
-  }, [register])
-  const input = () => {
-    onLogin(login, password) && setPassword('') && setLogin('')
-    // &&
-    // onClearPromise('auth')
-  }
-  return (
-    <>
-      <Form
-        className="Form"
-        size="medium"
-        name="basic"
-        style={{
-
-          margin: '0 auto',
-          margin: '50px',
-          padding: '20px',
-          textAlign: 'center',
-        }}
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 13 }}
-        autoComplete="off"
-      >
-        <h2 style={{}}> {children} </h2>
-        <h4> Login and password must be at least 5 characters </h4>
-        <Form.Item
-          label="Login"
-          name="login"
-          size="medium"
-          rules={[
-            {
-              required: true,
-              message: 'Please input login!',
-            },
-          ]}
-        >
-          <Input
-            value={login}
-            size="medium"
-            onChange={(e) => setLogin(e.target.value)}
-          />
-        </Form.Item>
-
-        <Form.Item
-          label="Password"
-          name="password"
-          size="medium"
-          rules={[
-            {
-              required: true,
-              message: 'Please input your password!',
-            },
-          ]}
-        >
-          <Input
-            size="medium"
-            type={checked ? 'text' : 'password'}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </Form.Item>
-
-        <Form.Item
-          name="checked"
-          valuePropName="checked"
-          wrapperCol={{ offset: 5, span: 10 }}
-        >
-          <Checkbox
-            checked={checked}
-            onChange={(e) => {
-              setChecked(e.target.checked)
-            }}
-            size="large"
-          >
-            See the password
-          </Checkbox>
-        </Form.Item>
-
-        <Form.Item wrapperCol={{ offset: 6, span: 13 }}>
-          <Button
-            size="medium"
-            type="primary"
-            htmlType="submit"
-            primary
-            style={{ width: '100%' }}
-            className="Btn"
-            disabled={login.length < 5 || password.length < 5}
-            onClick={input}
-          >
-            {children}
-          </Button>
-        </Form.Item>
-      </Form>
-    </>
-  )
-}
-export const CLogout = connect(null, {
-  onClick: actionClearDataLogoutTypeSaga,
-})(LogOut)
-
-export const InputForm = ({onLogin,auth,register, children}) => {
-  return (
-    // <div style={{display:'flex',flexDirection:'row'}}>
-    <div className="InputForm">
-      <Row>
-        <Col span={12}>
-          <img className="LoginPage" src={logo} />
-        </Col>
-
-        <Col span={12}>
-          <div className="LoginForm">
-            <LoginForm onLogin={onLogin} auth={auth} children={children} />
-            {children === "Register" ?
-                <h2>
-               Have an account?
-                <Link to="/login"
-                style={{ color: 'white', marginLeft: '5px' }}>Login</Link>
-              </h2>
-              :
-              <h2>
-                Don't have an account yet?
-                <Link to="/register" style={{ color: 'white', marginLeft: '5px' }}>Register</Link>
-              </h2>
-            }
-          </div>
-        </Col>
-      </Row>
-    </div>
-
-  )
-}
-// export const CInputForm = connect()(InputForm)
-export const CLoginForm = connect(
-  (state) => ({
-    children: `Sign In`,
-    auth: state.promise?.auth,
-  }),
-  {
-    onLogin: actionLoginTypeSaga,
-    // onClearPromise: actionClearPromise,
-  },
-)(InputForm)
-export const CRegisterForm = connect(
-  (state) => ({
-    children: `Register`,
-    register: state.promise?.register,
-  }),
-  {
-    onLogin: actionRegisterTypeSaga,
-    onClearPromise: actionClearPromise,
-  },
-)(InputForm)

src/components/Routing.jsx

@@ -1,4 +1,4 @@
-import { InputForm, CRegisterForm, CLoginForm } from './LoginRegisterLogout'
+// import { InputForm, CRegisterForm, CLoginForm } from './LoginRegisterLogout'
 import { Router, Route, Redirect, Switch } from 'react-router-dom'
 import { CExplorePosts } from '../pages/explorePosts'
 import { CPostForFeed, Feed } from '../pages/feedPosts'
@@ -6,6 +6,8 @@ import { CPostEditor,CPostCreator } from '../pages/createAndEditPost'
 import { CPageAboutUser } from '../pages/profilePage'
 import { CPost } from '../pages/onePost'
 import { Provider, connect } from 'react-redux'
+import { LoginPageForm } from '../pages/login'
+import { RegisterPageForm } from '../pages/login'
 
 const Routing = ({ token }) => {
 
@@ -22,15 +24,15 @@ const Routing = ({ token }) => {
         </Switch>
         :
         <Switch>
-          <Route path="/login" exact component={CLoginForm} />
-          <Route path="/register" component={CRegisterForm} />
+          <Route path="/login" exact component={LoginPageForm} />
+          <Route path="/register" component={RegisterPageForm} />
           {/* <Route path="/input" component={InputForm} /> */}
           <Redirect from="/*" to="/login" />
           <CProtectedRoute
             roles={['anon']}
             fallback="/*"
-            path="/input"
-            component={InputForm}
+            path="/login"
+            component={LoginPageForm}
           />
         </Switch>
       }

src/components/authorization/InitialForm.jsx

@@ -0,0 +1,140 @@
+import React, { useState } from 'react'
+import { connect } from 'react-redux'
+import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
+import { Link } from 'react-router-dom'
+import { message } from 'antd'
+import { useEffect } from 'react'
+import { ImportOutlined } from '@ant-design/icons'
+import { Typography } from 'antd'
+
+const { Text } = Typography
+const InitialForm = ({ onLogin, children }) => {
+  const [login, setLogin] = useState('')
+  const [password, setPassword] = useState('')
+  const [checked, setChecked] = useState(false)
+  const input = () => {
+    onLogin(login, password) && setPassword('') && setLogin('')
+  }
+  return (
+    <>
+      <Form
+        className="Form"
+        size="medium"
+        name="basic"
+        style={{
+          margin: '0 auto',
+          margin: '50px',
+          padding: '20px',
+          // textAlign: 'center',
+        }}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 13 }}
+        autoComplete="off"
+      >
+        <h2 style={{}}> {children} </h2>
+
+        <Form.Item
+          label="Login"
+          name="login"
+          size="medium"
+          rules={[
+            {
+              required: true,
+              message: 'Please input login!',
+            },
+          ]}
+          style={{
+            margin: '0 auto',
+
+            // textAlign: 'center',
+          }}
+              >
+            
+          <Input
+            value={login}
+            size="medium"
+            onChange={(e) => setLogin(e.target.value)}
+          />
+              </Form.Item>
+              <div style={{textAlign:'left', marginLeft:'30px', margin:'10px' }}>
+              
+        <Text type="secondary" style={{color:'rgb(35, 60, 107)'}} >
+          {' '}
+          Login must be at least 5 characters{' '}
+        </Text>
+</div>
+        <Form.Item
+          label="Password"
+          name="password"
+          size="medium"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password!',
+            },
+          ]}
+          style={{
+            margin: '0 auto',
+
+            // textAlign: 'center',
+          }}
+        >
+          <Input
+            size="medium"
+            type={checked ? 'text' : 'password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+              </Form.Item>
+              <div style={{textAlign:'left', marginLeft:'30px',margin:'10px' }}>
+        <Text type="secondary"  style={{color:'rgb(35, 60, 107)'}}>
+          Password must contain at least eight characters, include letters,
+          numbers and special symbols{' '}
+        </Text>
+</div>
+        <Form.Item
+          name="checked"
+          valuePropName="checked"
+          wrapperCol={{ offset: 5, span: 10 }}
+        >
+          <Checkbox
+            checked={checked}
+            onChange={(e) => {
+              setChecked(e.target.checked)
+            }}
+            size="large"
+          >
+            See the password
+          </Checkbox>
+        </Form.Item>
+
+        <Form.Item wrapperCol={{ offset: 6, span: 13 }}>
+          <Button
+            size="medium"
+            type="primary"
+            htmlType="submit"
+            primary
+            style={{ width: '100%' }}
+            className="Btn"
+            disabled={
+              login.length < 5 ||
+              !/(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
+                password,
+              )
+            }
+            onClick={input}
+          >
+            {children}
+          </Button>
+        </Form.Item>
+        {/* <div style={{textAlign:'left'}}>
+                Rules:
+                <h4> Login must be at least 5 characters </h4>
+
+          <h4>Password must contain at least eight characters, include letters, numbers and special symbols </h4>
+             </div>    */}
+      </Form>
+    </>
+  )
+}
+export default InitialForm

src/components/authorization/LogOut.jsx

@@ -0,0 +1,9 @@
+import {
+    actionClearDataLogoutTypeSaga,
+} from '../../redux/saga'
+import { LogOut } from '../HeaderButtons'
+import { connect } from 'react-redux'
+
+export const CLogout = connect(null, {
+    onClick: actionClearDataLogoutTypeSaga,
+  })(LogOut)

src/components/authorization/LoginForm.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { connect } from 'react-redux'
+import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
+import { Link } from 'react-router-dom'
+import { message } from 'antd'
+import { useEffect } from 'react'
+import { ImportOutlined } from '@ant-design/icons'
+import {
+  actionClearDataLogoutTypeSaga,
+  actionLoginTypeSaga,
+  actionRegisterTypeSaga,
+} from '../../redux/saga'
+import InitialForm from './InitialForm'
+
+const LoginForm = ({ onLogin, children, auth }) => {
+ 
+  useEffect(() => {
+    if (auth?.status === 'FULFILLED' && auth?.payload === null) {
+      message.error({
+        content: 'You entered wrong login or password',
+        style: {
+          marginTop: '80px',
+        },
+      })
+
+    }
+  }, [auth])
+
+ 
+  return (
+    <InitialForm onLogin={onLogin}>
+      {"Sign In"}
+    </InitialForm>
+  )
+}
+export const CLoginForm = connect(
+    (state) => ({
+      children: `Sign In`,
+      auth: state.promise?.auth,
+    }),
+    {
+      onLogin: actionLoginTypeSaga,
+  
+    },
+  )(LoginForm)

src/components/authorization/RegisterForm.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { connect } from 'react-redux'
+import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
+import { Link } from 'react-router-dom'
+import { message } from 'antd'
+import { useEffect } from 'react'
+import { ImportOutlined } from '@ant-design/icons'
+import {
+  actionRegisterTypeSaga,
+} from '../../redux/saga'
+import InitialForm from './InitialForm'
+
+const RegisterForm = ({ onLogin, children, register }) => {
+ 
+    useEffect(() => {
+        if (register?.status === 'FULFILLED' && register?.payload === null) {
+          message.error({
+            content: 'This login is already in the database',
+            style: {
+              marginTop: '80px',
+            },
+          })
+        }
+      }, [register])
+
+ 
+  return (
+    <InitialForm onLogin={onLogin}>
+      {"Register"}
+    </InitialForm>
+  )
+}
+export const CRegisterForm = connect(
+    (state) => ({
+      children: `Register`,
+      register: state.promise?.register,
+    }),
+    {
+      onLogin: actionRegisterTypeSaga,
+    },
+  )(RegisterForm)

src/pages/header/index.js

@@ -1,5 +1,5 @@
 
-import { CLogout } from '../../components/LoginRegisterLogout'
+import { CLogout } from '../../components/authorization/LogOut'
 import { CSearch } from '../../components/Search_Users'
 import { Feed, AddPost, Explore, CUser } from '../../components/HeaderButtons'
 import { connect } from 'react-redux'

src/pages/login/index.js

@@ -0,0 +1,85 @@
+import { CRegisterForm } from "../../components/authorization/RegisterForm"
+import { CLoginForm } from "../../components/authorization/LoginForm"
+import  logo from '../../materials/logo3.png'
+import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+export const InputForm = ({onLogin, children}) => {
+    return (
+      // <div style={{display:'flex',flexDirection:'row'}}>
+      <div className="InputForm">
+        <Row>
+          <Col span={12}>
+            <img className="LoginPage" src={logo} />
+          </Col>
+  
+          <Col span={12}>
+            <div className="LoginForm">
+              {/* <LoginForm onLogin={onLogin} children={children} /> */}
+              {children === "Register" ?
+                  <h2>
+                 Have an account?
+                  <Link to="/login"
+                  style={{ color: 'white', marginLeft: '5px' }}>Login</Link>
+                </h2>
+                :
+                <h2>
+                  Don't have an account yet?
+                  <Link to="/register" style={{ color: 'white', marginLeft: '5px' }}>Register</Link>
+                </h2>
+              }
+            </div>
+          </Col>
+        </Row>
+      </div>
+  
+    )
+}
+
+export const LoginPageForm = () => 
+
+        // <div style={{display:'flex',flexDirection:'row'}}>
+        <div className="InputForm">
+          <Row>
+            <Col span={12}>
+              <img className="LoginPage" src={logo} />
+            </Col>
+    
+            <Col span={12}>
+              <div className="LoginForm">
+                        <CLoginForm />
+     
+                        <h2>
+                    Don't have an account yet?
+                    <Link to="/register" style={{ color: 'white', marginLeft: '5px' }}>Register</Link>
+                  </h2>
+            
+              </div>
+            </Col>
+          </Row>
+    </div>
+        
+
+export const RegisterPageForm = () => 
+
+        // <div style={{display:'flex',flexDirection:'row'}}>
+        <div className="InputForm">
+          <Row>
+            <Col span={12}>
+              <img className="LoginPage" src={logo} />
+            </Col>
+    
+            <Col span={12}>
+              <div className="LoginForm">
+                        <CRegisterForm />
+                        <h2>
+                   Have an account?
+                    <Link to="/login"
+                    style={{ color: 'white', marginLeft: '5px' }}>Login</Link>
+                  </h2>
+               
+          </div>
+            </Col>
+          </Row>
+        </div>