rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: slightly improve sign up ui design

Browse source
This commit is contained in:
swve 2023-05-07 17:54:05 +00:00
parent 2b886ec2c2
commit be2d115581
1 changed files with 80 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

90
front/app/_orgs/[orgslug]/signup/page.tsx
View file

@ -2,9 +2,11 @@
import React from "react";
import { Title } from "../../../../components/UI/Elements/Styles/Title";
import { signup } from "../../../../services/auth/auth";
import { useRouter } from "next/navigation";
const SignUp = (params : any) => {
const SignUp = (params: any) => {
const org_slug = params.params.orgslug;
const router = useRouter();
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
const [username, setUsername] = React.useState("");
@ -13,7 +15,13 @@ const SignUp = (params : any) => {
e.preventDefault();
console.log({ email, password, username, org_slug });
alert(JSON.stringify({ email, password, username, org_slug }));
signup({ email, password, username, org_slug });
try {
signup({ email, password, username, org_slug });
router.push("/");
}
catch (err) {
console.log(err);
}
};
const handleEmailChange = (e: any) => {
@ -33,14 +41,76 @@ const SignUp = (params : any) => {
<div title="Sign up">
<Title>Sign up </Title>
<form>
<input onChange={handleUsernameChange} type="text" placeholder="username" />
<input onChange={handleEmailChange} type="text" placeholder="email" />
<input onChange={handlePasswordChange} type="password" placeholder="password" />
<button onClick={handleSubmit} type="submit">
Sign up
</button>
</form>
{/* Create a login ui with tailwindcss */}
<div className="flex justify-center items-center h-screen">
<div className="w-full max-w-md">
<form onSubmit={handleSubmit}>
<div className="mb-4 space-y-3">
<label className="block text-gray-700 text-sm font-bold mb-2">
Email
</label>
<input
type="email"
name="email"
value={email}
onChange={handleEmailChange}
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Email"
/>
<label className="block text-gray-700 text-sm font-bold mb-2">
Username
</label>
<input
type="text"
name="username"
value={username}
onChange={handleUsernameChange}
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Username"
/>
<label className="block text-gray-700 text-sm font-bold mb-2">
Password
</label>
<input
type="password"
name="password"
value={password}
onChange={handlePasswordChange}
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Password"
/>
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Sign up
</button>
<a
href="/login"
className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 ml-3"
>
Already have an account? Login
</a>
<a
href="/"
className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 ml-3"
>
Home
</a>
</div>
</form>
</div>
</div>
</div>
</div>
);