feat: add signin page with functionality

apps/landing/src/app/(frontend)/(auth)/_components/animated-background.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  SiCplusplus,
+  SiCss3,
+  SiGo,
+  SiHtml5,
+  SiJavascript,
+  SiPhp,
+  SiPython,
+  SiRuby,
+  SiRust,
+  SiSwift,
+  SiTypescript,
+} from 'react-icons/si';
+
+export function AnimatedBackground() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const iconColorMap = useMemo(
+    () => [
+      { Icon: SiJavascript, color: '#F7DF1E' },
+      { Icon: SiTypescript, color: '#3178C6' },
+      { Icon: SiPython, color: '#3776AB' },
+      { Icon: SiCplusplus, color: '#00599C' },
+      { Icon: SiRuby, color: '#CC342D' },
+      { Icon: SiSwift, color: '#F05138' },
+      { Icon: SiRust, color: '#000000' },
+      { Icon: SiGo, color: '#00ADD8' },
+      { Icon: SiPhp, color: '#777BB4' },
+      { Icon: SiHtml5, color: '#E34F26' },
+      { Icon: SiCss3, color: '#1572B6' },
+    ],
+    []
+  );
+
+  const getRandom = (min: number, max: number) =>
+    Math.random() * (max - min) + min;
+
+  const floatingIcons = useMemo(() => {
+    if (!isClient) return [];
+
+    return Array.from({ length: 40 }).map((_, i) => {
+      const { Icon, color } = iconColorMap[i % iconColorMap.length];
+      return (
+        <motion.div
+          key={i}
+          className="pointer-events-none absolute"
+          style={{
+            top: `${getRandom(0, 100)}%`,
+            left: `${getRandom(0, 100)}%`,
+            fontSize: `${getRandom(16, 32)}px`,
+            color: color,
+            opacity: getRandom(0.1, 0.2),
+            rotate: getRandom(-180, 180),
+          }}
+          animate={{
+            y: [0, getRandom(-100, 100), 0],
+            x: [0, getRandom(-50, 50), 0],
+            rotate: getRandom(-180, 180),
+          }}
+          transition={{
+            duration: getRandom(15, 25),
+            repeat: Infinity,
+            repeatType: 'loop',
+            ease: 'easeInOut',
+          }}
+        >
+          <Icon className="h-full w-full" />
+        </motion.div>
+      );
+    });
+  }, [isClient, iconColorMap]);
+
+  if (!isClient) return null;
+
+  return (
+    <div className="fixed inset-0 z-0 overflow-hidden">{floatingIcons}</div>
+  );
+}

apps/landing/src/app/(frontend)/(auth)/layout.tsx

@@ -1,5 +1,19 @@
+import { Card } from '@components/atoms';
 import { ReactNode } from 'react';
+import { AnimatedBackground } from './_components/animated-background';
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
+  return (
+    <div className="bg-background/20 relative flex min-h-[100dvh] items-center justify-center p-4">
+      <AnimatedBackground />
+
+      <div className="z-10 w-full">
+        <Card className="bg-background/90 mx-auto w-full max-w-[360px] p-6 shadow-xl backdrop-blur-lg sm:max-w-md sm:p-8">
+          <div className="flex flex-col items-center space-y-6">
+            <div className="w-full space-y-4">{children}</div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
 }

apps/landing/src/app/(frontend)/(auth)/signin/_action/signin-action.ts

@@ -0,0 +1,29 @@
+'use server';
+
+import { setAccessToken, setRefreshToken } from '@/lib/cookies';
+import { fetcher } from '@/lib/openapi';
+
+export async function SigninAction({
+  email,
+  password,
+}: {
+  email: string;
+  password: string;
+}) {
+  const { data: json, error } = await fetcher.POST('/v1/auth/login', {
+    body: {
+      email,
+      password,
+    },
+  });
+
+  if (error) throw new Error(error.message);
+
+  const accessToken = json.data.token.access_token;
+  const refreshToken = json.data.token.refresh_token;
+
+  await setAccessToken(accessToken);
+  await setRefreshToken(refreshToken);
+
+  return json;
+}

apps/landing/src/app/(frontend)/(auth)/signin/_components/signin-form.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@components/atoms';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { authLoginSchema } from '@schemas';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { LuLoader } from 'react-icons/lu';
+import { z } from 'zod';
+import { SigninAction } from '../_action/signin-action';
+
+type SigninData = z.infer<typeof authLoginSchema>;
+
+export function SigninForm() {
+  const router = useRouter();
+
+  const form = useForm<SigninData>({
+    resolver: zodResolver(authLoginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: SigninAction,
+    onSuccess: () => {
+      router.push('/');
+    },
+    onError: () => {
+      form.resetField('password');
+    },
+  });
+
+  const onSubmit = (values: SigninData) => {
+    mutate(values);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        {error && (
+          <div className="mb-6 p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
+            {(error as Error).message}
+          </div>
+        )}
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="emailmu@mail.com" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="••••••••" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" disabled={isPending} className="w-full">
+          {isPending ? <LuLoader className="h-5 w-5 animate-spin" /> : 'Masuk'}
+        </Button>
+      </form>
+    </Form>
+  );
+}

apps/landing/src/app/(frontend)/(auth)/signin/page.tsx

@@ -1,3 +1,38 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import { LogoSimple } from '../../_components/logo';
+import { SigninForm } from './_components/signin-form';
+
+export const metadata: Metadata = {
+  title: 'IMPHNEN - Signin',
+  description:
+    'Komunitas Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
+};
+
 export default function Page() {
-  return <></>;
+  return (
+    <>
+      <div className="flex flex-col items-center gap-4">
+        <LogoSimple />
+
+        <p className="text-muted-foreground text-center text-sm sm:text-base">
+          Masuk untuk mengakses akunmu
+        </p>
+      </div>
+
+      <SigninForm />
+
+      <div className="w-full space-y-4">
+        <p className="text-muted-foreground px-4 text-center text-xs leading-5 text-balance sm:text-sm">
+          Belum punya akun?{' '}
+          <Link
+            href="/signup"
+            className="text-primary font-bold hover:underline hover:underline-offset-4 transition-colors"
+          >
+            Daftar
+          </Link>
+        </p>
+      </div>
+    </>
+  );
 }

apps/landing/src/app/(frontend)/(auth)/signup/page.tsx

@@ -1,3 +1,15 @@
+import { LogoSimple } from '../../_components/logo';
+
 export default function Page() {
-  return <></>;
+  return (
+    <>
+      <div className="flex flex-col items-center gap-4">
+        <LogoSimple />
+
+        <p className="text-muted-foreground text-center text-sm sm:text-base">
+          Buat akunmu sekarang
+        </p>
+      </div>
+    </>
+  );
 }

apps/landing/src/app/(frontend)/_components/header/mobile-menu-hamburger.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useMobileMenuStore } from '@/stores/mobile-menu-store';
-import { Button, MenuIcon, XIcon } from '@components/atoms';
+import { Button } from '@components/atoms';
+import { LuMenu, LuX } from 'react-icons/lu';
 
 export function MobileMenuHamburger() {
   const mobileMenuOpen = useMobileMenuStore((s) => s.mobileMenuOpen);
@@ -15,9 +16,9 @@ export function MobileMenuHamburger() {
       onClick={toggleMobileMenu}
     >
       {mobileMenuOpen ? (
-        <XIcon className="h-6 w-6" />
+        <LuX className="h-6 w-6" />
       ) : (
-        <MenuIcon className="h-6 w-6" />
+        <LuMenu className="h-6 w-6" />
       )}
     </Button>
   );

apps/landing/src/app/(frontend)/_components/header/simple-theme-toggle.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { Button, MoonIcon, SunIcon } from '@components/atoms';
+import { Button } from '@components/atoms';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
+import { LuMoon, LuSun } from 'react-icons/lu';
 
 export function SimpleThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -28,9 +29,9 @@ export function SimpleThemeToggle() {
       className="focus-visible:ring-0 cursor-pointer"
     >
       {theme === 'dark' ? (
-        <SunIcon className="h-[1.2rem] w-[1.2rem]" />
+        <LuSun className="h-[1.2rem] w-[1.2rem]" />
       ) : (
-        <MoonIcon className="h-[1.2rem] w-[1.2rem]" />
+        <LuMoon className="h-[1.2rem] w-[1.2rem]" />
       )}
       <span className="sr-only">Toggle theme</span>
     </Button>

apps/landing/tsconfig.json

@@ -25,6 +25,7 @@
     "paths": {
       "@components/atoms": ["../../libs/shadcn-ui/src/atoms/index.ts"],
       "@utils/ui": ["../../libs/utils/src/index.ts"],
+      "@schemas": ["../../libs/service/src/schemas/index.ts"],
       "@/*": ["src/*"]
     }
   },