From 29a8251621310faba92ec621c07684f6418b3fc6 Mon Sep 17 00:00:00 2001 From: Kilian Date: Tue, 11 Jun 2024 14:26:39 +0200 Subject: [PATCH] Restructure login page --- ui/package.json | 1 + ui/src/app/login/components/LoginForm.tsx | 84 ---------------------- ui/src/app/login/components/SignInForm.tsx | 70 ++++++++++++++++++ ui/src/app/login/page.tsx | 24 +++++-- ui/src/middleware.ts | 4 ++ ui/src/utils/auth.ts | 1 + ui/styles/tailwind.css | 71 +++++------------- ui/tailwind.config.js | 3 + ui/yarn.lock | 2 +- 9 files changed, 117 insertions(+), 143 deletions(-) delete mode 100644 ui/src/app/login/components/LoginForm.tsx create mode 100644 ui/src/app/login/components/SignInForm.tsx create mode 100644 ui/src/middleware.ts diff --git a/ui/package.json b/ui/package.json index 13fd9ea..9cd64b1 100644 --- a/ui/package.json +++ b/ui/package.json @@ -23,6 +23,7 @@ "react-dom": "^18", "react-query": "^3.39.3", "react-redux": "^9.1.2", + "redux": "^5.0.1", "redux-devtools-extension": "^2.13.9", "redux-thunk": "^3.1.0", "tailwindcss": "^3.4.3", diff --git a/ui/src/app/login/components/LoginForm.tsx b/ui/src/app/login/components/LoginForm.tsx deleted file mode 100644 index 592c937..0000000 --- a/ui/src/app/login/components/LoginForm.tsx +++ /dev/null @@ -1,84 +0,0 @@ -"use client"; - -import React, { useRef } from "react"; -import { - Button, - Input, - Gradient, - Text, - Socials, - Box, - Stack, - Password, - Row, -} from "../../../components/ui"; -import Credentials from "next-auth/providers/credentials"; -import { signIn } from "next-auth/react"; -import { useRouter } from "next/navigation"; - -type Props = { - className?: string | null; - callbackUrl?: string | null; - error?: string | null; -}; - -const LoginForm = (props: Props) => { - const router = useRouter(); - const email = useRef(""); - const password = useRef(""); - const onSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - const result = await signIn("credentials", { - email: email.current, - password: password.current, - redirect: false, - }); - if (!result?.error) { - router.push(props.callbackUrl ?? "/"); - } - }; - return ( - - - Sign in - -
- - Email - - - (email.current = e.target.value) - } - /> - - - Password - - - forgot password? - - - - (password.current = e.target.value) - } - /> - - -
- ); -}; - -export default LoginForm; diff --git a/ui/src/app/login/components/SignInForm.tsx b/ui/src/app/login/components/SignInForm.tsx new file mode 100644 index 0000000..25171cd --- /dev/null +++ b/ui/src/app/login/components/SignInForm.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { Text, Input, Row, Password, Button } from "../../../components/ui"; +import React, { useRef } from "react"; +import { signIn } from "next-auth/react"; +import { useRouter } from "next/navigation"; + +type Props = { + className?: string | null; + callbackUrl?: string | null; + error?: string | null; +}; + +export default function SignInForm(props: Props) { + const router = useRouter(); + const email = useRef(""); + const password = useRef(""); + + const onSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + const result = await signIn("credentials", { + email: email.current, + password: password.current, + redirect: false, + }); + if (!result?.error) { + router.push(props.callbackUrl ?? "/"); + } + console.log(result); + }; + return ( +
+ + Email + + + (email.current = e.target.value) + } + /> + + + Password + + + forgot password? + + + + (password.current = e.target.value) + } + /> + + + ); +} diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx index 6123bd4..59eb618 100644 --- a/ui/src/app/login/page.tsx +++ b/ui/src/app/login/page.tsx @@ -10,14 +10,26 @@ import { Row, } from "../../components/ui"; import React from "react"; -import LoginForm from "./components/LoginForm"; +import SignInForm from "./components/SignInForm"; export default function Login() { return ( - - - - - + + + + + + Sign in + + + + + + + + UUG.AI + + + ); } diff --git a/ui/src/middleware.ts b/ui/src/middleware.ts new file mode 100644 index 0000000..f55b229 --- /dev/null +++ b/ui/src/middleware.ts @@ -0,0 +1,4 @@ +export { default } from "next-auth/middleware"; +export const config = { + matcher: ["/dashboard"], +}; diff --git a/ui/src/utils/auth.ts b/ui/src/utils/auth.ts index e7b3224..7eca6f0 100644 --- a/ui/src/utils/auth.ts +++ b/ui/src/utils/auth.ts @@ -20,6 +20,7 @@ export const authOptions: NextAuthOptions = { // If no error and we have user data, return it if (res.ok && user) { + console.log(res); return user; } // Return null if user data could not be retrieved diff --git a/ui/styles/tailwind.css b/ui/styles/tailwind.css index 9a238c3..c6bf23a 100644 --- a/ui/styles/tailwind.css +++ b/ui/styles/tailwind.css @@ -787,6 +787,10 @@ video { height: 2rem; } +.h-auto { + height: auto; +} + .h-full { height: 100%; } @@ -840,18 +844,10 @@ video { max-width: 65ch; } -.flex-shrink { - flex-shrink: 1; -} - .shrink { flex-shrink: 1; } -.flex-grow { - flex-grow: 1; -} - .grow { flex-grow: 1; } @@ -878,12 +874,6 @@ video { touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } -.select-all { - -webkit-user-select: all; - -moz-user-select: all; - user-select: all; -} - .resize { resize: both; } @@ -912,6 +902,10 @@ video { justify-content: flex-end; } +.justify-center { + justify-content: center; +} + .justify-between { justify-content: space-between; } @@ -958,10 +952,6 @@ video { --tw-divide-x-reverse: 1; } -.self-start { - align-self: flex-start; -} - .self-end { align-self: flex-end; } @@ -992,10 +982,6 @@ video { text-wrap: wrap; } -.break-all { - word-break: break-all; -} - .rounded { border-radius: 0.25rem; } @@ -1205,10 +1191,6 @@ video { padding: 2rem; } -.p-4 { - padding: 1rem; -} - .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1255,10 +1237,6 @@ video { text-align: right; } -.text-justify { - text-align: justify; -} - .indent-2 { text-indent: 0.5rem; } @@ -1377,11 +1355,6 @@ video { font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } -.stacked-fractions { - --tw-numeric-fraction: stacked-fractions; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} - .leading-10 { line-height: 2.5rem; } @@ -1416,9 +1389,9 @@ video { color: rgb(23 37 84 / .9); } -.text-red-500 { +.text-white { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .underline { @@ -1469,9 +1442,15 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-inner { - --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); +.shadow-\[inset_0_-2px_4px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] { + --tw-shadow: inset 0 -2px 4px rgba(0,0,0,0.6); + --tw-shadow-colored: inset 0 -2px 4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-inner-right { + --tw-shadow: inset -5px 0 5px -5px rgba(0, 0, 0, 0.5); + --tw-shadow-colored: inset -5px 0 5px -5px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -1571,18 +1550,6 @@ video { transition-duration: 300ms; } -.ease-in { - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.ease-out { - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); -} - .placeholder\:opacity-0::-moz-placeholder { opacity: 0; } diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 2ead70b..7f855d9 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -23,6 +23,9 @@ module.exports = { "3/4": "75%", full: "100%", }, + boxShadow: { + "inner-right": "inset -5px 0 5px -5px rgba(0, 0, 0, 0.5)", // Adjust values as needed + }, }, }, plugins: [], diff --git a/ui/yarn.lock b/ui/yarn.lock index 21c7832..ce7362a 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -2880,7 +2880,7 @@ resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406" integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ== -"@uug-ai/ui@^1.0.34": +"@uug-ai/ui@1.0.34": version "1.0.34" resolved "https://registry.yarnpkg.com/@uug-ai/ui/-/ui-1.0.34.tgz#473b67825631993154f667fa00ac9842c26dae1a" integrity sha512-TojkW5o3QlrctQBnC1B+C16kexfoCbypW4jHFjHW6IrooS/qH/poWnkAAGzj/U2hqGC1LL/Y4nvz2kyagjn5oQ==