xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

login/signup page visual improvements

This commit is contained in:
Daniel 2023-07-13 20:37:44 -04:00
parent 0912614e41
commit 2f4f3cbb29
3 changed files with 105 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pages/login.tsx
View File

@ -1,5 +1,6 @@
import SubmitButton from "@/components/SubmitButton"; import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react"; import { signIn } from "next-auth/react";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
@ -45,20 +46,27 @@ export default function Login() {
return ( return (
<> <>
<p className="text-xl font-bold text-center text-sky-500 mt-10 mb-3"> <div className="p-5 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
Linkwarden <div className="text-right flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
</p> <Image
<div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100"> src="/linkwarden.png"
<div className="my-5 text-center"> width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit"
/>
<div className="text-center sm:text-right">
<p className="text-3xl font-bold text-sky-500">Welcome back</p> <p className="text-3xl font-bold text-sky-500">Welcome back</p>
<p className="text-md font-semibold text-sky-400"> <p className="text-md font-semibold text-sky-400">
Sign in to your account Sign in to your account
</p> </p>
</div> </div>
</div>
<p className="text-sm text-sky-500 w-fit font-semibold"> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Username Username
{EmailProvider ? " or Email" : undefined} {EmailProvider ? "/Email" : undefined}
</p> </p>
<input <input
@ -66,26 +74,30 @@ export default function Login() {
placeholder="johnny" placeholder="johnny"
value={form.username} value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })} onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</div>
<p className="text-sm text-sky-500 w-fit font-semibold">Password</p> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Password
</p>
<input <input
type="password" type="password"
placeholder="***********" placeholder="***********"
value={form.password} value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
{EmailProvider && ( {EmailProvider && (
<Link <div className="w-fit ml-auto mt-1">
href={"/forgot"} <Link href={"/forgot"} className="text-gray-500 font-semibold">
className="w-fit ml-auto text-gray-500 font-semibold"
>
Forgot Password? Forgot Password?
</Link> </Link>
</div>
)} )}
</div>
<SubmitButton <SubmitButton
onClick={loginUser} onClick={loginUser}
@ -93,13 +105,13 @@ export default function Login() {
className="mt-2 w-full text-center" className="mt-2 w-full text-center"
loading={submitLoader} loading={submitLoader}
/> />
</div> <div className="flex items-baseline gap-1 justify-center">
<div className="flex items-baseline gap-1 justify-center my-3">
<p className="w-fit text-gray-500">New here?</p> <p className="w-fit text-gray-500">New here?</p>
<Link href={"/register"} className="block text-sky-500 font-bold"> <Link href={"/register"} className="block text-sky-500 font-bold">
Sign Up Sign Up
</Link> </Link>
</div> </div>
</div>
</> </>
); );
} }

54
pages/register.tsx
View File

@ -3,6 +3,7 @@ import { useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import SubmitButton from "@/components/SubmitButton"; import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react"; import { signIn } from "next-auth/react";
import Image from "next/image";
const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER; const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
@ -94,54 +95,70 @@ export default function Register() {
return ( return (
<> <>
<p className="text-xl font-bold text-center my-10 mb-3 text-sky-500"> <div className="p-5 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
Linkwarden <div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
</p> <Image
<div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100"> src="/linkwarden.png"
<div className="my-5 text-center"> width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit"
/>
<div className="text-center sm:text-right">
<p className="text-3xl font-bold text-sky-500">Get started</p> <p className="text-3xl font-bold text-sky-500">Get started</p>
<p className="text-md font-semibold text-sky-400"> <p className="text-md font-semibold text-sky-400">
Create a new account Create a new account
</p> </p>
</div> </div>
</div>
<p className="text-sm text-sky-500 w-fit font-semibold">Display Name</p> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Display Name
</p>
<input <input
type="text" type="text"
placeholder="Johnny" placeholder="Johnny"
value={form.name} value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</div>
<p className="text-sm text-sky-500 w-fit font-semibold">Username</p> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Username
</p>
<input <input
type="text" type="text"
placeholder="john" placeholder="john"
value={form.username} value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })} onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</div>
{EmailProvider ? ( {EmailProvider ? (
<> <div>
<p className="text-sm text-sky-500 w-fit font-semibold">Email</p> <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Email
</p>
<input <input
type="email" type="email"
placeholder="johnny@example.com" placeholder="johnny@example.com"
value={form.email} value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })} onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</> </div>
) : undefined} ) : undefined}
<div className="flex item-center gap-5"> <div className="flex item-center gap-5">
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-3"> <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Password Password
</p> </p>
@ -150,12 +167,12 @@ export default function Register() {
placeholder="***********" placeholder="***********"
value={form.password} value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</div> </div>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-3"> <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Confirm Password Confirm Password
</p> </p>
@ -166,7 +183,7 @@ export default function Register() {
onChange={(e) => onChange={(e) =>
setForm({ ...form, passwordConfirmation: e.target.value }) setForm({ ...form, passwordConfirmation: e.target.value })
} }
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</div> </div>
</div> </div>
@ -176,10 +193,9 @@ export default function Register() {
className="mt-2 w-full text-center" className="mt-2 w-full text-center"
loading={submitLoader} loading={submitLoader}
/> />
<div className="flex items-baseline gap-1 justify-center"> <div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500">Already have an account?</p> <p className="w-fit text-gray-500">Already have an account?</p>
<Link href={"/login"} className="block w-min text-sky-500 font-bold"> <Link href={"/login"} className="block text-sky-500 font-bold">
Login Login
</Link> </Link>
</div> </div>

BIN
public/linkwarden.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB