2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
3c296bbd 1 parent c790d953

update auth style

Inline Side-by-side
Showing 1 changed file with 87 additions and 68 deletions
......@@ -2,7 +2,6 @@ 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";
......@@ -12,6 +11,7 @@ import {
faGithub,
faGoogle,
} from "@fortawesome/free-brands-svg-icons";
import loginBackground from "../../Imgs/login-background4.jpg";
const Wrapper = styled.div`
width: 100%;
......@@ -20,6 +20,19 @@ const Wrapper = styled.div`
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url(${loginBackground});
background-size: cover;
`;
const SubWrapper = styled.div`
background-color: rgba(57, 65, 74, 0.5);
border-radius: 7px;
padding: 5%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
`;
const Box = styled.div`
......@@ -40,8 +53,9 @@ const StateChanger = styled(Box)`
`;
const ToggleSpan = styled.span`
margin-left: 5px;
cursor: pointer;
color: #0652dd;
color: #079992;
`;
const Form = styled(Box)`
......@@ -75,6 +89,10 @@ const SocialLogin = styled(Box)`
opacity: 0.8;
`;
const StyledLink = styled(Link)`
color: white;
`;
export default ({
action,
setAction,
......@@ -86,73 +104,74 @@ export default ({
onSubmit,
}) => (
<>
<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>
<SubWrapper>
<TitleContainer>
<StyledLink to="/">
<Title>Linker</Title>
</StyledLink>
</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={"Password"} type="password" {...password} />
<Input placeholder={"PhoneNumber"} {...phoneNum} />
<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>
<StyledLink to="/facebook">
<FontAwesomeIcon icon={faFacebook} />
</StyledLink>
<StyledLink to="/google">
<FontAwesomeIcon icon={faGoogle} />
</StyledLink>
<StyledLink to="/twitter">
<FontAwesomeIcon icon={faTwitter} />
</StyledLink>
<StyledLink to="/github">
<FontAwesomeIcon icon={faGithub} />
</StyledLink>
</SocialLogin>
</SubWrapper>
</Wrapper>
</>
);
......