2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
2a428873 1 parent 8d93a450

add link in social login

Inline Side-by-side
Showing 1 changed file with 75 additions and 58 deletions
import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { Helmet } from "react-helmet";
import Header from "../../Components/Header";
import Input from "../../Components/Input";
import Button from "../../Components/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
......@@ -13,6 +15,7 @@ import {
const Wrapper = styled.div`
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -36,7 +39,7 @@ const StateChanger = styled(Box)`
margin-bottom: 15px;
`;
const Link = styled.span`
const ToggleSpan = styled.span`
cursor: pointer;
color: #0652dd;
`;
......@@ -63,7 +66,7 @@ const Form = styled(Box)`
const SocialLogin = styled(Box)`
display: flex;
svg {
a {
&:not(:last-child) {
margin-right: 20px;
}
......@@ -82,60 +85,74 @@ export default ({
phoneNum,
onSubmit,
}) => (
<Wrapper>
<TitleContainer>
<Title>KhuChat</Title>
</TitleContainer>
<Form>
{action === "logIn" ? (
<>
<Helmet>
<title>Log In</title>
</Helmet>
<form onSubmit={onSubmit}>
<Input placeholder={"Email"} type="email" {...email} />
<Input placeholder={"Password"} type="password" {...password} />
<Button text={"Log In"} />
</form>
</>
) : (
<>
<Helmet>
<title>Sign Up</title>
</Helmet>
<form onSubmit={onSubmit}>
<Input placeholder={"Email"} type="email" {...email} />
<Input placeholder={"UserName"} {...username} />
<Input placeholder={"PhoneNumber"} {...phoneNum} />
<Input placeholder={"Password"} type="password" {...password} />
<Input
placeholder={"Password for validation"}
type="password"
{...password2}
/>
<Button text={"Sign Up"} />
</form>
</>
)}
</Form>
<StateChanger>
{action === "logIn" ? (
<>
Don't you have an account ?
<Link onClick={() => setAction("signUp")}> Sign Up </Link>
</>
) : (
<>
Did you have an account ?
<Link onClick={() => setAction("logIn")}> Log in </Link>
</>
)}
</StateChanger>
<SocialLogin>
<FontAwesomeIcon icon={faFacebook} />
<FontAwesomeIcon icon={faGoogle} />
<FontAwesomeIcon icon={faTwitter} />
<FontAwesomeIcon icon={faGithub} />
</SocialLogin>
</Wrapper>
<>
<Header />
<Wrapper>
<TitleContainer>
<Title>Linker</Title>
</TitleContainer>
<Form>
{action === "logIn" ? (
<>
<Helmet>
<title>Log In</title>
</Helmet>
<form onSubmit={onSubmit}>
<Input placeholder={"Email"} type="email" {...email} />
<Input placeholder={"Password"} type="password" {...password} />
<Button text={"Log In"} />
</form>
</>
) : (
<>
<Helmet>
<title>Sign Up</title>
</Helmet>
<form onSubmit={onSubmit}>
<Input placeholder={"Email"} type="email" {...email} />
<Input placeholder={"UserName"} {...username} />
<Input placeholder={"PhoneNumber"} {...phoneNum} />
<Input placeholder={"Password"} type="password" {...password} />
<Input
placeholder={"Password for validation"}
type="password"
{...password2}
/>
<Button text={"Sign Up"} />
</form>
</>
)}
</Form>
<StateChanger>
{action === "logIn" ? (
<>
Don't you have an account ?
<ToggleSpan onClick={() => setAction("signUp")}>
{" "}
Sign Up{" "}
</ToggleSpan>
</>
) : (
<>
Did you have an account ?
<ToggleSpan onClick={() => setAction("logIn")}> Log in </ToggleSpan>
</>
)}
</StateChanger>
<SocialLogin>
<Link to="/facebook">
<FontAwesomeIcon icon={faFacebook} />
</Link>
<Link to="/google">
<FontAwesomeIcon icon={faGoogle} />
</Link>
<Link to="/twitter">
<FontAwesomeIcon icon={faTwitter} />
</Link>
<Link to="/github">
<FontAwesomeIcon icon={faGithub} />
</Link>
</SocialLogin>
</Wrapper>
</>
);
......