adding login with google@

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "firebase": "^8.0.2",
     "node-sass": "4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/App.css

@@ -6,4 +6,7 @@ body{
 a { 
   text-decoration: none;
   color: black;
+}
+* {
+  box-sizing: border-box;
 }

src/App.js

@@ -3,19 +3,41 @@ import HomePage from './pages/homepage/homepage.component';
 import Header from './components/header/header.component';
 import { Route,Switch } from 'react-router-dom';
 import ShopPage from './pages/shop/shop.component';
+import SignInAndSingUp from './pages/signin-and-singup/signin-and-singup.component';
+import { auth } from './fireabase/firebase.utils';
 import './App.css';
 
 
-function App() {
-  return (
-    <div>
-    <Header />
-    <Switch>
-      <Route exact path="/" component={HomePage} />
-      <Route exact path="/shop" component={ShopPage} />
-    </Switch>
-    </div>
-  );
+class App extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      currentUser: null
+    }
+  }
+  unsubscribeFromAuth = null;
+  componentWillUnmount(){
+    this.unsubscribeFromAuth();
+  }
+
+  componentDidMount(){
+    this.unsubscribeFromAuth = auth.onAuthStateChanged(user=>{
+      this.setState({currentUser:user});
+    })
+  }
+
+  render() {
+    return(
+        <div>
+        <Header currentUser={this.state.currentUser} />
+        <Switch>
+          <Route exact path="/" component={HomePage} />
+          <Route exact path="/shop" component={ShopPage} />
+          <Route exact path="/signin" component={SignInAndSingUp} />
+        </Switch>
+        </div>
+      );
+  }
 }
 
 export default App;

src/components/custom-button/custom-button.component.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import './custom-button.styles.scss';
+
+const CustomButton = ({ children, isGoogleSignIn, ...otherProps }) => (
+    <button
+      className={`${isGoogleSignIn ? 'google-sign-in' : ''} custom-button`}
+      {...otherProps}
+    >
+      {children}
+    </button>
+  );
+
+export default CustomButton;

src/components/custom-button/custom-button.styles.scss

@@ -0,0 +1,32 @@
+.custom-button {
+  min-width: 165px;
+  width: auto;
+  height: 50px;
+  letter-spacing: 0.5px;
+  line-height: 50px;
+  padding: 0 35px 0 35px;
+  font-size: 15px;
+  background-color: black;
+  color: white;
+  text-transform: uppercase;
+  font-family: 'Open Sans Condensed';
+  font-weight: bolder;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: white;
+    color: black;
+    border: 1px solid black;
+  }
+
+  &.google-sign-in {
+    background-color: #4285f4;
+    color: white;
+
+    &:hover {
+      background-color: #357ae8;
+      border: none;
+    }
+  }
+}

src/components/form-input/form-input.component.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import './form-input.styles.scss';
+
+const FormInput = ({handleChange, label, ...otherProps}) => (
+    <div className='group'>
+        <input className='form-input' onChange={handleChange} />
+        {
+            label ? 
+            <label className={`${otherProps.value.lenght ? 'shrink':''} form-input-label`}> {label} </label>
+            :
+            null
+        }
+    </div>
+)
+export default FormInput;

src/components/form-input/form-input.styles.scss

@@ -0,0 +1,54 @@
+$sub-color: grey;
+$main-color: black;
+
+@mixin shrinkLabel {
+  top: -14px;
+  font-size: 12px;
+  color: $main-color;
+}
+
+.group {
+  position: relative;
+  margin: 45px 0;
+
+  .form-input {
+    background: none;
+    background-color: white;
+    color: $sub-color;
+    font-size: 18px;
+    padding: 10px 10px 10px 5px;
+    display: block;
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid $sub-color;
+    margin: 25px 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus ~ .form-input-label {
+      @include shrinkLabel();
+    }
+  }
+
+  input[type='password'] {
+    letter-spacing: 0.3em;
+  }
+
+  .form-input-label {
+    color: $sub-color;
+    font-size: 16px;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 5px;
+    top: 10px;
+    transition: 300ms ease all;
+
+    &.shrink {
+      @include shrinkLabel();
+    }
+  }
+}

src/components/header/header.component.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {ReactComponent as Logo} from '../../assets/crown.svg';
+import {auth} from '../../fireabase/firebase.utils';
 import './header.styles.scss';
 
-const Header = () => (
+const Header = ({currentUser}) => (
     <div className='header'>
         <Link className='logo-container' to="/">
             <Logo className='logo' />
@@ -15,6 +16,14 @@ const Header = () => (
             <Link className='option' to="/shop">
                 CONTACT
             </Link>
+                {
+                    currentUser ?
+                    <div className='option' onClick={()=>auth.signOut()}>SALIR</div>
+                    :
+                    <Link className='option' to='/signin'>AUTENTICARSE</Link>
+
+
+                }
         </div>
     </div>
 )

src/components/header/header.styles.scss

@@ -20,6 +20,7 @@
 
     .option {
       padding: 10px 15px;
+      cursor: pointer;
     }
   }
 }

src/components/sign-in/sign-in.component.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import FormInput from '../form-input/form-input.component';
+import CustomButton from '../custom-button/custom-button.component';
+import { signInWithGoogle }  from '../../fireabase/firebase.utils';
+
+import './sign-in.styles.scss';
+
+class SignIn extends React.Component {
+
+    constructor(props){
+        super(props);
+        this.state = {
+            email: '',
+            password: ''
+        }
+    }
+
+    handleSubmit = event => {
+        event.preventDefault();
+        this.setState( {email: '',password: ''}
+        )
+
+    }
+    handleOnChange = event => {
+        const { value, name} = event.target;
+        this.setState({ [name]:value})
+    }
+    render(){
+        return (
+            <div className='sign-in'>
+                <h2>Actualmente tengo una cuenta</h2>
+                <span>Inicia sesión con tu correo y contraseña</span>
+                <form onSubmit={this.handleSubmit}>
+                    <FormInput name="email" type="email" 
+                        value={this.state.email} 
+                        handleChange={this.handleOnChange}
+                        label="Correo"
+                        required />
+                    <label>   </label>
+                    <FormInput name="password" type="password" 
+                        value={this.state.password} 
+                        handleChange={this.handleOnChange} 
+                        label="Contraseña"
+                        required />
+                    <div className='buttons'>
+                        <CustomButton type='submit'>Iniciar Sesión</CustomButton>
+                        <CustomButton onClick={signInWithGoogle} isGoogleSignIn>Iniciar Sesión Con Google</CustomButton>  
+                    </div>
+
+                </form>
+            </div>
+
+        );
+    }
+}
+
+export default SignIn;

src/components/sign-in/sign-in.styles.scss

@@ -0,0 +1,13 @@
+.sign-in{
+    width: 380px;
+    display: flex;
+    flex-direction: column;
+
+    .title{
+        margin:10px 0;
+    }
+    .buttons {
+        display: flex;
+        justify-content: space-between;
+      }
+}

src/fireabase/firebase.utils.js

@@ -0,0 +1,24 @@
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import 'firebase/auth';
+
+const config = {
+    apiKey: "AIzaSyAb9UlJHKZQkqFaA3vJ25mgqsIOIl1CEQY",
+    authDomain: "ecommerceztom.firebaseapp.com",
+    databaseURL: "https://ecommerceztom.firebaseio.com",
+    projectId: "ecommerceztom",
+    storageBucket: "ecommerceztom.appspot.com",
+    messagingSenderId: "745149943574",
+    appId: "1:745149943574:web:5e4d9e56554d82c35f8a37"
+  };
+
+  firebase.initializeApp(config);
+
+  export const auth = firebase.auth();
+  export const firestore = firebase.firestore();
+
+  const provider = new firebase.auth.GoogleAuthProvider();
+  provider.setCustomParameters({promp: 'select_account'});
+  export const signInWithGoogle = () => auth.signInWithPopup(provider);
+
+  export default firebase;

src/pages/signin-and-singup/signin-and-singup.component.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SignIn from '../../components/sign-in/sign-in.component';
+
+import './signin-and-singup.styles.scss';
+
+const SignInAndSignUp = () => (
+    <div className='sign-in-and-sign-up '>
+     <SignIn />
+    </div>
+)
+
+export default SignInAndSignUp;