Skip to content
This repository has been archived by the owner on Jun 29, 2020. It is now read-only.

Commit

Permalink
Created signup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ninad99
Ninad99 committed Dec 27, 2019
1 parent 2d763dc commit 0c59cc1
Showing 1 changed file with 108 additions and 44 deletions.
152 changes: 108 additions & 44 deletions src/pages/Register/RegisterPage/RegisterPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { Link } from 'react-router-dom';
import classes from './Register.module.scss';
import Span from '../../../components/units/Span/Span';
import FormInput from '../../../components/units/FormInput/formInput.component';
Expand Down Expand Up @@ -53,50 +54,47 @@ function RegisterPage({ setName, setEmail, setPassword, onFormSubmit, span }) {
const [isPasswordHidden, setIsPasswordHidden] = React.useState(true);

return (
<div className={classes.signupcomponent}>
<div className={classes.container}>
<form className={classes.signup} onSubmit={onFormSubmit}>
<div className={classes.headlines}>
<h2 className={classes.headline}>
Welcome to Visual Music!
</h2>
<span className={classes.subheadline}>
Get Started Absolutely free
</span>
</div>
<div className={classes.searchfields}>
<div className={classes.name}>
<FormInput
labelText='Name'
type="text"
fontSize='medium'
validators={nameValidators}
required
onChange={e=>setName(e.target.value)}
/>
</div>
<div className={classes.email}>
<FormInput
labelText='Email'
type="email"
fontSize='medium'
validators={emailValidators}
required
onChange={e=>setEmail(e.target.value)}
/>
</div>
<div className={classes.password}>
<FormInput
labelText='Password'
type={isPasswordHidden ? 'password' : 'text'}
fontSize='medium'
validators={passwordValidators}
required
onChange={e=>setPassword(e.target.value)}
<div className={classes.signup}>
<div className={classes.colone}>
<div className={classes.container}>
<h1>Visualize music in a new way!</h1>
<h3>The app that converts your favourite music pieces into visual expressions</h3>
</div>
</div>
<div className={classes.coltwo}>
<form className={classes.signupform} onSubmit={onFormSubmit}>
<h1>Sign Up</h1>
<div className={classes.name}>
<FormInput
labelText='Name'
type="text"
fontSize='medium'
validators={nameValidators}
required
onChange={e=>setName(e.target.value)}
/>
</div>
</div>
<div className={classes.showpassword}>
<div className={classes.email}>
<FormInput
labelText='Email'
type="email"
fontSize='medium'
validators={emailValidators}
required
onChange={e=>setEmail(e.target.value)}
/>
</div>
<div className={classes.password}>
<FormInput
labelText='Password'
type={isPasswordHidden ? 'password' : 'text'}
fontSize='medium'
validators={passwordValidators}
required
onChange={e=>setPassword(e.target.value)}
/>
</div>
{/* <div className={classes.showpassword}>
<input
type="checkbox"
name="showpassword"
Expand All @@ -106,18 +104,84 @@ function RegisterPage({ setName, setEmail, setPassword, onFormSubmit, span }) {
}}
/>
<label htmlFor="showpassword">Show Password</label>
</div>
</div> */}
<div className={classes.custombutton}>
<button type="submit" >
Sign Up
Continue
</button>
</div>
<h2>Already a member?&nbsp;&nbsp;<Link to="/login">Sign In</Link></h2>
{span && (
<Span className={classes.errorLabel} content={span} />
)}
</form>
</div>
</div>
// <div className={classes.signupcomponent}>
// <div className={classes.container}>
// <form className={classes.signup} onSubmit={onFormSubmit}>
// <div className={classes.headlines}>
// <h2 className={classes.headline}>
// Welcome to Visual Music!
// </h2>
// <span className={classes.subheadline}>
// Get Started Absolutely free
// </span>
// </div>
// <div className={classes.searchfields}>
// <div className={classes.name}>
// <FormInput
// labelText='Name'
// type="text"
// fontSize='medium'
// validators={nameValidators}
// required
// onChange={e=>setName(e.target.value)}
// />
// </div>
// <div className={classes.email}>
// <FormInput
// labelText='Email'
// type="email"
// fontSize='medium'
// validators={emailValidators}
// required
// onChange={e=>setEmail(e.target.value)}
// />
// </div>
// <div className={classes.password}>
// <FormInput
// labelText='Password'
// type={isPasswordHidden ? 'password' : 'text'}
// fontSize='medium'
// validators={passwordValidators}
// required
// onChange={e=>setPassword(e.target.value)}
// />
// </div>
// </div>
// <div className={classes.showpassword}>
// <input
// type="checkbox"
// name="showpassword"
// id="showpassword"
// onClick={() => {
// setIsPasswordHidden(!isPasswordHidden);
// }}
// />
// <label htmlFor="showpassword">Show Password</label>
// </div>
// <div className={classes.custombutton}>
// <button type="submit" >
// Sign Up
// </button>
// </div>
// {span && (
// <Span className={classes.errorLabel} content={span} />
// )}
// </form>
// </div>
// </div>
);
}

Expand Down

0 comments on commit 0c59cc1

Please sign in to comment.