demo: small UI refinements

samples/todo/components/ManageMembers.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from '@heroicons/react/24/outline';
+import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { ServerErrorCode } from '@zenstackhq/internal';
 import { HooksError, useSpaceUser } from '@zenstackhq/runtime/hooks';
 import { Space, SpaceUserRole } from '@zenstackhq/runtime/types';
@@ -61,7 +61,7 @@ export default function ManageMembers({ space }: Props) {
 
     return (
         <div>
-            <div className="flex items-center mb-8 w-full">
+            <div className="flex flex-wrap gap-2 items-center mb-8 w-full">
                 <input
                     type="text"
                     placeholder="Type user email and enter to invite"
@@ -95,17 +95,27 @@ export default function ManageMembers({ space }: Props) {
 
             <ul className="space-y-2">
                 {members?.map((member) => (
-                    <li key={member.id} className="flex w-full justify-between">
-                        <div className="flex items-center space-x-4">
-                            <Avatar user={member.user} size={32} />
-                            <p className="w-48 line-clamp-1">
+                    <li
+                        key={member.id}
+                        className="flex flex-wrap w-full justify-between"
+                    >
+                        <div className="flex items-center">
+                            <div className="hidden md:block mr-2">
+                                <Avatar user={member.user} size={32} />
+                            </div>
+                            <p className="w-36 md:w-48 line-clamp-1 mr-2">
                                 {member.user.name || member.user.email}
                             </p>
                             <p>{member.role}</p>
                         </div>
                         <div className="flex items-center">
                             <button className="justify-self-end btn btn-link btn-xs text-gray-500">
-                                Remove
+                                <TrashIcon
+                                    className="w-4 h-4 text-gray-500"
+                                    onClick={() => {
+                                        // TODO
+                                    }}
+                                />
                             </button>
                         </div>
                     </li>

samples/todo/components/NavBar.tsx

@@ -22,7 +22,7 @@ export default function NavBar({ user, space }: Props) {
                             width={32}
                             height={32}
                         />
-                        <div className="text-xl font-semibold ml-2 text-slate-700 inline-block">
+                        <div className="text-xl font-semibold ml-2 text-slate-700 hidden md:inline-block">
                             {space?.name || 'Welcome Todo App'}
                         </div>
                         <p className="text-xs ml-2 text-gray-500 self-end">

samples/todo/components/SpaceMembers.tsx

@@ -20,7 +20,7 @@ function ManagementDialog(space?: Space) {
             />
             <div className="modal">
                 <div className="modal-box">
-                    <h3 className="font-bold text-lg">
+                    <h3 className="font-bold text-base md:text-lg">
                         Manage Members of {space.name}
                     </h3>
 

samples/todo/pages/_app.tsx

@@ -10,20 +10,23 @@ import {
     useCurrentUser,
     UserContext,
 } from '@lib/context';
+import AuthGuard from 'components/AuthGuard';
 
 function AppContent(props: { children: JSX.Element | JSX.Element[] }) {
     const user = useCurrentUser();
     const space = useCurrentSpace();
 
     return (
-        <UserContext.Provider value={user}>
-            <SpaceContext.Provider value={space}>
-                <div className="h-screen flex flex-col">
-                    <NavBar user={user} space={space} />
-                    {props.children}
-                </div>
-            </SpaceContext.Provider>
-        </UserContext.Provider>
+        <AuthGuard>
+            <UserContext.Provider value={user}>
+                <SpaceContext.Provider value={space}>
+                    <div className="h-screen flex flex-col">
+                        <NavBar user={user} space={space} />
+                        {props.children}
+                    </div>
+                </SpaceContext.Provider>
+            </UserContext.Provider>
+        </AuthGuard>
     );
 }
 

samples/todo/pages/api/auth/[...nextauth].ts

@@ -1,14 +1,12 @@
 import NextAuth, { NextAuthOptions, User } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
-import GoogleProvider from 'next-auth/providers/google';
 import {
     authorize,
     NextAuthAdapter as Adapter,
 } from '@zenstackhq/runtime/auth';
 import service from '@zenstackhq/runtime';
 import { nanoid } from 'nanoid';
 import { SpaceUserRole } from '@zenstackhq/runtime/types';
-import { signIn } from 'next-auth/react';
 
 export const authOptions: NextAuthOptions = {
     // Configure one or more authentication providers
@@ -20,11 +18,6 @@ export const authOptions: NextAuthOptions = {
     },
 
     providers: [
-        GoogleProvider({
-            clientId: process.env.GOOGLE_ID!,
-            clientSecret: process.env.GOOGLE_SECRET!,
-        }),
-
         CredentialsProvider({
             credentials: {
                 email: {

samples/todo/pages/create-space.tsx

@@ -1,7 +1,6 @@
 import { NextPage } from 'next';
 import { FormEvent, useState } from 'react';
 import { useSpace, type HooksError } from '@zenstackhq/runtime/hooks';
-import AuthGuard from 'components/AuthGuard';
 import { ServerErrorCode } from '@zenstackhq/runtime/server';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/router';
@@ -53,7 +52,6 @@ const CreateSpace: NextPage = () => {
     };
 
     return (
-        <AuthGuard>
             <div className="flex items-center justify-center h-full">
                 <form onSubmit={onSubmit}>
                     <h1 className="text-3xl mb-8">Create a space</h1>
@@ -110,7 +108,6 @@ const CreateSpace: NextPage = () => {
                     </div>
                 </form>
             </div>
-        </AuthGuard>
     );
 };
 

samples/todo/pages/index.tsx

@@ -22,7 +22,7 @@ const Home: NextPage = () => {
                     Welcome {session.user.name || session.user.email}!
                 </h1>
                 <div className="w-full p-8">
-                    <h2 className="text-xl text-left mb-8 text-gray-700">
+                    <h2 className="text-lg md:text-xl text-left mb-8 text-gray-700">
                         Choose a space to start, or{' '}
                         <Link href="/create-space">
                             <a className="link link-primary">

samples/todo/pages/space/[slug]/index.tsx

@@ -140,10 +140,10 @@ export default function SpaceHome() {
                 <BreadCrumb />
             </div>
             <div className="p-8">
-                <div className="w-full flex justify-between">
+                <div className="w-full flex flex-col md:flex-row mb-8 space-y-4 md:space-y-0 md:space-x-4">
                     <label
                         htmlFor="create-list-modal"
-                        className="btn btn-primary btn-wide modal-button mb-8"
+                        className="btn btn-primary btn-wide modal-button"
                     >
                         Create a list
                     </label>