Skip to content

Commit

Permalink
break form out of signup js
Browse files Browse the repository at this point in the history
  • Loading branch information
@chriswebb09
chriswebb09 committed Dec 15, 2023
1 parent 89317fc commit 62430f0
Showing 1 changed file with 68 additions and 47 deletions.
115 changes: 68 additions & 47 deletions DirectReport/browserview/static/js/auth/signup.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,80 @@
const { useState, useEffect } = React;

const SignupForm = () => {
return (
<form className="space-y-4 md:space-y-6" method="POST" action="/signup">
<div>
<label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Your email
</label>
<input type="email" name="email" id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="[email protected]" required=""/>
</div>
<div>
<label htmlFor="firstname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
First name
</label>
<input type="firstname" name="firstname" id="firstname"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="John Doe.." required=""/>
</div>
<div>
<label htmlFor="lastname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Last name
</label>
<input type="text" name="lastname" id="lastname"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="John Doe.." required=""/>
</div>
<div>
<label htmlFor="username" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Username
</label>
<input type="text" name="username" id="username"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="John Doe.." required=""/>
</div>
<div>
<label htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
<input type="password" name="password" id="password" placeholder="••••••••"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required=""/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-start">
<div className="flex items-center h-5">
<input id="remember" name="remember" aria-describedby="remember" type="checkbox"
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required=""/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
Remember me
</label>
</div>
</div>
</div>
<button type="submit"
className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
Create Account
</button>
</form>
)
}

const Signup = () => {
return (
<div>
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div
className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Sign up for an account
</h1>
<form className="space-y-4 md:space-y-6" method="POST" action="/signup">
<div>
<label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Your email
</label>
<input type="email" name="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="[email protected]" required=""/>
</div>
<div>
<label htmlFor="firstname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
First name
</label>
<input type="firstname" name="firstname" id="firstname" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John Doe.." required=""/>
</div>
<div>
<label htmlFor="lastname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Last name
</label>
<input type="text" name="lastname" id="lastname" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John Doe.." required=""/>
</div>
<div>
<label htmlFor="username" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Username
</label>
<input type="text" name="username" id="username" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John Doe.." required=""/>
</div>
<div>
<label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
<input type="password" name="password" id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required=""/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-start">
<div className="flex items-center h-5">
<input id="remember" name="remember" aria-describedby="remember" type="checkbox" className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required=""/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
Remember me
</label>
</div>
</div>
</div>
<button type="submit" className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
Create Account
</button>
</form>
{SignupForm()}
</div>
</div>
</div>
Expand All @@ -62,4 +83,4 @@ const SignupForm = () => {
}

const domContainer = document.querySelector('#root');
ReactDOM.render(<SignupForm/>, domContainer);
ReactDOM.render(<Signup/>, domContainer);

0 comments on commit 62430f0

Please sign in to comment.