Merge pull request #66 from websitesieutoc/making-home-page

Making home page

app/(auth)/layout.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/components/chakra';
+import { ColorModeBox } from '@/components/client';
 import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
 
@@ -7,5 +7,9 @@ export const metadata: Metadata = {
 };
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
-  return <Box>{children}</Box>;
+  return (
+    <ColorModeBox pt={5} pb={10} h="100vh">
+      {children}
+    </ColorModeBox>
+  );
 }

app/(auth)/login/login-button.tsx

@@ -34,7 +34,7 @@ export default function LoginButton() {
       isLoading={isLoading}
       leftIcon={<GithubIcon />}
       size="lg"
-      colorScheme="yellow"
+      colorScheme="brand"
       loadingText="Login with GitHub"
       onClick={() => {
         setLoading(true);

app/(auth)/login/page.tsx

@@ -1,17 +1,24 @@
-import { Divider, Heading, Stack } from '@/components/chakra';
+import { Divider, Heading, Stack, Text } from '@/components/chakra';
+import { Logo } from '@/components/client';
 
 import LoginButton from './login-button';
 
 export default function LoginPage() {
   return (
     <Stack gap={4} maxWidth="sm" marginX="auto" marginTop="10vh">
+      <Logo width={256} height={74} />
+
       <Heading as="h1" size="lg">
         Login
       </Heading>
 
       <Divider />
 
       <LoginButton />
+
+      <Text fontSize="small" color="gray">
+        Only for members of @websitesieutoc at this time.
+      </Text>
     </Stack>
   );
 }

app/(dashboard)/components/Navbar/index.tsx

@@ -69,14 +69,13 @@ export const Navbar = ({ children }: { children: ReactNode }) => {
           {tabs.map(({ name, href, icon, isActive }) => (
             <Button
               key={name}
-              colorScheme={isActive ? 'green' : 'gray'}
-              variant={isActive ? 'solid' : 'ghost'}
+              colorScheme={isActive ? 'brand' : 'gray'}
+              variant={isActive ? 'outline' : 'ghost'}
               justifyContent="start"
-              leftIcon={icon}
               width="100%"
+              leftIcon={icon}
               as={NextLink}
               href={href}
-              size="sm"
             >
               {name}
             </Button>

app/(dashboard)/profile/components/ProfileCard.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import {
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+  Stack,
+  StackDivider,
+  Text,
+} from '@/components/chakra';
+import { Session } from 'next-auth';
+
+export type ProfileCardProps = {
+  data: Session['user'];
+};
+
+export const ProfileCard = ({ data }: ProfileCardProps) => {
+  return (
+    <Card maxW="md">
+      <CardHeader>
+        <Heading size="md">{data.name}</Heading>
+      </CardHeader>
+
+      <CardBody>
+        <Stack divider={<StackDivider />} spacing="4">
+          <Box>
+            <Heading size="xs" textTransform="uppercase">
+              Email
+            </Heading>
+            <Text pt="2" fontSize="sm">
+              {data.email}
+            </Text>
+          </Box>
+          <Box>
+            <Heading size="xs" textTransform="uppercase">
+              Role
+            </Heading>
+            <Text pt="2" fontSize="sm">
+              {data.role}
+            </Text>
+          </Box>
+        </Stack>
+      </CardBody>
+    </Card>
+  );
+};

app/(dashboard)/profile/components/index.ts

@@ -0,0 +1 @@
+export * from './ProfileCard';

app/(dashboard)/profile/page.tsx

@@ -1,23 +1,25 @@
 import { Flex, Heading } from '@/components/chakra';
 import { redirect } from 'next/navigation';
-
-// import { editUser } from '@/lib/actions/site';
 import { getSession } from '@/lib/auth';
 
+import { ProfileCard } from './components';
+
 export default async function ProfileSettingsPage() {
   const session = await getSession();
 
   if (!session) {
     redirect('/login');
   }
+
   return (
     <Flex width="100%" direction="column" gap={6}>
       <Flex height="48px" align="center">
         <Heading as="h1" size="lg">
           Profile Settings
         </Heading>
       </Flex>
-      <Flex>{JSON.stringify(session.user)}</Flex>
+
+      <ProfileCard data={session.user} />
     </Flex>
   );
 }

components/client/SiteCustomDomainForm/index.tsx → app/(dashboard)/sites/[id]/components/SiteCustomDomainForm/index.tsx

@@ -19,8 +19,8 @@ import {
   Stack,
   Text,
 } from '@/components/chakra';
-import { Site } from '@/types';
 import { RepeatIcon, SaveIcon } from '@/icons';
+import { Site } from '@/types';
 
 type SiteCustomDomainFormProps = {
   site: Site;
@@ -75,7 +75,9 @@ export const SiteCustomDomainForm = ({ site }: SiteCustomDomainFormProps) => {
 
         <CardFooter>
           <Flex width="100%" direction="row" justify="space-between" align="center">
-            <Text fontSize="sm">Use 64 characters maximum.</Text>
+            <Text fontSize="sm" color="gray">
+              Use 64 characters maximum.
+            </Text>
 
             <Stack direction="row">
               {hasChanged && (

components/client/SiteDeleteForm/index.tsx → app/(dashboard)/sites/[id]/components/SiteDeleteForm/index.tsx

@@ -1,4 +1,4 @@
-'>puse client';
+'use client';
 
 import {
   AlertDialog,

components/client/SiteGeneralSettingsForm/index.tsx → app/(dashboard)/sites/[id]/components/SiteGeneralSettingsForm/index.tsx

@@ -12,7 +12,6 @@ import {
   FormLabel,
   Heading,
   Input,
-  Skeleton,
   Stack,
   Text,
   Textarea,
@@ -121,7 +120,7 @@ export const SiteGeneralSettingsForm = ({ site }: SiteGeneralSettingsFormProps)
 
       <CardFooter>
         <Flex width="100%" direction="row" justify="space-between" align="center">
-          <Text fontSize="sm">
+          <Text fontSize="sm" color="gray">
             The info here only used for management, the real data might be different.
           </Text>
 

components/client/SiteQuickLinks/index.tsx → app/(dashboard)/sites/[id]/components/SiteQuickLinks/index.tsx

@@ -1,9 +1,5 @@
 'use client';
 
-import { CheckCircleIcon, CopyIcon, ExternalLinkIcon } from '@/icons';
-import { useAuth, useClipboard, useColorModeValue } from '@/hooks';
-import { UserRole, type ReposResponse, type Site } from '@/types';
-
 import {
   Box,
   Button,
@@ -17,10 +13,12 @@ import {
   Heading,
   IconButton,
   Link,
-  Skeleton,
   Stack,
   Text,
 } from '@/components/chakra';
+import { CheckCircleIcon, CopyIcon, ExternalLinkIcon } from '@/icons';
+import { UserRole, ReposResponse, Site } from '@/types';
+import { useAuth, useClipboard, useColorModeValue } from '@/hooks';
 
 export type SiteGithubInfoProps = {
   repo: ReposResponse['data'];
@@ -108,7 +106,9 @@ export const SiteQuickLinks = ({ repo, site }: SiteGithubInfoProps) => {
 
         <CardFooter>
           <Flex width="100%" direction="row" justify="start" align="center">
-            <Text fontSize="sm">For now we support only GitHub</Text>
+            <Text fontSize="sm" color="gray">
+              For now we support only GitHub
+            </Text>
           </Flex>
         </CardFooter>
       </Card>

app/(dashboard)/sites/[id]/components/SiteTemplateEditor/index.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useColorModeValue, useState, useClipboard } from '@/hooks';
+import { updateSiteSimple } from '@/lib/actions/site';
+import { Fira_Mono } from 'next/font/google';
+
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Divider,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  IconButton,
+  Stack,
+  Text,
+  Textarea,
+} from '@/components/chakra';
+import { CheckCircleIcon, CopyIcon, RepeatIcon, SaveIcon } from '@/icons';
+import { Site } from '@/types';
+
+export const fira_mono = Fira_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: '400',
+});
+
+type SiteTemplateEditorProps = {
+  site: Site;
+};
+
+export const SiteTemplateEditor = ({ site }: SiteTemplateEditorProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [inputValue, setInputValue] = useState<string>(site.template ?? '');
+
+  const { onCopy, hasCopied } = useClipboard(inputValue);
+
+  const footerBorder = useColorModeValue('gray.200', 'gray.600');
+
+  const codeBg = useColorModeValue('gray.100', 'gray.800');
+
+  const hasChanged = inputValue !== (site.template ?? '');
+
+  const handleSave = async () => {
+    try {
+      if (!site || !inputValue) return;
+
+      setIsLoading(true);
+
+      await updateSiteSimple(site.id, { template: inputValue });
+    } catch (error) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Card direction="column" width="100%">
+        <CardHeader>
+          <Heading size="md">Template Editor</Heading>
+        </CardHeader>
+        <CardBody>
+          <Stack spacing={6}>
+            <FormControl isDisabled={isLoading} w="100%" minW="240px">
+              <FormLabel>EasyPanel template</FormLabel>
+              <Flex position="relative">
+                <Textarea
+                  className={fira_mono.className}
+                  spellCheck={false}
+                  bg={codeBg}
+                  rows={16}
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                />
+
+                <IconButton
+                  icon={hasCopied ? <CheckCircleIcon color="green" /> : <CopyIcon />}
+                  colorScheme={hasCopied ? 'green' : 'gray'}
+                  variant="outline"
+                  aria-label="Copy"
+                  position="absolute"
+                  zIndex={3}
+                  right={2}
+                  top={2}
+                  onClick={onCopy}
+                />
+              </Flex>
+            </FormControl>
+          </Stack>
+        </CardBody>
+
+        <Divider color={footerBorder} />
+
+        <CardFooter>
+          <Flex width="100%" direction="row" justify="space-between" align="center">
+            <Text fontSize="sm" color="gray">
+              Use 64 characters maximum.
+            </Text>
+
+            <Stack direction="row">
+              {hasChanged && (
+                <Button
+                  aria-label="Reset"
+                  leftIcon={<RepeatIcon />}
+                  onClick={() => setInputValue(site.template ?? '')}
+                >
+                  Reset
+                </Button>
+              )}
+
+              <Button
+                colorScheme={hasChanged ? 'green' : 'gray'}
+                isDisabled={!hasChanged || isLoading}
+                isLoading={isLoading}
+                leftIcon={<SaveIcon />}
+                onClick={handleSave}
+              >
+                Save
+              </Button>
+            </Stack>
+          </Flex>
+        </CardFooter>
+      </Card>
+    </>
+  );
+};

app/(dashboard)/sites/[id]/components/index.ts

@@ -0,0 +1,5 @@
+export * from './SiteCustomDomainForm';
+export * from './SiteDeleteForm';
+export * from './SiteGeneralSettingsForm';
+export * from './SiteQuickLinks';
+export * from './SiteTemplateEditor';