feat: implement frontend login functionality with form handling and error management

apps/frontend/app/components/Form/Button.tsx

@@ -0,0 +1,36 @@
+export type SubmitButtonProps = {
+  loading?: boolean;
+  label?:
+    | {
+        default: string;
+        loading: string;
+      }
+    | string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
+  return (
+    <button
+      type="submit"
+      disabled={loading}
+      style={{
+        padding: '10px 14px',
+        borderRadius: 6,
+        border: 'none',
+        backgroundColor: 'var(--iris-9)',
+        color: 'white',
+      }}
+      {...props}
+    >
+      {loading ? (typeof label === 'string' ? 'Submitting…' : label?.loading ?? 'Submitting…') : typeof label === 'string' ? label : label?.default ?? 'Submit'}
+    </button>
+  );
+}
+
+export function ResetButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type="reset" {...props} style={{ padding: '10px 14px', borderRadius: 6, border: '1px solid var(--gray-5)', background: 'white', ...props.style }}>
+      {props.children ?? 'Reset'}
+    </button>
+  );
+}

apps/frontend/app/components/Form/TextField.tsx

@@ -0,0 +1,93 @@
+import type { AnyFieldMeta } from '@tanstack/react-form';
+import { LucideEye, LucideEyeClosed } from 'lucide-react';
+import { useCallback, useId, useState } from 'react';
+
+export type TextFieldProps = {
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+  labelDivProps?: React.HTMLAttributes<HTMLDivElement>;
+} & React.InputHTMLAttributes<HTMLInputElement> & {
+    type?: 'password';
+    showPasswordToggle?: boolean;
+  };
+
+export function TextField({ label, value, onChange, labelProps, labelDivProps, showPasswordToggle, ...rest }: TextFieldProps) {
+  const id = useId();
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const handlePasswordVisibilitySet = useCallback(
+    (e: React.MouseEvent | React.TouchEvent, visible: boolean) => {
+      if (rest.type !== 'password') return;
+      e.preventDefault();
+      setIsPasswordVisible(() => visible);
+    },
+    [rest.type]
+  );
+  return (
+    <label htmlFor={id} style={{ display: 'block', marginBottom: 8 }} {...labelProps}>
+      {label && (
+        <div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6 }} {...labelDivProps}>
+          {label}
+        </div>
+      )}
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>
+        <input
+          {...rest}
+          type={rest.type === 'password' ? (isPasswordVisible && showPasswordToggle ? 'text' : 'password') : rest.type}
+          id={id}
+          value={value}
+          onChange={onChange}
+          style={{
+            width: '100%',
+            padding: '10px 12px',
+            borderRadius: 6,
+            border: '1px solid var(--gray-5)',
+            ...rest?.style,
+          }}
+        />
+
+        <div
+          style={{ position: 'absolute', right: 12 }}
+          onMouseDown={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onMouseUp={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onMouseLeave={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onTouchStart={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onTouchEnd={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+        >
+          {showPasswordToggle ? isPasswordVisible ? <LucideEye size={16} /> : <LucideEyeClosed size={16} /> : null}
+        </div>
+      </div>
+    </label>
+  );
+}
+
+export type TextFieldErrorMessageProps = AnyFieldMeta & {
+  errorMessage?: string;
+};
+
+export function TextFieldErrorMessage({ isValid, errors, errorMessage }: TextFieldErrorMessageProps) {
+  return (
+    !isValid && (
+      <div
+        style={{
+          marginTop: 4,
+          fontSize: 12,
+          color: 'var(--red-9)',
+        }}
+      >
+        {errorMessage ?? errors?.reduce((msg, err) => msg + err.message + ' ', '')}
+      </div>
+    )
+  );
+}

apps/frontend/app/components/home/TablePlaceholder.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Flex, Text, Button, Separator, Box, Badge } from '@radix-ui/themes';
+
+export default function TablePlaceholder() {
+  return (
+    <Flex direction="column" gap="3" p="4">
+      <Flex justify="between" align="center">
+        <Text weight="bold">Proxy Hosts</Text>
+        <Button size="1">Add Host</Button>
+      </Flex>
+      <Separator size="4" />
+      {[1, 2, 3].map((i) => (
+        <Flex key={i} justify="between" align="center">
+          <Box>
+            <Text size="2" weight="bold" as="div">
+              {`host-${i}.example.com`}
+            </Text>
+            <Text size="1" color="gray">
+              {`http://10.0.0.${i}:8080`}
+            </Text>
+          </Box>
+          <Badge color="green">Online</Badge>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

apps/frontend/app/components/layout/SidebarContent.tsx

@@ -0,0 +1,89 @@
+import type React from 'react';
+import { Box, Button, Flex, Heading, Separator, Text } from '@radix-ui/themes';
+import type { NavItem } from './types';
+import { Home, Globe, ArrowRight, Lock, Settings, User } from 'lucide-react';
+import { useLayout } from '../../providers/LayoutProvider';
+
+const navItems: { label: NavItem; icon: React.ReactNode }[] = [
+  { label: 'Dashboard', icon: <Home size={16} /> },
+  { label: 'Proxy Hosts', icon: <Globe size={16} /> },
+  { label: 'Redirection', icon: <ArrowRight size={16} /> },
+  { label: 'SSL', icon: <Lock size={16} /> },
+  { label: 'Settings', icon: <Settings size={16} /> },
+  { label: 'Profile', icon: <User size={16} /> },
+] as const;
+
+export function SidebarContent() {
+  const { activeTab, setActiveTab, setIsMobileMenuOpen } = useLayout();
+
+  return (
+    <Flex direction="column" gap="2" p="4" style={{ height: '100%' }}>
+      <Flex align="center" gap="2" mb="6" px="2">
+        <Box
+          style={{
+            width: 32,
+            height: 32,
+            backgroundColor: 'var(--iris-9)',
+            borderRadius: 'var(--radius-2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold',
+          }}
+        >
+          Y
+        </Box>
+        <Heading size="4" weight="bold">
+          YANPM
+        </Heading>
+      </Flex>
+
+      <Flex direction="column" gap="1">
+        {navItems.map((item) => (
+          <Button
+            key={item.label}
+            variant={activeTab === item.label ? 'soft' : 'ghost'}
+            color={activeTab === item.label ? 'iris' : 'gray'}
+            onClick={() => {
+              setActiveTab(item.label);
+              setIsMobileMenuOpen(false);
+            }}
+            style={{ cursor: 'pointer', width: '100%', justifyContent: 'flex-start' }}
+          >
+            <Flex align="center" gap="3">
+              {item.icon}
+              <Text size="2" weight={activeTab === item.label ? 'bold' : 'medium'}>
+                {item.label}
+              </Text>
+            </Flex>
+          </Button>
+        ))}
+      </Flex>
+
+      <Box style={{ marginTop: 'auto' }} pt="4">
+        <Separator size="4" mb="4" />
+        <Flex align="center" gap="3" px="2">
+          <Box
+            style={{
+              width: 32,
+              height: 32,
+              backgroundColor: 'var(--gray-5)',
+              borderRadius: '50%',
+            }}
+          />
+          <Box>
+            <Text size="1" weight="bold" as="div">
+              Admin User
+            </Text>
+            <Text size="1" color="gray">
+              admin@example.com
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
+
+export default SidebarContent;

apps/frontend/app/components/layout/types.ts

@@ -0,0 +1 @@
+export type NavItem = 'Dashboard' | 'Proxy Hosts' | 'Redirection' | 'SSL' | 'Settings' | 'Profile';

apps/frontend/app/components/theme.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { Theme } from '@radix-ui/themes';
+
+export type AppThemeProps = {
+  children: React.ReactNode;
+};
+
+export function AppTheme({ children }: AppThemeProps) {
+  return (
+    <Theme accentColor="iris" grayColor="slate" panelBackground="translucent" radius="large">
+      {children}
+    </Theme>
+  );
+}
+
+export default AppTheme;