{"size": 3170, "ext": "js", "max_stars_repo_path": "Tesla-Clone/src/components/Signup/index.js", "max_stars_repo_name": "chirag-23/Tesla-clone-reactjs", "max_stars_repo_stars_event_min_datetime": "2022-01-20T05:06:33.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-21T09:27:16.000Z", "max_issues_repo_path": "Tesla-Clone/src/components/Signup/index.js", "max_issues_repo_name": "chirag-23/Tesla-clone-reactjs", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "Tesla-Clone/src/components/Signup/index.js", "max_forks_repo_name": "chirag-23/Tesla-clone-reactjs", "max_forks_repo_forks_event_min_datetime": "2022-02-01T17:44:43.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-01T17:44:43.000Z"}
{"max_stars_count": 4, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 34.0860215054, "max_line_length": 121, "alphanum_fraction": 0.4880126183}
import React,{ useState } from "react";
import { Content, Wrapper } from "./signup.style";
import Footer from "../Footer";

import { Link,useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import LanguageIcon from '@mui/icons-material/Language';

import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import { auth } from "../firebase";
import { login } from "../../features/userSlice";



const Signup = () =>{

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [fname, setFname] = useState('');
    const [lname, setLname] = useState('');
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const signUp = (e) =>{
        e.preventDefault();

        {!fname && alert('Please Enter Your Name!')}

        createUserWithEmailAndPassword(auth,email,password).then((userCreds)=> {
                updateProfile(userCreds.user, {
                    displayName: fname,
            }).then(()=>{
                dispatch(login({
                    email: userCreds.user.email,
                    uid: userCreds.user.uid,
                    displayName: fname,
                }))
            })
            navigate('/teslaaccount')
        }).catch((error) =>  {
            error.message.replace(".", "");
            alert(error.message + " (" + error.code + ")");
            document.getElementById("password").value = "";
        })

    }

    document.title='Tesla SSO - Register'
    return(
        <>
        <Wrapper>
            <div className="header" >
                <div>
                    <Link to='/'>
                        <img src="/images/logo.svg" alt="logo"/>
                    </Link>
                </div>
                <div className="lang" >
                    <LanguageIcon/> <span>en-US</span>
                </div>
            </div>

            <Content>
                <h1>Create Account</h1>
                <form>
                    <label htmlFor="text" >First Name</label>
                    <input type='text' id='fname' value={fname} onChange={(e)=> setFname(e.target.value)} />
                    <label htmlFor="text" >Last Name</label>
                    <input type='text' id='lname' value={lname} onChange={(e)=> setLname(e.target.value)} />
                    <label htmlFor="email" >Email Address</label>
                    <input type='email' id="email" value={email} onChange={(e)=> setEmail(e.target.value) }/>
                    <label htmlFor="password">Password</label>
                    <input type='password' id="password" value={password} onChange={(e)=> setPassword(e.target.value) }/>

                    <button type="submit" onClick={signUp}>Create Account</button>
                </form>
                <div className="line" >
                    <hr/><span>OR</span><hr/>
                </div>

                <div>
                <Link to='/login'>
                    <button>Sign In</button>
                </Link>
                </div>
            </Content>
        </Wrapper>
        <Footer/>
        </>
    )
}

export default Signup