fergalmoran/supanextail
1
0
Fork 0
mirror of https://github.com/fergalmoran/supanextail.git synced 2025-12-22 09:17:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve auth UI + several global UI improvements

Browse Source
This commit is contained in:
Michael
2021-08-06 12:35:35 +02:00
parent acd964a699
commit 8c95ac1f4b
8 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/AuthText.js
View File

@@ -4,15 +4,15 @@ import authImage from "public/auth.png";
const AuthText = () => {
return (
<div className='lg:mt-0 max-w-lg flex flex-col text-xl'>
<div className='mt-10 mb-3'>
<div className='mt-10 mb-3 m-auto'>
<Image
src={authImage}
width={authImage.width / 1.5}
height={authImage.height / 1.5}
/>
</div>
<h2 className='text-4xl font-title font-semibold'>
Join SupaNexTail for <span className='text-accent'>free</span>!
<h2 className='text-4xl font-title font-semibold text-center'>
Join SupaNexTail for <span className='text-primary'>free</span>!
</h2>
<p className='mb-5 mt-8 leading-9'>
Create your website in a few minutes with our boilerplate. You can use

2
components/Avatar.js
View File

@@ -80,7 +80,7 @@ const Avatar = ({ url, size, onUpload }) => {
)}
<div style={{ width: size }}>
<label
className='mt-2 btn btn-primary text-center cursor-pointer text-xs'
className='mt-2 btn btn-primary text-center cursor-pointer text-xs btn-sm'
htmlFor='single'>
{uploading ? "Uploading ..." : "Update my avatar"}
</label>

4
components/Dashboard.js
View File

@@ -77,7 +77,7 @@ export default function Dashboard(props) {
Email
</label>
<input
className='input input-primary input-bordered input-sm flex-1'
className='input input-primary input-bordered input-sm flex-1 text-base-100'
id='email'
type='text'
value={props.session.user.email}
@@ -123,7 +123,7 @@ export default function Dashboard(props) {
<Image src={Plan} />
<div className='flex flex-col m-auto'>
<h2>Your current plan</h2>
<p className='font-bold'>
<p className=''>
{props.plan ? PriceIds[props.plan] : "Free tier"}
</p>
</div>

2
components/Layout.js
View File

@@ -31,7 +31,7 @@ const Layout = (props) => {
dark: "bg-white-600 font-gray-300",
};
return (
<div className='min-h-screen w-full bg-base-100 text-base-content m-auto'>
<div className='min-h-screen w-full bg-base-100 text-base-content m-auto font-body'>
<Head>
<link
rel='apple-touch-icon'

64
components/UI/Login.js
View File

@@ -1,4 +1,6 @@
import { IoLogoGoogle } from "react-icons/io";
import router from "next/router";
import { toast } from "react-toastify";
import { useState } from "react";
const Login = (props) => {
@@ -6,16 +8,43 @@ const Login = (props) => {
const [password, setPassword] = useState("");
const [forgot, setForgot] = useState(false);
const resetPassword = () => {
props.resetPassword(email).then((result) => {
if (result.error) {
toast.error(result.error.message);
} else toast.success("Check your email to reset your password!");
});
};
const login = (e) => {
e.preventDefault();
//Handle the login. Go to the homepage if success or display an error.
props
.signIn({
email: email,
password: password,
})
.then((result) => {
if (result.data) {
router.push("/");
}
if (result.error) {
toast.error(result.error.message);
}
});
};
return (
<div className='p-10 bg-base-100 md:flex-1 rounded-md text-base-content shadow-md'>
<div className='p-10 bg-base-100 md:flex-1 rounded-md text-base-content shadow-md max-w-sm font-body'>
{!forgot && (
<>
<h3 className='my-4 text-2xl font-semibold'>Account Login</h3>
<h3 className='my-4 text-2xl font-semibold font-title'>
Account Login
</h3>
<form action='#' className='flex flex-col space-y-5'>
<div className='flex flex-col space-y-1'>
<label
htmlFor='email'
className='text-sm font-semibold text-gray-500'>
<label htmlFor='email' className='text-sm'>
Email address
</label>
<input
@@ -31,9 +60,7 @@ const Login = (props) => {
</div>
<div className='flex flex-col space-y-1'>
<div className='flex items-center justify-between'>
<label
htmlFor='password'
className='text-sm font-semibold text-gray-500'>
<label htmlFor='password' className='text-sm'>
Password
</label>
<button
@@ -59,8 +86,7 @@ const Login = (props) => {
<button
className='btn btn-primary w-full'
onClick={(event) => {
event.preventDefault();
props.signIn({ email: email, password: password });
login(event);
}}>
Log in
</button>
@@ -74,15 +100,15 @@ const Login = (props) => {
<div className='flex flex-col space-y-4'>
<button
href='#'
className='flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none '
className='flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-base-200 rounded-md group hover:bg-base-300 focus:outline-none '
onClick={(event) => {
event.preventDefault();
props.signIn({ provider: "google" });
}}>
<div className='text-base-content group-hover:text-white'>
<div className='text-base-content'>
<IoLogoGoogle />
</div>
<span className='text-sm font-medium text-gray-800 group-hover:text-white'>
<span className='text-sm font-medium text-base-content'>
Gmail
</span>
</button>
@@ -115,14 +141,22 @@ const Login = (props) => {
<div>
<button
className='btn btn-primary w-full'
className='btn btn-primary w-full btn-sm'
onClick={(event) => {
event.preventDefault();
props.resetPassword(email);
resetPassword();
}}>
Recover my password
</button>
</div>
<hr />
<button
onClick={() => {
setForgot(false);
}}
className='text-sm text-blue-600 hover:underline focus:text-blue-800'>
Go back to sign in
</button>
</form>
</>
)}

6
pages/auth.js
View File

@@ -18,11 +18,9 @@ const AuthPage = () => {
/>
<Layout>
<div className='flex flex-wrap justify-evenly w-full'>
<div className='flex flex-wrap justify-evenly w-full mt-20'>
<AuthText />
<div>
<AuthComponent />
</div>
<AuthComponent />
</div>
</Layout>
</>

4
pages/global.css
View File

@@ -45,3 +45,7 @@ You can setup basic rules for your headers/text here
.nav-btn:hover::before {
transform: scaleX(1);
}
.btn {
@apply font-normal
}

1
utils/AuthContext.js
View File

@@ -44,6 +44,7 @@ export const AuthProvider = ({ children }) => {
signUp: (data) => supabase.auth.signUp(data),
signIn: (data) => supabase.auth.signIn(data),
signOut: () => supabase.auth.signOut(),
resetPassword: (data) => supabase.auth.api.resetPasswordForEmail(data),
user,
};