Skip to content

Instantly share code, notes, and snippets.

@ayoisaiah ayoisaiah/Auth.tsx
Created Jan 20, 2020

Embed
What would you like to do?
// src/pages/Auth.tsx
import React from 'react';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import './Auth.css';
function Auth(props: any) {
const {
auth,
setAuth,
login,
firstNameInput,
lastNameInput,
emailInput,
passwordInput,
} = props;
return (
<div className="auth">
<div className="card">
<div className="tabs is-centered">
<ul>
<li className={auth === 'login' ? 'is-active' : ''}>
<a
href="#"
onClick={e => {
e.preventDefault();
setAuth('login');
}}
>
<span>Login</span>
</a>
</li>
<li className={auth === 'signup' ? 'is-active' : ''}>
<a
href="#"
onClick={e => {
e.preventDefault();
setAuth('signup');
}}
>
<span>Sign Up</span>
</a>
</li>
</ul>
</div>
<div className="content">
<div className="signup">
<form action="">
<div className={`field ${auth === 'login' ? 'hidden' : ''}`}>
<label className="label" htmlFor="first_name">
First name:
</label>
<div className="control">{firstNameInput}</div>
</div>
<div className={`field ${auth === 'login' ? 'hidden' : ''}`}>
<label className="label" htmlFor="last_name">
Last name:
</label>
<div className="control">{lastNameInput}</div>
</div>
<div className="field">
<label className="label" htmlFor="email">
Email:
</label>
<div className="control">{emailInput}</div>
</div>
<div className="field">
<label className="label" htmlFor="password">
Password:
</label>
<div className="control">{passwordInput}</div>
</div>
</form>
<button
onClick={() => login()}
className="button is-link is-fullwidth"
>
Submit
</button>
</div>
</div>
</div>
</div>
);
}
export default Auth;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.