Improves login form layout and workflow for improved user experience.

Enhances the accessibility and readability of the login form by providing clear labels and links for users.
Updates the layout to direct users to the correct authentication routes.
Adds social login buttons for GitHub.
Updates the CTAs on the landing page and header to direct users to the login/auth/register pages.
Improves overall user navigation and reduces confusion.

Author: sensasi-delight

src/app/auth/login/_components/login-form.tsx

@@ -43,7 +43,6 @@ export function LoginForm() {
   const [loading, setLoading] = useState(false)
   const [rememberMe, setRememberMe] = useState(false)
   const router = useRouter()
-  // No longer need the serverError state: const [serverError, setServerError] = useState('')
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -119,15 +118,18 @@ export function LoginForm() {
               render={({ field }) => (
                 <FormItem>
                   <div className="flex items-center">
-                    <FormLabel>Password</FormLabel>
-                    <Link href="#" className="ml-auto inline-block text-sm underline">
-                      Forgot your password?
+                    <FormLabel>Kata Sandi</FormLabel>
+                    <Link
+                      href="/auth/forgot-password"
+                      className="ml-auto inline-block text-sm underline"
+                    >
+                      lupa kata sandi?
                     </Link>
                   </div>
                   <FormControl>
                     <Input type="password" placeholder="••••••••" {...field} />
                   </FormControl>
-                  <FormMessage /> {/* Server error messages will now appear here */}
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -138,7 +140,7 @@ export function LoginForm() {
                 checked={rememberMe}
                 onCheckedChange={(checked) => setRememberMe(Boolean(checked))}
               />
-              <Label htmlFor="remember">Remember me</Label>
+              <Label htmlFor="remember">Ingat Saya</Label>
             </div>
 
             <Button type="submit" className="w-full" disabled={loading}>
@@ -147,7 +149,6 @@ export function LoginForm() {
           </form>
         </Form>
         <div className={cn('w-full gap-2 flex items-center flex-col mt-4')}>
-          {/* ... Social login buttons remain the same ... */}
           <Button
             variant="outline"
             className={cn('w-full gap-2')}
@@ -182,18 +183,49 @@ export function LoginForm() {
                 d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
               ></path>
             </svg>
-            Sign in with Google
+            Masuk dengan Google
+          </Button>
+
+          <Button
+            variant="outline"
+            className={cn('w-full gap-2')}
+            disabled={loading}
+            onClick={async () => {
+              await authClient.signIn.social(
+                {
+                  provider: 'github',
+                  callbackURL: '/feeds',
+                },
+                {
+                  onRequest: () => {
+                    setLoading(true)
+                  },
+                  onResponse: () => {
+                    setLoading(false)
+                  },
+                }
+              )
+            }}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+              ></path>
+            </svg>
+            Masuk dengan Github
           </Button>
         </div>
       </CardContent>
       <CardFooter>
         <div className="flex justify-center w-full border-t py-4">
-          <p className="text-center text-xs text-neutral-500">
-            built with{' '}
-            <Link href="https://better-auth.com" className="underline" target="_blank">
-              <span className="dark:text-white/70 cursor-pointer">better-auth.</span>
-            </Link>
-          </p>
+          <Link
+            href="/auth/register"
+            className="text-xs text-neutral-500 hover:text-primary transition-colors"
+            target="_blank"
+          >
+            Belum punya akun? <span className="underline">Daftar di sini.</span>
+          </Link>
         </div>
       </CardFooter>
     </Card>

src/features/landing/components/cta-section.tsx

@@ -25,7 +25,7 @@ export default function CTASection() {
           </p>
 
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <Link href="/register">
+            <Link href="/auth/login">
               <Button size="lg" className="glow-purple group">
                 Mulai Sekarang
                 <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />

src/features/landing/components/header.tsx

@@ -56,15 +56,15 @@ export default function Header() {
             >
               Leaderboard
             </a>
-            <Link href="/login">
+            <Link href="/auth/login">
               <Button variant="outline" size="sm">
                 Masuk
               </Button>
             </Link>
 
-            <Link href="/register">
+            <Link href="/auth/register">
               <Button size="sm" className="glow-purple">
-                Mulai Sekarang
+                Daftar
               </Button>
             </Link>
           </nav>

src/features/landing/components/hero-section.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { ArrowRight, Sparkles } from 'lucide-react'
+import Link from 'next/link'
 
 export default function HeroSection() {
   return (
@@ -23,10 +24,12 @@ export default function HeroSection() {
           </p>
 
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <Button size="lg" className="glow-purple group">
-              Mulai Showcase
-              <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
-            </Button>
+            <Link href="/auth/login">
+              <Button size="lg" className="glow-purple group">
+                Mulai Showcase
+                <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
+              </Button>
+            </Link>
             {/* <Button variant="outline" size="lg" className="group bg-transparent">
               <Play className="mr-2 h-4 w-4" />
               Lihat Demo