EC-002: Progress on the front-end

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,

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';

src/app/components/client/navbar-view.tsx

@@ -41,15 +41,15 @@ export const VNavBar = () => {
   if (authd)
     return (
       <Dropdown>
-        <MenuButton>My account</MenuButton>
+        <MenuButton>Services</MenuButton>
         <Menu
           slotProps={{
             listbox: { className: navbarStyles.navbar__menu__list },
           }}
         >
-          <MenuItem>Profile</MenuItem>
-          <MenuItem>Language settings</MenuItem>
-          <MenuItem>Log out</MenuItem>
+          <MenuItem>Rick and Morty</MenuItem>
+          <MenuItem>Image uploader</MenuItem>
+          <MenuItem>Image tagger</MenuItem>
         </Menu>
       </Dropdown>
     );

src/app/components/client/signup-view.tsx

@@ -0,0 +1,140 @@
+// 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;
+  type?: string;
+  signinUrl?: string;
+}
+
+interface VSignUpProps {
+  providers: IAuthProvider[];
+  user?: UserSchema;
+  csrf?: string;
+}
+
+async function doSignOut() {
+  await signOut();
+}
+
+export const VSignUp = ({ providers, user, csrf }: VSignUpProps) => {
+  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 (
+  //     <span>
+  //       Welcome, {coercedName} <Button onClick={handleSignOut}>Sign out</Button>
+  //     </span>
+  //   )
+  return <div>
+    {Object.values(providers).map((provider) => (
+			<div> 
+              {provider.type === "email" && (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrf} />
+                  <label
+                    className="section-header"
+                    htmlFor={`input-email-for-${provider.id}-provider`}
+                  >
+                    Email
+                  </label>
+                  <input
+                    id={`input-email-for-${provider.id}-provider`}
+                    autoFocus
+                    type="email"
+                    name="email"
+                    value={email}
+                    placeholder="email@example.com"
+                    required
+                  />
+                  <Button id="submitButton" type="submit">
+                    Sign in with {provider.name}
+                  </Button>
+                </form>
+              )}
+              {provider.type === "oauth" && (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrf} />
+                  {callbackUrl && (
+                    <input
+                      type="hidden"
+                      name="callbackUrl"
+                      value={callbackUrl}
+                    />
+                  )}
+                  <Button
+                    type="submit"
+                    className="Button"
+                  >
+                    {(
+                      <img
+                        loading="lazy"
+                        height={24}
+                        width={24}
+                        id="provider-logo"
+                        src={``}
+                      />
+                    )}
+                    {(
+                      <img
+                        loading="lazy"
+                        height={24}
+                        width={24}
+                        id="provider-logo-dark"
+                        src={``}
+                      />
+                    )}
+                    <span>Sign in with {provider.name}</span>
+                  </Button>
+                </form>
+              )}
+    	</div>
+
+    ))}
+  </div>;
+};

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 <span>Loading...</span>;
+
+  if (authd)
+    return (
+      <Dropdown>
+        <MenuButton>My account</MenuButton>
+        <Menu
+          slotProps={{
+            listbox: { className: navbarStyles.navbar__menu__list },
+          }}
+        >
+          <MenuItem>Profile</MenuItem>
+          <MenuItem>Language settings</MenuItem>
+          <MenuItem>Log out</MenuItem>
+        </Menu>
+      </Dropdown>
+    );
+
+  // return <button>Nav items !auth.d</button>;
+};

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';

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 (
-    <div className={navbarStyles.navbar__wrapper}>
-      <CNavBar />
-      <SignIn />
-    </div>
-  );
+  return <CNavBar />;
 };

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';

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 {

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<ISignInData> {
+  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 <VSignUp providers={providers} csrf={csrf} />
+}

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<INavBarData> {
+  const user = await getUser();
+  const logged = !user;
+
+  return user;
+}
+
+export const CUserSettings = async () => {
+  const props: INavBarData = await getEnabledFeatures();
+  // const features: IAuthProviders[] = props?.features || [];
+  return <VUserSettings />;
+};

src/app/components/system/atoms/button/button.tsx

@@ -0,0 +1,9 @@
+// button.tsx
+'use server';
+import { NCButton } from './server';
+
+export const Button = () => {
+  return <div>
+    <NCButton />
+  </div>;
+};