From 2bd01ce7f5d4cfaeb5944d5c5e84ae22d4e1a52d Mon Sep 17 00:00:00 2001 From: Angelo Reale <12191809+angeloreale@users.noreply.github.com> Date: Wed, 7 Feb 2024 16:21:49 +0100 Subject: [PATCH 1/3] ar(feat) signuppage:design-system --- lib/auth/constants.ts | 11 +- middleware.ts | 0 next.config.js | 10 +- public/logo.svg | 174 ++++++++++++++++++ public/next.svg | 1 - public/vercel.svg | 1 - src/app/components/client/index.ts | 2 + src/app/components/client/navbar-view.tsx | 10 +- src/app/components/client/signin-view.tsx | 2 +- src/app/components/client/signup-view.tsx | 137 ++++++++++++++ .../components/client/usersettings-view.tsx | 58 ++++++ src/app/components/index.ts | 3 +- src/app/components/navbar.tsx | 14 +- src/app/components/server/index.ts | 2 + .../components/server/signup-controller.tsx | 38 ++++ .../server/usersettings-controller.tsx | 22 +++ src/app/components/signin.tsx | 7 - .../system/atoms/button/_components.tsx | 8 - .../components/system/atoms/button/button.tsx | 9 + .../atoms/button/client/button-view.tsx | 28 ++- .../button/{ => client}/button.module.css | 0 .../components/system/atoms/button/index.ts | 6 +- .../atoms/button/server/button-controller.tsx | 26 +-- .../system/atoms/button/server/index.ts | 4 +- src/app/components/system/atoms/index.ts | 2 +- src/app/components/toolbar.tsx | 10 + src/app/components/topnav.tsx | 14 ++ src/app/page.tsx | 16 +- src/app/signin/page.tsx | 75 +++++++- src/app/styles/components/navbar.module.css | 2 + src/app/styles/page.module.css | 4 +- tsconfig.json | 4 +- 32 files changed, 609 insertions(+), 91 deletions(-) create mode 100644 middleware.ts create mode 100644 public/logo.svg delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg create mode 100644 src/app/components/client/signup-view.tsx create mode 100644 src/app/components/client/usersettings-view.tsx create mode 100644 src/app/components/server/signup-controller.tsx create mode 100644 src/app/components/server/usersettings-controller.tsx delete mode 100644 src/app/components/signin.tsx delete mode 100644 src/app/components/system/atoms/button/_components.tsx create mode 100644 src/app/components/system/atoms/button/button.tsx rename src/app/components/system/atoms/button/{ => client}/button.module.css (100%) create mode 100644 src/app/components/toolbar.tsx create mode 100644 src/app/components/topnav.tsx diff --git a/lib/auth/constants.ts b/lib/auth/constants.ts index 8f40e64..685fc54 100644 --- a/lib/auth/constants.ts +++ b/lib/auth/constants.ts @@ -8,15 +8,15 @@ import { initUser } from '@controller'; export const authOptions: AuthOptions = { // Configure one or more authentication providers providers: [ - GithubProvider({ - clientId: process.env.GITHUB_ID as string, - clientSecret: process.env.GITHUB_SECRET as string, - }), EmailProvider({ server: process.env.EMAIL_SERVER as string, from: process.env.EMAIL_FROM as string, // maxAge: 24 * 60 * 60, // How long email links are valid for (default 24h) }), + GithubProvider({ + clientId: process.env.GITHUB_ID as string, + clientSecret: process.env.GITHUB_SECRET as string, + }), InstagramProvider({ clientId: process.env.INSTAGRAM_CLIENT_ID, clientSecret: process.env.INSTAGRAM_CLIENT_SECRET, @@ -35,7 +35,8 @@ export const authOptions: AuthOptions = { } }, }, - callbacks: {}, + callbacks: { + }, pages: { // signIn: "/signin", signOut: '/', diff --git a/middleware.ts b/middleware.ts new file mode 100644 index 0000000..e69de29 diff --git a/next.config.js b/next.config.js index 8cea29c..7ce1f8b 100644 --- a/next.config.js +++ b/next.config.js @@ -12,11 +12,11 @@ const nextConfig = { }, async redirects() { return [ - { - source: '/signin', - destination: '/api/auth/signin', - permanent: false, - }, + // { + // source: '/signin', + // destination: '/api/auth/signin', + // permanent: false, + // }, ]; }, }; diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..60ecd00 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/components/client/index.ts b/src/app/components/client/index.ts index 9454352..88f93bd 100644 --- a/src/app/components/client/index.ts +++ b/src/app/components/client/index.ts @@ -1,5 +1,7 @@ // index.ts 'use client'; export { VNavBar } from './navbar-view'; +export { VUserSettings } from './usersettings-view'; export { VSignIn } from './signin-view'; +export { VSignUp } from './signup-view'; export { VList } from './list-view'; diff --git a/src/app/components/client/navbar-view.tsx b/src/app/components/client/navbar-view.tsx index 513e948..4000f5f 100644 --- a/src/app/components/client/navbar-view.tsx +++ b/src/app/components/client/navbar-view.tsx @@ -38,18 +38,18 @@ export const VNavBar = () => { // if (typeof session === "undefined") return Loading...; - if (authd) + if (!authd) return ( - My account + Services - Profile - Language settings - Log out + Rick and Morty + Image uploader + Image tagger ); diff --git a/src/app/components/client/signin-view.tsx b/src/app/components/client/signin-view.tsx index 81043a9..4598194 100644 --- a/src/app/components/client/signin-view.tsx +++ b/src/app/components/client/signin-view.tsx @@ -15,7 +15,7 @@ interface IAuthProvider { interface VSignInProps { providers: IAuthProvider[]; - user?: UserSchema; + user: UserSchema; } async function doSignOut() { diff --git a/src/app/components/client/signup-view.tsx b/src/app/components/client/signup-view.tsx new file mode 100644 index 0000000..45f513f --- /dev/null +++ b/src/app/components/client/signup-view.tsx @@ -0,0 +1,137 @@ +// signup-view.ts +'use client'; +import { useContext, useEffect, useRef, useState } from 'react'; +import { useSession, signOut } from 'next-auth/react'; +import { AuthContext } from '@state'; +import { ALogIn, ALogOut } from '@actions'; +import { navigate } from '@gateway'; +import { UserSchema } from '@types'; +import { Button } from "@atoms" +// import { ButtonView as NButton } from '@atoms/Button'; + +interface IAuthProvider { + id?: string; + name?: string; +} + +interface VSignInProps { + providers: IAuthProvider[]; + user?: UserSchema; +} + +async function doSignOut() { + await signOut(); +} + +export const VSignUp = ({ providers, user, csrf }: VSignInProps) => { + const authContext = useContext(AuthContext); + const { data: session } = useSession(); + const [isUserLoaded, loadUser] = ALogIn({}); + const [, unloadUser] = ALogOut({}); + const initd = useRef(false); + const prov = providers + const { authd, name } = authContext; + const [email, setEmail] = useState(""); + + const callbackUrl = process.env.NEXT_PUBLIC_NEXUS_BASE_PATH + process.env.NEXT_PUBLIC_NEXUS_LOGIN_REDIRECT_PATH + + console.log({ prov }) + if (!prov) return + + // console.log({ NButton }) + + /* server/client isomorphism */ + const coercedName = name || user?.name || user?.email; + + useEffect(() => { + if (!isUserLoaded && session?.user && !initd.current) { + loadUser({ + authd: true, + name: session.user.name, + avatar: session.user.image, + email: session.user.email, + }); + initd.current = true; + } + }, [session, isUserLoaded, loadUser]); + + const handleSignOut = async () => { + unloadUser(); + await doSignOut(); + }; + + // if (!providers) return; + + // if (user || authd) + // return ( + // + // Welcome, {coercedName} + // + // ) + return
+ {Object.values(providers).map((provider) => ( +
+ {provider.type === "email" && ( +
+ + + + +
+ )} + {provider.type === "oauth" && ( +
+ + {callbackUrl && ( + + )} + +
+ )} +
+ + ))} +
; +}; diff --git a/src/app/components/client/usersettings-view.tsx b/src/app/components/client/usersettings-view.tsx new file mode 100644 index 0000000..cf17665 --- /dev/null +++ b/src/app/components/client/usersettings-view.tsx @@ -0,0 +1,58 @@ +// usersettings-view.tsx +'use client'; +import { useContext, useEffect, useRef } from 'react'; +import { useSession, signOut } from 'next-auth/react'; +import { AuthContext } from '@state'; +import {} from '@actions'; +import { navigate } from '@gateway'; + +import { Dropdown } from '@mui/base/Dropdown'; +import { MenuButton } from '@mui/base/MenuButton'; +import { Menu } from '@mui/base/Menu'; +import { MenuItem } from '@mui/base/MenuItem'; + +import navbarStyles from '@styles/components/navbar.module.css'; + +interface VUserSettings { +} + +export const VUserSettings = () => { + const authContext = useContext(AuthContext); + const { data: session } = useSession(); + const initd = useRef(false); + + const { authd, name } = authContext; + + useEffect(() => { + if (true) { + initd.current = true; + } + }, []); + + const handleSignOut = async () => { + // unloadUser(); + // await doSignOut(); + }; + + // if (!providers) return; + + // if (typeof session === "undefined") return Loading...; + + if (!authd) + return ( + + My account + + Profile + Language settings + Log out + + + ); + + // return ; +}; diff --git a/src/app/components/index.ts b/src/app/components/index.ts index fe32e49..fb3ff87 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -1,4 +1,5 @@ // index.ts +export { TopNav } from './topnav'; export { NavBar } from './navbar'; -export { SignIn } from './signin'; +export { ToolBar } from './toolbar'; export { List } from './list'; diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx index 0939349..8862427 100644 --- a/src/app/components/navbar.tsx +++ b/src/app/components/navbar.tsx @@ -1,15 +1,7 @@ -// navbar.tsx +// signin.tsx 'use server'; -import { CSignIn, CNavBar } from '@components/server'; -import { SignIn } from '@components'; -import styles from '@styles/list.module.css'; -import navbarStyles from '@styles/components/navbar.module.css'; +import { CNavBar } from '@components/server'; export const NavBar = () => { - return ( -
- - -
- ); + return ; }; diff --git a/src/app/components/server/index.ts b/src/app/components/server/index.ts index b7130d8..6af4d2e 100644 --- a/src/app/components/server/index.ts +++ b/src/app/components/server/index.ts @@ -1,4 +1,6 @@ // index.ts export { CNavBar } from './navbar-controller'; +export { CUserSettings } from './usersettings-controller'; export { CSignIn } from './signin-controller'; +export { CSignUp } from './signup-controller'; export { CList } from './list-controller'; diff --git a/src/app/components/server/signup-controller.tsx b/src/app/components/server/signup-controller.tsx new file mode 100644 index 0000000..394c403 --- /dev/null +++ b/src/app/components/server/signup-controller.tsx @@ -0,0 +1,38 @@ +// signup-controller.ts +'use server'; +import { cookies } from 'next/headers'; +import type { UserSchema } from '@types'; +import { getProviders, getCsrfToken } from 'next-auth/react'; +import { VSignUp } from '@components/client'; + + +interface ISignInProps { + user?: UserSchema; +} + +interface ISignInData { + providers?: IAuthProviders[]; + redirect?: { + destination?: string; + }; +} + +interface IAuthProviders { + id?: string; + name?: string; +} + +async function getProvidersData(): Promise { + const providers = (await getProviders()) as unknown as IAuthProviders[]; + return { providers: providers ?? [] }; +} + +export const CSignUp = async ({ user }: ISignInProps) => { + cookies(); + const csrf = await getCsrfToken() + const props: ISignInData = await getProvidersData() + const providers: IAuthProviders[] = props?.providers || [] + + + return +} diff --git a/src/app/components/server/usersettings-controller.tsx b/src/app/components/server/usersettings-controller.tsx new file mode 100644 index 0000000..1633255 --- /dev/null +++ b/src/app/components/server/usersettings-controller.tsx @@ -0,0 +1,22 @@ +// usersettings-controller.tsx +'use server'; +import type { IFeature, UserSchema } from '@types'; +import { getUser } from '@gateway'; +import { VUserSettings } from '@components/client'; + +interface INavBarData { + user: UserSchema; +} + +async function getEnabledFeatures(): Promise { + const user = await getUser(); + const logged = !user; + + return user; +} + +export const CUserSettings = async () => { + const props: INavBarData = await getEnabledFeatures(); + // const features: IAuthProviders[] = props?.features || []; + return ; +}; diff --git a/src/app/components/signin.tsx b/src/app/components/signin.tsx deleted file mode 100644 index 541c22a..0000000 --- a/src/app/components/signin.tsx +++ /dev/null @@ -1,7 +0,0 @@ -// signin.tsx -'use server'; -import { CSignIn } from '@components/server'; - -export const SignIn = () => { - return ; -}; diff --git a/src/app/components/system/atoms/button/_components.tsx b/src/app/components/system/atoms/button/_components.tsx deleted file mode 100644 index 8519c34..0000000 --- a/src/app/components/system/atoms/button/_components.tsx +++ /dev/null @@ -1,8 +0,0 @@ -// @atoms/button.tsx -'use server'; -import ServerComponent from './server'; - -export const Component = async () => { - // return <>Lorem - return ; -}; diff --git a/src/app/components/system/atoms/button/button.tsx b/src/app/components/system/atoms/button/button.tsx new file mode 100644 index 0000000..7c61b78 --- /dev/null +++ b/src/app/components/system/atoms/button/button.tsx @@ -0,0 +1,9 @@ +// button.tsx +'use server'; +import { NCButton } from './server'; + +export const Button = () => { + return
+ +
; +}; diff --git a/src/app/components/system/atoms/button/client/button-view.tsx b/src/app/components/system/atoms/button/client/button-view.tsx index 370907d..0009fec 100644 --- a/src/app/components/system/atoms/button/client/button-view.tsx +++ b/src/app/components/system/atoms/button/client/button-view.tsx @@ -1,11 +1,29 @@ // @atoms/button-view.tsx 'use client'; -// import styles from "./button.module.css" +import styles from "./button.module.css" -interface VButtonProps {} +type positionCenter = "center" +type positionX = "left" | "right" +type positionY = "top" | "bottom" +type themes = "light" | "dark" -export const NVButton = ({}: VButtonProps) => { +type position = positionCenter | positionX | positionY + +interface IButtonIcon { + position: "left" | "right"; + size: positionX; + theme: themes +} + +interface VButtonProps { + children: React.Component; + variant : "solid" | "outline"; + theme : "light" | "dark"; + onClick : (e: HTMLClickEvent) => void; + icon: IButtonIcon +} + +export const NVButton = ({ children, onClick, variant, theme, icon }: VButtonProps) => { /* remember server/client isomorphism */ - console.log('render button'); - return ; + return ; }; diff --git a/src/app/components/system/atoms/button/button.module.css b/src/app/components/system/atoms/button/client/button.module.css similarity index 100% rename from src/app/components/system/atoms/button/button.module.css rename to src/app/components/system/atoms/button/client/button.module.css diff --git a/src/app/components/system/atoms/button/index.ts b/src/app/components/system/atoms/button/index.ts index b45324d..3da7845 100644 --- a/src/app/components/system/atoms/button/index.ts +++ b/src/app/components/system/atoms/button/index.ts @@ -1,6 +1,2 @@ // index.ts -/** @jsx nexusComponents */ -import nexusComponents from '@pragmas/adapters'; - -export { NButton } from './server'; -import { NButtonView } from './client'; +export { NVButton as Button } from './client'; diff --git a/src/app/components/system/atoms/button/server/button-controller.tsx b/src/app/components/system/atoms/button/server/button-controller.tsx index 2ec95de..7a4312a 100644 --- a/src/app/components/system/atoms/button/server/button-controller.tsx +++ b/src/app/components/system/atoms/button/server/button-controller.tsx @@ -1,16 +1,16 @@ -// @atoms/button-controller.ts -'use server'; -// import "server-only" +// // @atoms/button-controller.ts +// 'use server'; +// // import "server-only" -// import type { UserSchema } from "@types" -// import { NVButton } from "./button-view"; +// // import type { UserSchema } from "@types" +// // import { NVButton } from "./button-view"; -interface NCButtonProps {} +// interface NCButtonProps {} -export const NCButton = async ({}: NCButtonProps) => { - console.log('--- button controller'); - // const props: ISignInData = await getProvidersData(); - // const providers: IAuthProviders[] = props?.providers || []; - return
LOREM SERVER
; - // return ; -}; +// export const NCButton = async ({}: NCButtonProps) => { +// console.log('--- button controller'); +// // const props: ISignInData = await getProvidersData(); +// // const providers: IAuthProviders[] = props?.providers || []; +// return
LOREM SERVER
; +// // return ; +// }; diff --git a/src/app/components/system/atoms/button/server/index.ts b/src/app/components/system/atoms/button/server/index.ts index 2b57f4d..996545f 100644 --- a/src/app/components/system/atoms/button/server/index.ts +++ b/src/app/components/system/atoms/button/server/index.ts @@ -1,2 +1,2 @@ -// @atoms/button/server/index.ts -export { NCButton } from './button-controller'; +// // @atoms/button/server/index.ts +// export { NCButton } from './button-controller'; diff --git a/src/app/components/system/atoms/index.ts b/src/app/components/system/atoms/index.ts index dc1363a..35163b1 100644 --- a/src/app/components/system/atoms/index.ts +++ b/src/app/components/system/atoms/index.ts @@ -1,2 +1,2 @@ // @atoms/index.ts -export NButton from './button' \ No newline at end of file +export { Button } from './button' \ No newline at end of file diff --git a/src/app/components/toolbar.tsx b/src/app/components/toolbar.tsx new file mode 100644 index 0000000..5a97727 --- /dev/null +++ b/src/app/components/toolbar.tsx @@ -0,0 +1,10 @@ +// signin.tsx +'use server'; +import { CSignIn, CUserSettings } from '@components/server'; + +export const ToolBar = () => { + return
+ + +
; +}; diff --git a/src/app/components/topnav.tsx b/src/app/components/topnav.tsx new file mode 100644 index 0000000..4182986 --- /dev/null +++ b/src/app/components/topnav.tsx @@ -0,0 +1,14 @@ +// navbar.tsx +'use server'; +import { ToolBar, NavBar } from '@components'; +import styles from '@styles/list.module.css'; +import navbarStyles from '@styles/components/navbar.module.css'; + +export const TopNav = () => { + return ( +
+ + +
+ ); +}; diff --git a/src/app/page.tsx b/src/app/page.tsx index 382439b..d1c60f5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,26 +1,16 @@ import Image from 'next/image'; import styles from '@styles/page.module.css'; -import { NavBar, List } from '@components'; +import { TopNav, List } from '@components'; export default function Home() { return (
- - +
- Next.js Logo + Next.js Logo
diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx index 2892e48..7a257f3 100644 --- a/src/app/signin/page.tsx +++ b/src/app/signin/page.tsx @@ -3,7 +3,7 @@ import { getProviders } from 'next-auth/react'; import { getServerSession } from 'next-auth/next'; import { authOptions } from '@auth'; -import { VSignIn } from '@components/client'; +import { VSignUp } from '@components/client'; interface ISignInData { providers?: IAuthProviders[]; @@ -32,8 +32,77 @@ async function getProvidersData(): Promise { return { providers: providers ?? [] }; } -export default async function SignIn() { +export default async function SignUp() { const props: ISignInData = await getProvidersData(); const providers: IAuthProviders[] = props?.providers || []; - return ; + return ; +} + +/** + * The following errors are passed as error query parameters to the default or overridden sign-in page. + * + * [Documentation](https://next-auth.js.org/configuration/pages#sign-in-page) */ +export type SignInErrorTypes = + | "Signin" + | "OAuthSignin" + | "OAuthCallback" + | "OAuthCreateAccount" + | "EmailCreateAccount" + | "Callback" + | "OAuthAccountNotLinked" + | "EmailSignin" + | "CredentialsSignin" + | "SessionRequired" + | "default" + +export interface SignInServerPageParams { + csrfToken: string + providers: InternalProvider[] + callbackUrl: string + email: string + error: SignInErrorTypes + theme: Theme +} + +function hexToRgba(hex?: string, alpha = 1) { + if (!hex) { + return + } + // Remove the "#" character if it's included + hex = hex.replace(/^#/, "") + + // Expand 3-digit hex codes to their 6-digit equivalents + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + } + + // Parse the hex value to separate R, G, and B components + const bigint = parseInt(hex, 16) + const r = (bigint >> 16) & 255 + const g = (bigint >> 8) & 255 + const b = bigint & 255 + + // Ensure the alpha value is within the valid range [0, 1] + alpha = Math.min(Math.max(alpha, 0), 1) + + // Construct the RGBA string + const rgba = `rgba(${r}, ${g}, ${b}, ${alpha})` + + return rgba +} + +const errors: Record = { + Signin: "Try signing in with a different account.", + OAuthSignin: "Try signing in with a different account.", + OAuthCallback: "Try signing in with a different account.", + OAuthCreateAccount: "Try signing in with a different account.", + EmailCreateAccount: "Try signing in with a different account.", + Callback: "Try signing in with a different account.", + OAuthAccountNotLinked: + "To confirm your identity, sign in with the same account you used originally.", + EmailSignin: "The e-mail could not be sent.", + CredentialsSignin: + "Sign in failed. Check the details you provided are correct.", + SessionRequired: "Please sign in to access this page.", + default: "Unable to sign in.", } diff --git a/src/app/styles/components/navbar.module.css b/src/app/styles/components/navbar.module.css index 648e39e..8b10f92 100644 --- a/src/app/styles/components/navbar.module.css +++ b/src/app/styles/components/navbar.module.css @@ -5,6 +5,8 @@ position: relative; display: flex; flex-wrap: wrap; + justify-content: space-between; + width: 100%; } .navbar__list { diff --git a/src/app/styles/page.module.css b/src/app/styles/page.module.css index ac08c8e..4a104ba 100644 --- a/src/app/styles/page.module.css +++ b/src/app/styles/page.module.css @@ -212,11 +212,11 @@ @media (prefers-color-scheme: dark) { .vercelLogo { - filter: invert(1); + filter: invert(0); } .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); + filter: invert(0) drop-shadow(0 0 0.3rem #ffffff70); } } diff --git a/tsconfig.json b/tsconfig.json index 64b5271..0a8f9f7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,8 +21,8 @@ "paths": { "@styles": ["./src/app/styles"], "@styles/*": ["./src/app/styles/*"], - "@atoms": ["./src/app/components/atoms"], - "@atoms/*": ["./src/app/components/atoms/*"], + "@atoms": ["./src/app/components/system/atoms"], + "@atoms/*": ["./src/app/components/system/atoms/*"], "@model": ["./lib/model"], "@model/*": ["./lib/model/*"], "@view": ["./lib/view"], From ef0446d3c4ed89131bcb0f0b990dff851cd490fd Mon Sep 17 00:00:00 2001 From: Angelo Reale <12191809+angeloreale@users.noreply.github.com> Date: Wed, 7 Feb 2024 16:40:24 +0100 Subject: [PATCH 2/3] ar(progress) --- lib/auth/constants.ts | 3 +- src/app/components/client/signin-view.tsx | 2 +- src/app/components/client/signup-view.tsx | 9 ++- .../components/server/signin-controller.tsx | 2 +- .../components/server/signup-controller.tsx | 2 +- .../atoms/button/client/button-view.tsx | 17 +++-- src/app/signin/page.tsx | 69 ------------------- 7 files changed, 18 insertions(+), 86 deletions(-) diff --git a/lib/auth/constants.ts b/lib/auth/constants.ts index 685fc54..920418b 100644 --- a/lib/auth/constants.ts +++ b/lib/auth/constants.ts @@ -35,8 +35,7 @@ export const authOptions: AuthOptions = { } }, }, - callbacks: { - }, + callbacks: {}, pages: { // signIn: "/signin", signOut: '/', diff --git a/src/app/components/client/signin-view.tsx b/src/app/components/client/signin-view.tsx index 4598194..81043a9 100644 --- a/src/app/components/client/signin-view.tsx +++ b/src/app/components/client/signin-view.tsx @@ -15,7 +15,7 @@ interface IAuthProvider { interface VSignInProps { providers: IAuthProvider[]; - user: UserSchema; + user?: UserSchema; } async function doSignOut() { diff --git a/src/app/components/client/signup-view.tsx b/src/app/components/client/signup-view.tsx index 45f513f..27b0fce 100644 --- a/src/app/components/client/signup-view.tsx +++ b/src/app/components/client/signup-view.tsx @@ -12,18 +12,21 @@ import { Button } from "@atoms" interface IAuthProvider { id?: string; name?: string; + type?: string; + signinUrl?: string; } -interface VSignInProps { +interface VSignUpProps { providers: IAuthProvider[]; user?: UserSchema; + csrf?: string; } async function doSignOut() { await signOut(); } -export const VSignUp = ({ providers, user, csrf }: VSignInProps) => { +export const VSignUp = ({ providers, user, csrf }: VSignUpProps) => { const authContext = useContext(AuthContext); const { data: session } = useSession(); const [isUserLoaded, loadUser] = ALogIn({}); @@ -33,7 +36,7 @@ export const VSignUp = ({ providers, user, csrf }: VSignInProps) => { const { authd, name } = authContext; const [email, setEmail] = useState(""); - const callbackUrl = process.env.NEXT_PUBLIC_NEXUS_BASE_PATH + process.env.NEXT_PUBLIC_NEXUS_LOGIN_REDIRECT_PATH + const callbackUrl = process.env.NEXT_PUBLIC_NEXUS_BASE_PATH + "" + process.env.NEXT_PUBLIC_NEXUS_LOGIN_REDIRECT_PATH || "/" console.log({ prov }) if (!prov) return diff --git a/src/app/components/server/signin-controller.tsx b/src/app/components/server/signin-controller.tsx index ce7957e..e78e9c5 100644 --- a/src/app/components/server/signin-controller.tsx +++ b/src/app/components/server/signin-controller.tsx @@ -5,7 +5,7 @@ import { getProviders } from 'next-auth/react'; import { VSignIn } from '@components/client'; interface ISignInProps { - user?: UserSchema; + user?: UserSchema | undefined; } interface ISignInData { diff --git a/src/app/components/server/signup-controller.tsx b/src/app/components/server/signup-controller.tsx index 394c403..2bb0c01 100644 --- a/src/app/components/server/signup-controller.tsx +++ b/src/app/components/server/signup-controller.tsx @@ -34,5 +34,5 @@ export const CSignUp = async ({ user }: ISignInProps) => { const providers: IAuthProviders[] = props?.providers || [] - return + return } diff --git a/src/app/components/system/atoms/button/client/button-view.tsx b/src/app/components/system/atoms/button/client/button-view.tsx index 0009fec..21cec95 100644 --- a/src/app/components/system/atoms/button/client/button-view.tsx +++ b/src/app/components/system/atoms/button/client/button-view.tsx @@ -12,18 +12,17 @@ type position = positionCenter | positionX | positionY interface IButtonIcon { position: "left" | "right"; size: positionX; - theme: themes + theme: themes; } -interface VButtonProps { - children: React.Component; - variant : "solid" | "outline"; - theme : "light" | "dark"; - onClick : (e: HTMLClickEvent) => void; - icon: IButtonIcon +interface VButtonProps extends React.ButtonHTMLAttributes { + variant?: "solid" | "outline"; + theme?: "light" | "dark"; + onClick?: (e: React.MouseEvent) => void; + icon?: IButtonIcon; } -export const NVButton = ({ children, onClick, variant, theme, icon }: VButtonProps) => { +export const NVButton = ({ children, onClick, variant, theme, icon, ...regularHtmlProps }: VButtonProps) => { /* remember server/client isomorphism */ - return ; + return ; }; diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx index 7a257f3..6cc64f6 100644 --- a/src/app/signin/page.tsx +++ b/src/app/signin/page.tsx @@ -37,72 +37,3 @@ export default async function SignUp() { const providers: IAuthProviders[] = props?.providers || []; return ; } - -/** - * The following errors are passed as error query parameters to the default or overridden sign-in page. - * - * [Documentation](https://next-auth.js.org/configuration/pages#sign-in-page) */ -export type SignInErrorTypes = - | "Signin" - | "OAuthSignin" - | "OAuthCallback" - | "OAuthCreateAccount" - | "EmailCreateAccount" - | "Callback" - | "OAuthAccountNotLinked" - | "EmailSignin" - | "CredentialsSignin" - | "SessionRequired" - | "default" - -export interface SignInServerPageParams { - csrfToken: string - providers: InternalProvider[] - callbackUrl: string - email: string - error: SignInErrorTypes - theme: Theme -} - -function hexToRgba(hex?: string, alpha = 1) { - if (!hex) { - return - } - // Remove the "#" character if it's included - hex = hex.replace(/^#/, "") - - // Expand 3-digit hex codes to their 6-digit equivalents - if (hex.length === 3) { - hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] - } - - // Parse the hex value to separate R, G, and B components - const bigint = parseInt(hex, 16) - const r = (bigint >> 16) & 255 - const g = (bigint >> 8) & 255 - const b = bigint & 255 - - // Ensure the alpha value is within the valid range [0, 1] - alpha = Math.min(Math.max(alpha, 0), 1) - - // Construct the RGBA string - const rgba = `rgba(${r}, ${g}, ${b}, ${alpha})` - - return rgba -} - -const errors: Record = { - Signin: "Try signing in with a different account.", - OAuthSignin: "Try signing in with a different account.", - OAuthCallback: "Try signing in with a different account.", - OAuthCreateAccount: "Try signing in with a different account.", - EmailCreateAccount: "Try signing in with a different account.", - Callback: "Try signing in with a different account.", - OAuthAccountNotLinked: - "To confirm your identity, sign in with the same account you used originally.", - EmailSignin: "The e-mail could not be sent.", - CredentialsSignin: - "Sign in failed. Check the details you provided are correct.", - SessionRequired: "Please sign in to access this page.", - default: "Unable to sign in.", -} From d9f9b8bf61a3dbb882a4db1bf28d49b5e0d81ebd Mon Sep 17 00:00:00 2001 From: Angelo Reale <12191809+angeloreale@users.noreply.github.com> Date: Wed, 7 Feb 2024 17:00:46 +0100 Subject: [PATCH 3/3] ar(lint+build) --- next.config.js | 10 +++++----- src/app/components/client/navbar-view.tsx | 2 +- src/app/components/client/usersettings-view.tsx | 2 +- src/app/page.tsx | 11 ++++++++++- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/next.config.js b/next.config.js index 7ce1f8b..8cea29c 100644 --- a/next.config.js +++ b/next.config.js @@ -12,11 +12,11 @@ const nextConfig = { }, async redirects() { return [ - // { - // source: '/signin', - // destination: '/api/auth/signin', - // permanent: false, - // }, + { + source: '/signin', + destination: '/api/auth/signin', + permanent: false, + }, ]; }, }; diff --git a/src/app/components/client/navbar-view.tsx b/src/app/components/client/navbar-view.tsx index 4000f5f..0b9bfb7 100644 --- a/src/app/components/client/navbar-view.tsx +++ b/src/app/components/client/navbar-view.tsx @@ -38,7 +38,7 @@ export const VNavBar = () => { // if (typeof session === "undefined") return Loading...; - if (!authd) + if (authd) return ( Services diff --git a/src/app/components/client/usersettings-view.tsx b/src/app/components/client/usersettings-view.tsx index cf17665..5f78281 100644 --- a/src/app/components/client/usersettings-view.tsx +++ b/src/app/components/client/usersettings-view.tsx @@ -38,7 +38,7 @@ export const VUserSettings = () => { // if (typeof session === "undefined") return Loading...; - if (!authd) + if (authd) return ( My account diff --git a/src/app/page.tsx b/src/app/page.tsx index d1c60f5..09f8e30 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,7 +10,16 @@ export default function Home() {
- Next.js Logo + Next.js Logo