From 0d58a9631a834e326bbfffe09a400f9a66cfcfaa Mon Sep 17 00:00:00 2001 From: Gabriel Stein Date: Wed, 6 Sep 2023 16:42:48 -0400 Subject: [PATCH 1/8] add user layout with basic styles --- core/app/forgot/ForgotForm.tsx | 59 ---------------- core/app/forgot/page.tsx | 9 --- core/app/login/page.tsx | 9 --- core/app/reset/page.tsx | 9 --- core/app/settings/SettingsForm.tsx | 110 ----------------------------- core/app/settings/page.tsx | 15 ---- core/app/signup/page.tsx | 15 ---- 7 files changed, 226 deletions(-) delete mode 100644 core/app/forgot/ForgotForm.tsx delete mode 100644 core/app/forgot/page.tsx delete mode 100644 core/app/login/page.tsx delete mode 100644 core/app/reset/page.tsx delete mode 100644 core/app/settings/SettingsForm.tsx delete mode 100644 core/app/settings/page.tsx delete mode 100644 core/app/signup/page.tsx diff --git a/core/app/forgot/ForgotForm.tsx b/core/app/forgot/ForgotForm.tsx deleted file mode 100644 index 311bb5e370..0000000000 --- a/core/app/forgot/ForgotForm.tsx +++ /dev/null @@ -1,59 +0,0 @@ -"use client"; -import React, { FormEvent, useState } from "react"; -import { Button } from "ui"; -import { supabase } from "lib/supabase"; - -export default function ForgotForm() { - const [email, setEmail] = useState(""); - const [isLoading, setIsLoading] = useState(false); - const [success, setSuccess] = useState(false); - const [failure, setFailure] = useState(false); - - const resetPassword = async (evt: FormEvent) => { - evt.preventDefault(); - setIsLoading(true); - setFailure(false); - const { error } = await supabase.auth.resetPasswordForEmail(email, { - redirectTo: "https://www.pubpub.org/reset", - }); - if (error) { - console.error(error); - setFailure(true); - } else { - setSuccess(true); - } - setIsLoading(false); - }; - - return ( - <> - {!success && ( - <> -

- Enter your email below to receive a secure link for reseting yor password. -

-
-
- setEmail(evt.target.value)} - placeholder="example@mail.com" - /> - - {failure && ( -
Error reseting password
- )} -
-
- - )} - {success && ( -
- Password reset email sent! Please check your inbox. -
- )} - - ); -} diff --git a/core/app/forgot/page.tsx b/core/app/forgot/page.tsx deleted file mode 100644 index 3d404e0c30..0000000000 --- a/core/app/forgot/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import ForgotForm from "./ForgotForm"; - -export default async function Page() { - return ( -
- -
- ); -} diff --git a/core/app/login/page.tsx b/core/app/login/page.tsx deleted file mode 100644 index 736f09360f..0000000000 --- a/core/app/login/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import LoginForm from "./LoginForm"; - -export default async function Page() { - return ( -
- -
- ); -} diff --git a/core/app/reset/page.tsx b/core/app/reset/page.tsx deleted file mode 100644 index 0a0058bbf2..0000000000 --- a/core/app/reset/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import ResetForm from "./ResetForm"; - -export default async function Page() { - return ( -
- -
- ); -} diff --git a/core/app/settings/SettingsForm.tsx b/core/app/settings/SettingsForm.tsx deleted file mode 100644 index f9e475115a..0000000000 --- a/core/app/settings/SettingsForm.tsx +++ /dev/null @@ -1,110 +0,0 @@ -"use client"; -import React, { useState, FormEvent } from "react"; -import { Button } from "ui"; -import { UserPutBody } from "app/api/user/route"; -import { supabase } from "lib/supabase"; -import { useRouter } from "next/navigation"; -import { getSlugSuffix, slugifyString } from "lib/string"; -type Props = { - name: string; - email: string; - slug: string; -}; - -export default function SettingsForm({ name: initName, email: initEmail, slug }: Props) { - const [name, setName] = useState(initName); - const [email, setEmail] = useState(initEmail); - const [isLoading, setIsLoading] = useState(false); - const [resetIsLoading, setResetIsLoading] = useState(false); - const [resetSuccess, setResetSuccess] = useState(false); - const emailChanged = initEmail !== email; - const router = useRouter(); - const valuesChanged = emailChanged || name !== initName; - const slugSuffix = getSlugSuffix(slug); - - const handleSubmit = async (evt: FormEvent) => { - evt.preventDefault(); - - setIsLoading(true); - const putBody: UserPutBody = { - name, - }; - if (emailChanged) { - const { error } = await supabase.auth.updateUser({ email }); - if (error) { - setIsLoading(false); - console.error(error); - return false; - } - } - const response = await fetch("/api/user", { - method: "PUT", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(putBody), - }); - const data = await response.json(); - if (data.error) { - setIsLoading(false); - console.error(data.error); - } else { - setIsLoading(false); - router.refresh(); - } - }; - const resetPassword = async () => { - setResetIsLoading(true); - const { error } = await supabase.auth.resetPasswordForEmail(initEmail, { - redirectTo: "https://www.pubpub.org/reset", - }); - if (error) { - console.error(error); - } else { - setResetSuccess(true); - } - setResetIsLoading(false); - }; - - return ( - <> -
-
- - setName(evt.target.value)} /> -
- Username: {slugifyString(name)}-{slugSuffix} -
- - setEmail(evt.target.value)} - /> - {emailChanged && ( -
- You will need to confirm this change by clicking a link sent to the new - email address. -
- )} - -
-

- Click below to receive an email with a secure link for reseting yor password. -

- {!resetSuccess && ( - - )} - {resetSuccess && ( -
- Password reset email sent! Please check your inbox. -
- )} -
- - ); -} diff --git a/core/app/settings/page.tsx b/core/app/settings/page.tsx deleted file mode 100644 index dcc7f4b4ba..0000000000 --- a/core/app/settings/page.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import SettingsForm from "./SettingsForm"; -import { getLoginData } from "lib/auth/loginData"; -import { notFound } from "next/navigation"; - -export default async function Page() { - const loginData = await getLoginData(); - if (!loginData) { - return notFound(); - } - return ( -
- -
- ); -} diff --git a/core/app/signup/page.tsx b/core/app/signup/page.tsx deleted file mode 100644 index 1be8cffdd2..0000000000 --- a/core/app/signup/page.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import SignupForm from "./SignupForm"; -import { getLoginData } from "lib/auth/loginData"; - -export default async function Page() { - const loginData = await getLoginData(); - if (loginData) { - /* TODO: clean this up. Better alert status. */ - return
Currently logged in. Please logout to signup for a new account.
; - } - return ( -
- -
- ); -} From cd52ec24e1639ef9e631532b74bfb15bfa29312e Mon Sep 17 00:00:00 2001 From: Gabriel Stein Date: Wed, 6 Sep 2023 16:42:52 -0400 Subject: [PATCH 2/8] add user layout with basic styles --- core/app/(user)/UserStyles.module.css | 4 + core/app/(user)/forgot/ForgotForm.tsx | 59 ++++++++++++ core/app/(user)/forgot/page.tsx | 9 ++ core/app/(user)/layout.tsx | 10 ++ core/app/(user)/login/LoginForm.tsx | 63 +++++++++++++ core/app/(user)/login/page.tsx | 9 ++ core/app/(user)/reset/ResetForm.tsx | 63 +++++++++++++ core/app/(user)/reset/page.tsx | 9 ++ core/app/(user)/settings/SettingsForm.tsx | 110 ++++++++++++++++++++++ core/app/(user)/settings/page.tsx | 15 +++ core/app/(user)/signup/SignupForm.tsx | 86 +++++++++++++++++ core/app/(user)/signup/page.tsx | 15 +++ core/public/logos/icon.svg | 8 ++ 13 files changed, 460 insertions(+) create mode 100644 core/app/(user)/UserStyles.module.css create mode 100644 core/app/(user)/forgot/ForgotForm.tsx create mode 100644 core/app/(user)/forgot/page.tsx create mode 100644 core/app/(user)/layout.tsx create mode 100644 core/app/(user)/login/LoginForm.tsx create mode 100644 core/app/(user)/login/page.tsx create mode 100644 core/app/(user)/reset/ResetForm.tsx create mode 100644 core/app/(user)/reset/page.tsx create mode 100644 core/app/(user)/settings/SettingsForm.tsx create mode 100644 core/app/(user)/settings/page.tsx create mode 100644 core/app/(user)/signup/SignupForm.tsx create mode 100644 core/app/(user)/signup/page.tsx create mode 100644 core/public/logos/icon.svg diff --git a/core/app/(user)/UserStyles.module.css b/core/app/(user)/UserStyles.module.css new file mode 100644 index 0000000000..f5254b4617 --- /dev/null +++ b/core/app/(user)/UserStyles.module.css @@ -0,0 +1,4 @@ +.logo { + width: 25px; + height: 25px; +} diff --git a/core/app/(user)/forgot/ForgotForm.tsx b/core/app/(user)/forgot/ForgotForm.tsx new file mode 100644 index 0000000000..311bb5e370 --- /dev/null +++ b/core/app/(user)/forgot/ForgotForm.tsx @@ -0,0 +1,59 @@ +"use client"; +import React, { FormEvent, useState } from "react"; +import { Button } from "ui"; +import { supabase } from "lib/supabase"; + +export default function ForgotForm() { + const [email, setEmail] = useState(""); + const [isLoading, setIsLoading] = useState(false); + const [success, setSuccess] = useState(false); + const [failure, setFailure] = useState(false); + + const resetPassword = async (evt: FormEvent) => { + evt.preventDefault(); + setIsLoading(true); + setFailure(false); + const { error } = await supabase.auth.resetPasswordForEmail(email, { + redirectTo: "https://www.pubpub.org/reset", + }); + if (error) { + console.error(error); + setFailure(true); + } else { + setSuccess(true); + } + setIsLoading(false); + }; + + return ( + <> + {!success && ( + <> +

+ Enter your email below to receive a secure link for reseting yor password. +

+
+
+ setEmail(evt.target.value)} + placeholder="example@mail.com" + /> + + {failure && ( +
Error reseting password
+ )} +
+
+ + )} + {success && ( +
+ Password reset email sent! Please check your inbox. +
+ )} + + ); +} diff --git a/core/app/(user)/forgot/page.tsx b/core/app/(user)/forgot/page.tsx new file mode 100644 index 0000000000..3d404e0c30 --- /dev/null +++ b/core/app/(user)/forgot/page.tsx @@ -0,0 +1,9 @@ +import ForgotForm from "./ForgotForm"; + +export default async function Page() { + return ( +
+ +
+ ); +} diff --git a/core/app/(user)/layout.tsx b/core/app/(user)/layout.tsx new file mode 100644 index 0000000000..fc2039fb6f --- /dev/null +++ b/core/app/(user)/layout.tsx @@ -0,0 +1,10 @@ +export default async function UserLayout({ children }: { children: React.ReactNode }) { + return ( +
+
+ +
+
{children}
+
+ ); +} diff --git a/core/app/(user)/login/LoginForm.tsx b/core/app/(user)/login/LoginForm.tsx new file mode 100644 index 0000000000..45a552c4a6 --- /dev/null +++ b/core/app/(user)/login/LoginForm.tsx @@ -0,0 +1,63 @@ +"use client"; +import React, { useState, FormEvent } from "react"; +import { Button } from "ui"; +import { supabase } from "lib/supabase"; +import Link from "next/link"; + +export default function LoginForm() { + const [password, setPassword] = useState(""); + const [email, setEmail] = useState(""); + const [isLoading, setIsLoading] = useState(false); + const [failure, setFailure] = useState(false); + + const handleSubmit = async (evt: FormEvent) => { + setIsLoading(true); + setFailure(false); + evt.preventDefault(); + const { data, error } = await supabase.auth.signInWithPassword({ + email, + password, + }); + if (error) { + setIsLoading(false); + setFailure(true); + } else if (data) { + window.location.href = "/"; + } + }; + + return ( + <> +

Login

+
+
+ + setEmail(evt.target.value)} + /> + + setPassword(evt.target.value)} + /> + +
+ + + Forgot Password + +
+ {failure && ( +
Incorrect password or email
+ )} +
+
+ + ); +} diff --git a/core/app/(user)/login/page.tsx b/core/app/(user)/login/page.tsx new file mode 100644 index 0000000000..736f09360f --- /dev/null +++ b/core/app/(user)/login/page.tsx @@ -0,0 +1,9 @@ +import LoginForm from "./LoginForm"; + +export default async function Page() { + return ( +
+ +
+ ); +} diff --git a/core/app/(user)/reset/ResetForm.tsx b/core/app/(user)/reset/ResetForm.tsx new file mode 100644 index 0000000000..662d82b01c --- /dev/null +++ b/core/app/(user)/reset/ResetForm.tsx @@ -0,0 +1,63 @@ +"use client"; +import React, { useState, FormEvent } from "react"; +import { Button } from "ui"; +import { supabase } from "lib/supabase"; +import { useRouter } from "next/navigation"; + +export default function ResetForm() { + const router = useRouter(); + const [password, setPassword] = useState(""); + const [isLoading, setIsLoading] = useState(false); + const [success, setSuccess] = useState(false); + const [failure, setFailure] = useState(false); + + const handleSubmit = async (evt: FormEvent) => { + setIsLoading(true); + setFailure(false); + evt.preventDefault(); + const { data, error } = await supabase.auth.updateUser({ + password, + }); + if (error) { + setIsLoading(false); + setFailure(true); + } else if (data) { + setIsLoading(false); + setSuccess(true); + router.refresh(); + setTimeout(() => { + router.push("/"); + }, 5000); + } + }; + + return ( + <> + {!success && ( +
+
+ + setPassword(evt.target.value)} + /> + + {failure && ( +
Error reseting password
+ )} +
+
+ )} + {success && ( +
+
Success - password reset!
+
Redirecting in 5 seconds...
+
+ )} + + ); +} diff --git a/core/app/(user)/reset/page.tsx b/core/app/(user)/reset/page.tsx new file mode 100644 index 0000000000..0a0058bbf2 --- /dev/null +++ b/core/app/(user)/reset/page.tsx @@ -0,0 +1,9 @@ +import ResetForm from "./ResetForm"; + +export default async function Page() { + return ( +
+ +
+ ); +} diff --git a/core/app/(user)/settings/SettingsForm.tsx b/core/app/(user)/settings/SettingsForm.tsx new file mode 100644 index 0000000000..f9e475115a --- /dev/null +++ b/core/app/(user)/settings/SettingsForm.tsx @@ -0,0 +1,110 @@ +"use client"; +import React, { useState, FormEvent } from "react"; +import { Button } from "ui"; +import { UserPutBody } from "app/api/user/route"; +import { supabase } from "lib/supabase"; +import { useRouter } from "next/navigation"; +import { getSlugSuffix, slugifyString } from "lib/string"; +type Props = { + name: string; + email: string; + slug: string; +}; + +export default function SettingsForm({ name: initName, email: initEmail, slug }: Props) { + const [name, setName] = useState(initName); + const [email, setEmail] = useState(initEmail); + const [isLoading, setIsLoading] = useState(false); + const [resetIsLoading, setResetIsLoading] = useState(false); + const [resetSuccess, setResetSuccess] = useState(false); + const emailChanged = initEmail !== email; + const router = useRouter(); + const valuesChanged = emailChanged || name !== initName; + const slugSuffix = getSlugSuffix(slug); + + const handleSubmit = async (evt: FormEvent) => { + evt.preventDefault(); + + setIsLoading(true); + const putBody: UserPutBody = { + name, + }; + if (emailChanged) { + const { error } = await supabase.auth.updateUser({ email }); + if (error) { + setIsLoading(false); + console.error(error); + return false; + } + } + const response = await fetch("/api/user", { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(putBody), + }); + const data = await response.json(); + if (data.error) { + setIsLoading(false); + console.error(data.error); + } else { + setIsLoading(false); + router.refresh(); + } + }; + const resetPassword = async () => { + setResetIsLoading(true); + const { error } = await supabase.auth.resetPasswordForEmail(initEmail, { + redirectTo: "https://www.pubpub.org/reset", + }); + if (error) { + console.error(error); + } else { + setResetSuccess(true); + } + setResetIsLoading(false); + }; + + return ( + <> +
+
+ + setName(evt.target.value)} /> +
+ Username: {slugifyString(name)}-{slugSuffix} +
+ + setEmail(evt.target.value)} + /> + {emailChanged && ( +
+ You will need to confirm this change by clicking a link sent to the new + email address. +
+ )} + +
+

+ Click below to receive an email with a secure link for reseting yor password. +

+ {!resetSuccess && ( + + )} + {resetSuccess && ( +
+ Password reset email sent! Please check your inbox. +
+ )} +
+ + ); +} diff --git a/core/app/(user)/settings/page.tsx b/core/app/(user)/settings/page.tsx new file mode 100644 index 0000000000..dcc7f4b4ba --- /dev/null +++ b/core/app/(user)/settings/page.tsx @@ -0,0 +1,15 @@ +import SettingsForm from "./SettingsForm"; +import { getLoginData } from "lib/auth/loginData"; +import { notFound } from "next/navigation"; + +export default async function Page() { + const loginData = await getLoginData(); + if (!loginData) { + return notFound(); + } + return ( +
+ +
+ ); +} diff --git a/core/app/(user)/signup/SignupForm.tsx b/core/app/(user)/signup/SignupForm.tsx new file mode 100644 index 0000000000..a72930ed3d --- /dev/null +++ b/core/app/(user)/signup/SignupForm.tsx @@ -0,0 +1,86 @@ +"use client"; +import React, { useState, FormEvent } from "react"; +import { Button } from "ui"; +import { UserPostBody } from "app/api/user/route"; + +export default function SignupForm() { + const [name, setName] = useState(""); + const [password, setPassword] = useState(""); + const [email, setEmail] = useState(""); + const [isLoading, setIsLoading] = useState(false); + const [signupComplete, setSignupComplete] = useState(false); + + const handleSubmit = async (evt: FormEvent) => { + evt.preventDefault(); + + setIsLoading(true); + const postBody: UserPostBody = { + name, + password, + email, + }; + const response = await fetch("/api/user", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(postBody), + }); + const data = await response.json(); + if (data.error) { + setIsLoading(false); + console.error(data.error); + } else { + setIsLoading(false); + setSignupComplete(true); + } + }; + + return ( + <> + {!signupComplete && ( + <> +

Signup

+
+
+ + setName(evt.target.value)} + /> + + setEmail(evt.target.value)} + /> + + setPassword(evt.target.value)} + /> + +
+
+ + )} + {signupComplete && ( +
+

Welcome!

+
+ We've sent you a verification email - click the link in that message to + finish your signup. +
+
+ )} + + ); +} diff --git a/core/app/(user)/signup/page.tsx b/core/app/(user)/signup/page.tsx new file mode 100644 index 0000000000..1be8cffdd2 --- /dev/null +++ b/core/app/(user)/signup/page.tsx @@ -0,0 +1,15 @@ +import SignupForm from "./SignupForm"; +import { getLoginData } from "lib/auth/loginData"; + +export default async function Page() { + const loginData = await getLoginData(); + if (loginData) { + /* TODO: clean this up. Better alert status. */ + return
Currently logged in. Please logout to signup for a new account.
; + } + return ( +
+ +
+ ); +} diff --git a/core/public/logos/icon.svg b/core/public/logos/icon.svg new file mode 100644 index 0000000000..8a259b949d --- /dev/null +++ b/core/public/logos/icon.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file From 8e5f727956e6289bf3d2b7c35220452bc6a61e76 Mon Sep 17 00:00:00 2001 From: Gabriel Stein Date: Wed, 6 Sep 2023 16:47:54 -0400 Subject: [PATCH 3/8] add tailwind forms --- core/package.json | 1 + core/tailwind.config.js | 1 + pnpm-lock.yaml | 17 +++++++++++++++++ 3 files changed, 19 insertions(+) diff --git a/core/package.json b/core/package.json index 15c68a0267..914a714c04 100644 --- a/core/package.json +++ b/core/package.json @@ -42,6 +42,7 @@ "zod": "^3.21.4" }, "devDependencies": { + "@tailwindcss/forms": "^0.5.6", "@types/diacritics": "^1.3.1", "@types/jsonwebtoken": "^9.0.2", "@types/node": "20.3.1", diff --git a/core/tailwind.config.js b/core/tailwind.config.js index 76b14050fd..f97fea77ab 100644 --- a/core/tailwind.config.js +++ b/core/tailwind.config.js @@ -4,6 +4,7 @@ const sharedConfig = require("ui/tailwind.config.js"); module.exports = { presets: [sharedConfig], + plugins: [require("@tailwindcss/forms")], content: [ "./app/**/*.{ts,tsx}", // "../packages/ui/**/*.{js,ts,jsx,tsx}" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d65c70dbc4..8cf6103fa2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -96,6 +96,9 @@ importers: specifier: ^3.21.4 version: 3.21.4 devDependencies: + '@tailwindcss/forms': + specifier: ^0.5.6 + version: 0.5.6(tailwindcss@3.3.3) '@types/diacritics': specifier: ^1.3.1 version: 1.3.1 @@ -1968,6 +1971,15 @@ packages: tslib: 2.6.1 dev: false + /@tailwindcss/forms@0.5.6(tailwindcss@3.3.3): + resolution: {integrity: sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==} + peerDependencies: + tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1' + dependencies: + mini-svg-data-uri: 1.4.4 + tailwindcss: 3.3.3(ts-node@10.9.1) + dev: true + /@ts-rest/core@3.28.0(zod@3.21.4): resolution: {integrity: sha512-m0Wn2DgO3O57dsGT5fqxvF/WNFPx/8/dxbqLMV9TYXwLBgaJG4vDgR7qXVIYss/c5vlHTQ0oB9X+PwxhI3ksMg==} peerDependencies: @@ -4126,6 +4138,11 @@ packages: engines: {node: '>=4'} dev: true + /mini-svg-data-uri@1.4.4: + resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==} + hasBin: true + dev: true + /minim@0.23.8: resolution: {integrity: sha512-bjdr2xW1dBCMsMGGsUeqM4eFI60m94+szhxWys+B1ztIt6gWSfeGBdSVCIawezeHYLYn0j6zrsXdQS/JllBzww==} engines: {node: '>=6'} From af08d56cd5ab7e39e99503773d132a8c60259886 Mon Sep 17 00:00:00 2001 From: Gabriel Stein Date: Wed, 6 Sep 2023 16:52:55 -0400 Subject: [PATCH 4/8] remove dupe pages and move into (user) --- core/app/{ => (user)}/confirm/page.tsx | 0 core/app/login/LoginForm.tsx | 63 ------------------- core/app/reset/ResetForm.tsx | 63 ------------------- core/app/signup/SignupForm.tsx | 86 -------------------------- 4 files changed, 212 deletions(-) rename core/app/{ => (user)}/confirm/page.tsx (100%) delete mode 100644 core/app/login/LoginForm.tsx delete mode 100644 core/app/reset/ResetForm.tsx delete mode 100644 core/app/signup/SignupForm.tsx diff --git a/core/app/confirm/page.tsx b/core/app/(user)/confirm/page.tsx similarity index 100% rename from core/app/confirm/page.tsx rename to core/app/(user)/confirm/page.tsx diff --git a/core/app/login/LoginForm.tsx b/core/app/login/LoginForm.tsx deleted file mode 100644 index 45a552c4a6..0000000000 --- a/core/app/login/LoginForm.tsx +++ /dev/null @@ -1,63 +0,0 @@ -"use client"; -import React, { useState, FormEvent } from "react"; -import { Button } from "ui"; -import { supabase } from "lib/supabase"; -import Link from "next/link"; - -export default function LoginForm() { - const [password, setPassword] = useState(""); - const [email, setEmail] = useState(""); - const [isLoading, setIsLoading] = useState(false); - const [failure, setFailure] = useState(false); - - const handleSubmit = async (evt: FormEvent) => { - setIsLoading(true); - setFailure(false); - evt.preventDefault(); - const { data, error } = await supabase.auth.signInWithPassword({ - email, - password, - }); - if (error) { - setIsLoading(false); - setFailure(true); - } else if (data) { - window.location.href = "/"; - } - }; - - return ( - <> -

Login

-
-
- - setEmail(evt.target.value)} - /> - - setPassword(evt.target.value)} - /> - -
- - - Forgot Password - -
- {failure && ( -
Incorrect password or email
- )} -
-
- - ); -} diff --git a/core/app/reset/ResetForm.tsx b/core/app/reset/ResetForm.tsx deleted file mode 100644 index 662d82b01c..0000000000 --- a/core/app/reset/ResetForm.tsx +++ /dev/null @@ -1,63 +0,0 @@ -"use client"; -import React, { useState, FormEvent } from "react"; -import { Button } from "ui"; -import { supabase } from "lib/supabase"; -import { useRouter } from "next/navigation"; - -export default function ResetForm() { - const router = useRouter(); - const [password, setPassword] = useState(""); - const [isLoading, setIsLoading] = useState(false); - const [success, setSuccess] = useState(false); - const [failure, setFailure] = useState(false); - - const handleSubmit = async (evt: FormEvent) => { - setIsLoading(true); - setFailure(false); - evt.preventDefault(); - const { data, error } = await supabase.auth.updateUser({ - password, - }); - if (error) { - setIsLoading(false); - setFailure(true); - } else if (data) { - setIsLoading(false); - setSuccess(true); - router.refresh(); - setTimeout(() => { - router.push("/"); - }, 5000); - } - }; - - return ( - <> - {!success && ( -
-
- - setPassword(evt.target.value)} - /> - - {failure && ( -
Error reseting password
- )} -
-
- )} - {success && ( -
-
Success - password reset!
-
Redirecting in 5 seconds...
-
- )} - - ); -} diff --git a/core/app/signup/SignupForm.tsx b/core/app/signup/SignupForm.tsx deleted file mode 100644 index a72930ed3d..0000000000 --- a/core/app/signup/SignupForm.tsx +++ /dev/null @@ -1,86 +0,0 @@ -"use client"; -import React, { useState, FormEvent } from "react"; -import { Button } from "ui"; -import { UserPostBody } from "app/api/user/route"; - -export default function SignupForm() { - const [name, setName] = useState(""); - const [password, setPassword] = useState(""); - const [email, setEmail] = useState(""); - const [isLoading, setIsLoading] = useState(false); - const [signupComplete, setSignupComplete] = useState(false); - - const handleSubmit = async (evt: FormEvent) => { - evt.preventDefault(); - - setIsLoading(true); - const postBody: UserPostBody = { - name, - password, - email, - }; - const response = await fetch("/api/user", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(postBody), - }); - const data = await response.json(); - if (data.error) { - setIsLoading(false); - console.error(data.error); - } else { - setIsLoading(false); - setSignupComplete(true); - } - }; - - return ( - <> - {!signupComplete && ( - <> -

Signup

-
-
- - setName(evt.target.value)} - /> - - setEmail(evt.target.value)} - /> - - setPassword(evt.target.value)} - /> - -
-
- - )} - {signupComplete && ( -
-

Welcome!

-
- We've sent you a verification email - click the link in that message to - finish your signup. -
-
- )} - - ); -} From 95689c72b76eb961207d610db62c7a2d090fd99e Mon Sep 17 00:00:00 2001 From: Gabriel Stein Date: Thu, 7 Sep 2023 12:41:01 -0400 Subject: [PATCH 5/8] cleanup some form styling --- core/app/(user)/login/LoginForm.tsx | 32 ++++++++++-------- core/app/(user)/signup/SignupForm.tsx | 47 ++++++++++++++++----------- 2 files changed, 47 insertions(+), 32 deletions(-) diff --git a/core/app/(user)/login/LoginForm.tsx b/core/app/(user)/login/LoginForm.tsx index 45a552c4a6..7762006776 100644 --- a/core/app/(user)/login/LoginForm.tsx +++ b/core/app/(user)/login/LoginForm.tsx @@ -31,19 +31,25 @@ export default function LoginForm() {

Login

- - setEmail(evt.target.value)} - /> - - setPassword(evt.target.value)} - /> +

+ + setEmail(evt.target.value)} + /> +

+

+ + setPassword(evt.target.value)} + /> +

); } diff --git a/core/app/(user)/login/LoginForm.tsx b/core/app/(user)/login/LoginForm.tsx index 7762006776..3eb60c863b 100644 --- a/core/app/(user)/login/LoginForm.tsx +++ b/core/app/(user)/login/LoginForm.tsx @@ -27,32 +27,43 @@ export default function LoginForm() { }; return ( - <> -

Login

+
+

Login

-

+

+
+
setEmail(evt.target.value)} /> -

-

+

+
+
+
setPassword(evt.target.value)} /> -

+
-
- @@ -64,6 +75,6 @@ export default function LoginForm() { )}
- +
); } From e5b0ee372cfca3c29006790372642f1663da19d7 Mon Sep 17 00:00:00 2001 From: Gabriel Stein Date: Fri, 8 Sep 2023 13:25:22 -0400 Subject: [PATCH 7/8] snazzify signup --- core/app/(user)/login/LoginForm.tsx | 2 +- core/app/(user)/signup/SignupForm.tsx | 44 ++++++++++++++++----------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/core/app/(user)/login/LoginForm.tsx b/core/app/(user)/login/LoginForm.tsx index 3eb60c863b..5f3a95fa9f 100644 --- a/core/app/(user)/login/LoginForm.tsx +++ b/core/app/(user)/login/LoginForm.tsx @@ -28,7 +28,7 @@ export default function LoginForm() { return (
-

Login

+

Login

diff --git a/core/app/(user)/signup/SignupForm.tsx b/core/app/(user)/signup/SignupForm.tsx index 2840f186df..87d5b3b4a4 100644 --- a/core/app/(user)/signup/SignupForm.tsx +++ b/core/app/(user)/signup/SignupForm.tsx @@ -35,48 +35,58 @@ export default function SignupForm() { }; return ( - <> +
{!signupComplete && ( <> -

Signup

+

Signup

-

+

+
+
setName(evt.target.value)} /> -

-

+

+
+
+
setEmail(evt.target.value)} /> -

-

+

+
+
+
setPassword(evt.target.value)} /> -

- +
+
+ +
@@ -90,6 +100,6 @@ export default function SignupForm() {
)} - +
); } From 68483e81ad08ef34ea13a3b8b223755221b9ff91 Mon Sep 17 00:00:00 2001 From: Gabriel Stein Date: Fri, 8 Sep 2023 14:50:38 -0400 Subject: [PATCH 8/8] snazzify forgot form --- core/app/(user)/forgot/ForgotForm.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/core/app/(user)/forgot/ForgotForm.tsx b/core/app/(user)/forgot/ForgotForm.tsx index 311bb5e370..d2d7554dc8 100644 --- a/core/app/(user)/forgot/ForgotForm.tsx +++ b/core/app/(user)/forgot/ForgotForm.tsx @@ -26,15 +26,19 @@ export default function ForgotForm() { }; return ( - <> +
{!success && ( <>

Enter your email below to receive a secure link for reseting yor password.

-
-
+
+ setEmail(evt.target.value)} placeholder="example@mail.com" @@ -54,6 +58,6 @@ export default function ForgotForm() { Password reset email sent! Please check your inbox.
)} - +
); }