Skip to content

Commit

Permalink
Restructure login page
Browse files Browse the repository at this point in the history
  • Loading branch information
KilianBoute committed Jun 11, 2024
1 parent 2ac2988 commit 29a8251
Show file tree
Hide file tree
Showing 9 changed files with 117 additions and 143 deletions.
1 change: 1 addition & 0 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
84 changes: 0 additions & 84 deletions ui/src/app/login/components/LoginForm.tsx

This file was deleted.

70 changes: 70 additions & 0 deletions ui/src/app/login/components/SignInForm.tsx
Original file line number Diff line number Diff line change
@@ -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<HTMLFormElement>) => {
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 (
<form onSubmit={onSubmit} className="w-full">
<Text as="label" htmlFor="email" weight="semibold" className="mb-1">
Email
</Text>
<Input
type="text"
name="email"
id="email"
placeholder="email"
className="mb-4 h-auto"
required
onChange={(e: { target: { value: string } }) =>
(email.current = e.target.value)
}
/>
<Row className="mb justify-between">
<Text as="label" htmlFor="password" weight="semibold">
Password
</Text>
<Text as="a" variant="link" color="light">
forgot password?
</Text>
</Row>
<Password
name="password"
id="password"
placeholder="password"
className="mb-4"
required
onChange={(e: { target: { value: string } }) =>
(password.current = e.target.value)
}
/>
<Button type="submit" name="Sign in" variant="solid" width="third">
Sign in
</Button>
</form>
);
}
24 changes: 18 additions & 6 deletions ui/src/app/login/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Box className="shadow-inner min-h-screen min-w-fit max-w-96 w-4/12 flex flex-col items-start bg-primary-50/15">
<Gradient />
<LoginForm />
<Socials className="mt-auto self-center justify-self-end p-8" />
</Box>
<Row>
<Box className="shadow-inner-right min-h-screen min-w-fit max-w-96 w-4/12 flex flex-col items-start bg-primary-50/15">
<Gradient />
<Stack className="p-8 ">
<Text as="h1" size="5xl" weight="semibold" className="pb-8">
Sign in
</Text>
<SignInForm />
</Stack>
<Socials className="mt-auto self-center justify-self-end p-8" />
</Box>
<Box className="bg-primary-950 flex justify-center items-center w-full">
<Text as="h2" size="5xl" className="text-white p-8">
UUG.AI
</Text>
</Box>
</Row>
);
}
4 changes: 4 additions & 0 deletions ui/src/middleware.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export { default } from "next-auth/middleware";
export const config = {
matcher: ["/dashboard"],
};
1 change: 1 addition & 0 deletions ui/src/utils/auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
71 changes: 19 additions & 52 deletions ui/styles/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -787,6 +787,10 @@ video {
height: 2rem;
}

.h-auto {
height: auto;
}

.h-full {
height: 100%;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -912,6 +902,10 @@ video {
justify-content: flex-end;
}

.justify-center {
justify-content: center;
}

.justify-between {
justify-content: space-between;
}
Expand Down Expand Up @@ -958,10 +952,6 @@ video {
--tw-divide-x-reverse: 1;
}

.self-start {
align-self: flex-start;
}

.self-end {
align-self: flex-end;
}
Expand Down Expand Up @@ -992,10 +982,6 @@ video {
text-wrap: wrap;
}

.break-all {
word-break: break-all;
}

.rounded {
border-radius: 0.25rem;
}
Expand Down Expand Up @@ -1205,10 +1191,6 @@ video {
padding: 2rem;
}

.p-4 {
padding: 1rem;
}

.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
Expand Down Expand Up @@ -1255,10 +1237,6 @@ video {
text-align: right;
}

.text-justify {
text-align: justify;
}

.indent-2 {
text-indent: 0.5rem;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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;
}
Expand Down
3 changes: 3 additions & 0 deletions ui/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [],
Expand Down
2 changes: 1 addition & 1 deletion ui/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]":
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==
Expand Down

0 comments on commit 29a8251

Please sign in to comment.