feat: Footer component (#255)

frontend/components/Footer.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { LocaleCodeType } from '@/types/locale';
 
@@ -7,10 +8,18 @@ type Props = {
 
 export default function Footer({ locale }: Props) {
   return (
-    <div className="w-full text-center py-2 px-6 flex flex-wrap justify-center items-center gap-4">
+    <div className="w-full text-center py-2 px-6 flex flex-wrap justify-center items-center gap-4 text-gray-500">
-      <div>Copyright © 2024-present UnitTCMS</div>
+      <Link href="https://unittcms.org">
+        <Image src="/favicon/icon-192.png" width={32} height={32} alt="Logo" />
+      </Link>
+      <div>
+        <span>Copyright © 2024-present </span>
+        <Link href="https://unittcms.org" className={`${NextUiLinkClasses} !text-gray-500 hover:text-gray-700`}>
+          UnitTCMS
+        </Link>
+      </div>
 
-      <Link href={'/health'} locale={locale} className={`${NextUiLinkClasses} text-gray-500 hover:text-gray-700`}>
+      <Link href={'/health'} locale={locale} className={`${NextUiLinkClasses} !text-gray-500 hover:text-gray-700`}>
         Status
       </Link>
     </div>

frontend/src/app/[locale]/account/authPage.tsx

@@ -11,6 +11,7 @@ import { TokenContext } from '@/utils/TokenProvider';
 import { useRouter } from '@/src/i18n/routing';
 import Config from '@/config/config';
 import { LocaleCodeType } from '@/types/locale';
+import Footer from '@/components/Footer';
 const isDemoSite = Config.isDemoSite;
 
 type Props = {
@@ -93,74 +94,56 @@ export default function AuthPage({ isSignup, messages, locale }: Props) {
   };
 
   return (
-    <Card className="w-[480px] mt-16">
+    <div className="h-[calc(100vh-64px)] flex flex-col justify-around">
-      <CardHeader className="px-4 pt-4 pb-0 flex justify-between">
+      <Card className="w-[380px] md:w-[480px]">
-        <h4 className="font-bold text-large">{messages.title}</h4>
+        <CardHeader className="px-4 pt-4 pb-0 flex justify-between">
-        <Button
+          <h4 className="font-bold text-large">{messages.title}</h4>
-          as={Link}
+          <Button
-          href={isSignup ? '/account/signin' : '/account/signup'}
+            as={Link}
-          locale={locale}
+            href={isSignup ? '/account/signin' : '/account/signup'}
-          color="primary"
+            locale={locale}
-          variant="light"
+            color="primary"
-          endContent={<ChevronRight size={16} />}
+            variant="light"
-        >
+            endContent={<ChevronRight size={16} />}
-          {messages.linkTitle}
+          >
-        </Button>
+            {messages.linkTitle}
-      </CardHeader>
+          </Button>
-      <CardBody className="overflow-visible px-4 pt-0 pb-4">
+        </CardHeader>
-        <form>
+        <CardBody className="overflow-visible px-4 pt-0 pb-4">
-          {errorMessage && <div className="my-3 text-danger">{errorMessage}</div>}
+          <form>
-          <Input
+            {errorMessage && <div className="my-3 text-danger">{errorMessage}</div>}
-            isRequired
-            type="email"
-            label={messages.email}
-            autoComplete="email"
-            className="mt-3"
-            onChange={(e) => {
-              setUser({
-                ...user,
-                email: e.target.value,
-              });
-            }}
-          />
-          {isSignup && (
             <Input
               isRequired
-              type="username"
+              type="email"
-              label={messages.username}
+              label={messages.email}
-              autoComplete="username"
+              autoComplete="email"
               className="mt-3"
               onChange={(e) => {
                 setUser({
                   ...user,
-                  username: e.target.value,
+                  email: e.target.value,
                 });
               }}
             />
-          )}
+            {isSignup && (
-          <Input
+              <Input
-            label={messages.password}
+                isRequired
-            variant="bordered"
+                type="username"
-            autoComplete={isSignup ? 'new-password' : 'current-password'}
+                label={messages.username}
-            className="mt-3"
+                autoComplete="username"
-            type={isPasswordVisible ? 'text' : 'password'}
+                className="mt-3"
-            endContent={
+                onChange={(e) => {
-              <button className="focus:outline-none" type="button" onClick={togglePasswordVisibility}>
+                  setUser({
-                {isPasswordVisible ? <Eye size={20} /> : <EyeOff size={20} />}
+                    ...user,
-              </button>
+                    username: e.target.value,
-            }
+                  });
-            onChange={(e) => {
+                }}
-              setUser({
+              />
-                ...user,
+            )}
-                password: e.target.value,
-              });
-            }}
-          />
-          {isSignup && (
             <Input
-              label={messages.confirmPassword}
+              label={messages.password}
               variant="bordered"
-              autoComplete="new-password"
+              autoComplete={isSignup ? 'new-password' : 'current-password'}
               className="mt-3"
               type={isPasswordVisible ? 'text' : 'password'}
               endContent={
@@ -169,28 +152,49 @@ export default function AuthPage({ isSignup, messages, locale }: Props) {
                 </button>
               }
               onChange={(e) => {
-                setConfirmPassword(e.target.value);
+                setUser({
+                  ...user,
+                  password: e.target.value,
+                });
               }}
             />
-          )}
+            {isSignup && (
-
+              <Input
-          {isDemoSite && <div className="my-3 text-default-600">{messages.demoPageWarning}</div>}
+                label={messages.confirmPassword}
-
+                variant="bordered"
-          <div className="flex justify-end items-center mt-3">
+                autoComplete="new-password"
-            <Button color="primary" onPress={validate}>
+                className="mt-3"
-              {messages.submitTitle}
+                type={isPasswordVisible ? 'text' : 'password'}
-            </Button>
+                endContent={
-            {!isSignup && isDemoSite && (
+                  <button className="focus:outline-none" type="button" onClick={togglePasswordVisibility}>
-              <Button
+                    {isPasswordVisible ? <Eye size={20} /> : <EyeOff size={20} />}
-                className="ms-3 bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
+                  </button>
-                onPress={handleSignInAsGuest}
+                }
-              >
+                onChange={(e) => {
-                {messages.signInAsGuest}
+                  setConfirmPassword(e.target.value);
-              </Button>
+                }}
+              />
             )}
-          </div>
+
-        </form>
+            {isDemoSite && <div className="my-3 text-default-600">{messages.demoPageWarning}</div>}
-      </CardBody>
+
-    </Card>
+            <div className="flex justify-end items-center mt-3">
+              <Button color="primary" onPress={validate}>
+                {messages.submitTitle}
+              </Button>
+              {!isSignup && isDemoSite && (
+                <Button
+                  className="ms-3 bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
+                  onPress={handleSignInAsGuest}
+                >
+                  {messages.signInAsGuest}
+                </Button>
+              )}
+            </div>
+          </form>
+        </CardBody>
+      </Card>
+      <Footer locale={locale} />
+    </div>
   );
 }