Browse Source

hw18 login form added

miskson 2 years ago
parent
commit
2bacaa66a6
2 changed files with 27 additions and 1 deletions
  1. 21 0
      hw18-react-store/src/App.js
  2. 6 1
      hw18-react-store/src/App.scss

+ 21 - 0
hw18-react-store/src/App.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import logo from './logo.svg';
 import './App.scss';
 import thunk from 'redux-thunk';
@@ -294,11 +295,31 @@ const CCart = connect(state => ({cart:state.cart}))(Cart)
 //const CCart = connect(забрать из редакса корзину положить в пропс cart, 
                        //дать компоненту onCartChange и onCartRemove с соответствующими actionCreator)(Cart)
 
+
+const LoginForm = ({onLogin}) => {
+    let [pass, setPass] = useState()
+    let [login, setLogin] = useState()
+    return (
+        <div className='form'>
+            <h3>Login Form</h3>
+            <input placeholder='login' style={{outlineColor: login? 'black' : 'firebrick'}} onChange={(e) => setLogin(e.target.value)}/>
+            <br/>
+            <input placeholder='password' type="password" style={{outlineColor: pass? 'black' : 'firebrick'}} onChange={(e) => setPass(e.target.value)}/>
+            <br/>
+            <button disabled={!pass || !login} onClick={() => onLogin(login, pass)}>Login</button>            
+        </div>
+    )
+}
+
+const CLoginForm = connect(null, {onLogin: actionFullLogin})(LoginForm)
+
 const Main = () =>
     <main>
         <Aside />
         <Content>
             <CCategory />
+            {/* <LoginForm onLogin={(l, p) => actionFullLogin(l, p)}/> */}
+            <CLoginForm />
             <CCart />
         </Content>
     </main>

+ 6 - 1
hw18-react-store/src/App.scss

@@ -113,4 +113,9 @@ li {
   padding: 0px 10px;
 }
 
-
+.form {
+  background-color: whitesmoke;
+  text-align: center;
+  border: 5px solid rgb(47, 121, 170);
+  padding: 5px;
+}