Merge pull request #12 from infoshareacademy/FZ12OK-51-Login

Fz12 ok 51 login

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^7.8.1",
     "@material-ui/core": "^4.7.2",
     "@material-ui/icons": "^4.5.1",
     "react": "^16.12.0",

public/index.html

@@ -14,6 +14,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -44,5 +46,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>

src/App.js

@@ -7,7 +7,8 @@ import MainList from './main-list/Main-list';
 import Dashboard from './dashboard/Dashboard';
 import ItemDetails from './item-details/Item-details';
 import UserList from './user-list/User-list';
-import {AuthContext}   from './auth/Auth';
+import { AuthContext }   from './auth/Auth';
+import UserProfile from './user-profile/User-profile';
 import { ItemForm } from './item-form/Item-form';
 
 
@@ -27,6 +28,10 @@ function App() {
             path="/item-form"
             component={ItemForm}
           />
+          <Route
+              path='/userProfile'
+              component={UserProfile}
+            />
           <Route
             path="/dashboard"
             component={Dashboard}
@@ -43,7 +48,7 @@ function App() {
           <Redirect to="/" />
         </Switch>
         </Container>
-    </BrowserRouter>
+      </BrowserRouter>
     </AuthContext>
   );
 }

src/auth/Auth.js

@@ -1,17 +1,40 @@
 import React from 'react'
+import firebase from "firebase";
+import { Login } from './LogIn';
 export const MyContext = React.createContext(null);
 
 
 export class AuthContext extends React.Component {
     state = {
+        user: null,
         userList: [],
     }
 
+    componentDidMount() {
+        const authRef = firebase.auth().onAuthStateChanged(user => {
+            this.setState({
+                user
+            })
+        })
+
+        this.setState({
+            ref: authRef
+        })
+    }
+
+    componentWillUnmount() {
+        if (this.state.ref) {
+            this.state.ref();
+        }
+    }
+
     addToList = (e) => {
+
         this.setState({
             userList: [...this.state.userList, e]
-
-        })
+        }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
+            list: [...this.state.userList]
+        }))
 
     }
 
@@ -24,36 +47,22 @@ export class AuthContext extends React.Component {
         this.setState({
             userList: userlist
 
-        })
-    }
-
-    componentDidMount() {
-        this.userData = JSON.parse(localStorage.getItem('userList'));
-
-        if (localStorage.getItem('userList')) {
-            this.setState({
-                userList: this.userData,
-            })
-        } else {
-            this.setState ({
-                userList: []
-            })
-        }
-    }
-
-    componentWillUpdate(nextProps, nextState) {
-        localStorage.setItem('userList', JSON.stringify(nextState.userList));
+        }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
+            list: [...this.state.userList]
+        }))
     }
-
     render() {
-        return (
-            <MyContext.Provider value={{
+        return this.state.user
+            ? <MyContext.Provider value={{
                 state: this.state,
                 addToList: this.addToList,
                 removeFromList: this.removeFromList,
             }}>
                 {this.props.children}
             </MyContext.Provider>
-        )
+            : <>
+                <Login />
+
+            </>
     }
 }

src/auth/LogIn.js

@@ -0,0 +1,214 @@
+
+import React from 'react';
+import { Button, Divider, Grid, Segment, Form, Message } from 'semantic-ui-react'
+import firebase from "firebase";
+
+export function Login() {
+    return <Segment >
+        <Grid columns={2} relaxed='very' stackable>
+            <Grid.Column verticalAlign='middle'>
+                <SignIn />
+            </Grid.Column>
+            <Grid.Column verticalAlign='middle'>
+                <SignUp />
+            </Grid.Column>
+        </Grid>
+        <Divider vertical>Lub</Divider>
+    </Segment>
+}
+
+
+
+export class SignIn extends React.Component {
+    state = {
+        email: '',
+        password: '',
+        error: null
+    };
+
+    handleOnChange = ({ target: { name, value } }) => {
+        this.setState({
+            [name]: value
+        })
+    };
+
+    handleOnClick = (event) => {
+        event.preventDefault();
+        this.signIn();
+    };
+
+
+    signIn = () => {
+        const { email, password } = this.state;
+        firebase.auth().signInWithEmailAndPassword(email, password)
+            .catch(error => {
+                const errorCode = error.code;
+                if (errorCode == 'auth/user-disabled') {
+                    this.setState({ error: 'Twoje konto zostało zablokowane.' });
+                }
+                else if (errorCode == 'auth/invalid-email') {
+                    this.setState({ error: 'Nieprawidłowy adres e-mail.' });
+                }
+                else if (errorCode == 'auth/user-not-found') {
+                    this.setState({ error: 'Dla tego adresu e-mail konto nie istnieje.' });
+                }
+                else if (errorCode == 'auth/wrong-password') {
+                    this.setState({ error: 'Błędne hasło.' });
+                }
+                else {
+                    this.setState({ error: 'nieznany błąd' });
+                }
+            });
+    };
+
+    render() {
+        const { email, password, error } = this.state;
+
+        return (<Form>
+            <Message
+                icon='key'
+                header='Zaloguj się'
+                content='by używać aplikacji'
+            />
+            <Message
+                icon='x'
+                negative
+                hidden={!error && true}
+                content={error}
+            />
+            <Form.Input
+                required
+                type="email"
+                fluid icon='user'
+                iconPosition='left'
+                placeholder='E-mail'
+                value={email}
+                name='email'
+                onChange={this.handleOnChange}
+            />
+            <Form.Input
+                required
+                fluid
+                icon='lock'
+                iconPosition='left'
+                placeholder='Hasło'
+                type='password'
+                value={password}
+                name='password'
+                onChange={this.handleOnChange}
+            />
+            <Button content='Zaloguj' primary fluid onClick={this.handleOnClick} />
+        </Form>)
+    }
+}
+
+export default class SignUp extends React.Component {
+    state = {
+        name: '',
+        email: '',
+        password: '',
+        error: null
+    };
+
+    handleOnChange = ({ target: { name, value } }) => {
+        this.setState({
+            [name]: value
+        })
+    };
+
+    handleOnClick = (event) => {
+        event.preventDefault();
+        this.signUp();
+    };
+
+    signUp = () => {
+        const { email, password, name } = this.state;
+        firebase.auth().createUserWithEmailAndPassword(email, password)
+            .then(() => {
+                const user = firebase.auth().currentUser
+
+
+                if (user) {
+                    console.log(user);
+                    user.updateProfile({
+                        displayName: name,
+                    })
+                        .then(s => console.log(s))
+                        .catch(err => console.log(err))
+                }
+            })
+            .catch(error => {
+                const errorCode = error.code;
+                if (errorCode == 'auth/weak-password') {
+                    this.setState({ error: 'Zbyt słabe hasło. Hasło musi mieć co najmniej 6 znaków.' });
+                }
+                else if (errorCode == 'auth/invalid-email') {
+                    this.setState({ error: 'Nieprawidłowy adres e-mail.' });
+                }
+                else if (errorCode == 'auth/email-already-in-use') {
+                    this.setState({ error: 'Dla tego adresu e-mail konto już istnieje.' });
+                }
+                else if (errorCode == 'auth/operation-not-allowed') {
+                    this.setState({ error: 'Błąd rejestracji po stronie serwera. Przepraszamy.' });
+                }
+                else {
+                    this.setState({ error: 'nieznany błąd' });
+                }
+            });
+    };
+
+    render() {
+        const { email, password, error, name } = this.state;
+        return (
+            <Form>
+                <Message
+                    icon='user plus'
+                    header='Rejestracja'
+                    content='jeśli jeszcze nie masz konta, zarejestruj się.'
+                />
+                <Message
+                    icon='x'
+                    negative
+                    hidden={!error && true}
+                    content={error}
+                />
+                <Form.Input
+                    required
+                    fluid
+                    icon='user'
+                    iconPosition='left'
+                    placeholder='Name'
+                    type="text"
+                    value={name}
+                    name='name'
+                    onChange={this.handleOnChange}
+                />
+                <Form.Input
+                    required
+                    fluid
+                    icon='mail'
+                    iconPosition='left'
+                    placeholder='E-mail'
+                    type="email"
+                    value={email}
+                    name='email'
+                    onChange={this.handleOnChange}
+                />
+                <Form.Input
+                    required
+                    fluid
+                    icon='lock'
+                    iconPosition='left'
+                    placeholder='Hasło'
+                    type='password'
+                    value={password}
+                    name='password'
+                    onChange={this.handleOnChange}
+                />
+                <Button positive content={'Utwórz konto'} fluid onClick={this.handleOnClick} />
+            </Form>
+
+
+        )
+    }
+}

src/index.js

@@ -1,11 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import firebase from "firebase";
+
+
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+const firebaseConfig = {
+    apiKey: "AIzaSyCZXhm3zcG9vYBUhqKicIHKrcf1teHS4uM",
+    authDomain: "okularnicy-app.firebaseapp.com",
+    databaseURL: "https://okularnicy-app.firebaseio.com",
+    projectId: "okularnicy-app",
+    storageBucket: "okularnicy-app.appspot.com",
+    messagingSenderId: "91894787110",
+    appId: "1:91894787110:web:51e75bb16c6c56a0b5cae7",
+    measurementId: "G-TQ02ZKRZB4"
+  };
+  firebase.initializeApp(firebaseConfig);
+
 ReactDOM.render(<App />, document.getElementById('root'));
 
+
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA