pulsate-dev · Allianaab2m · Aug 18, 2024 · Aug 18, 2024 · Aug 18, 2024 · Aug 18, 2024
diff --git a/app/components/LoginForm.stories.tsx b/app/components/LoginForm.stories.tsx
@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import LoginForm from "./LoginForm";
+
+export default {
+  title: "LoginForm",
+  component: LoginForm
+} satisfies Meta<typeof LoginForm>;
+
+type Story = StoryObj<typeof LoginForm>;
+
+export const Default: Story = {};
diff --git a/app/components/LoginForm.tsx b/app/components/LoginForm.tsx
@@ -0,0 +1,33 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Link,
+  Text,
+  TextField
+} from "@radix-ui/themes";
+import { useTranslation } from "react-i18next";
+
+export default function LoginForm() {
+  const { t } = useTranslation();
+
+  return (
+    <Flex direction="column" gap="2">
+      <Heading>{t("login")}</Heading>
+      <Box>
+        <Text>{t("idAndMailAddress")}</Text>
+        <TextField.Root />
+      </Box>
+      <Box>
+        <Text>{t("password")}</Text>
+        <TextField.Root type="password" />
+      </Box>
+      <Flex direction="column" align="center" gap="2" mx="auto" mt="3">
+        <Button size="3">{t("login")}</Button>
+        <Link>{t("register")}</Link>
+        <Link>{t("forgotPassword")}</Link>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -21,7 +21,7 @@ export function Layout({ children }: { children: ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body style={{ margin: "0" }}>
         <I18nextProvider i18n={i18n.default}>
           <Theme>{children}</Theme>
         </I18nextProvider>

diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -1,86 +1,55 @@
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Link,
-  TabNav,
-  Text,
-  TextField
-} from "@radix-ui/themes";
+import { Box, Flex, Link, Text } from "@radix-ui/themes";
+import { version } from "package.json";
+import { useTranslation } from "react-i18next";
+import LoginForm from "~/components/LoginForm";
 
 export default function LoginPage() {
+  const { t } = useTranslation();
+
   return (
-    <Box>
-      <Flex
-        align="center"
-        justify="center"
-        m="-2"
-        width="100vw"
-        height="100vh"
-        direction="column"
+    <Flex
+      direction="column"
+      justify="end"
+      align="center"
+      minHeight="100vh"
+      style={{ backgroundColor: "#0f0e3b" }}
+    >
+      <Box
         style={{
-          background: "#0f0e3b"
+          borderStyle: "solid",
+          borderWidth: "1px",
+          borderRadius: "var(--radius-6)",
+          backgroundColor: "var(--gray-1)"
         }}
+        minWidth={{ xs: "520px" }}
+        p="6"
+        mx="4"
+        my="auto"
       >
-        <Flex
+        <LoginForm />
+      </Box>
+      <Flex
+        direction={{ initial: "column", xs: "row" }}
+        mr="auto"
+        ml="3"
+        mb="2"
+        gap={{ initial: "1", xs: "2" }}
+      >
+        <Text style={{ color: "var(--gray-1)" }}>
+          {t("appName")} v.{version}
+        </Text>
+        <Link style={{ color: "var(--gray-1)" }}>{t("aboutPulsate")}</Link>
+        <Link
+          href="https://github.com/pulsate-dev/pulsate"
           style={{
-            background: "var(--gray-9)",
-            borderRadius: "var(--radius-3)",
-            minWidth: "30%"
+            color: "var(--gray-1)",
+            textDecoration: "underline",
+            textDecorationColor: "var(--accent-6)"
           }}
-          direction="column"
-          gap="4"
-          p="4"
         >
-          <Text size="6" weight="bold" style={{}}>
-            ログイン
-          </Text>
-          <Box>
-            <Text size="4" style={{}}>
-              ID/メールアドレス
-            </Text>
-            <TextField.Root />
-          </Box>
-          <Box>
-            <Text size="4" style={{}}>
-              パスワード
-            </Text>
-            <TextField.Root />
-          </Box>
-          <Button style={{ margin: "auto", maxWidth: "100px" }}>
-            ログイン
-          </Button>
-          <Link href="/register" style={{ margin: "auto" }}>
-            新規登録
-          </Link>
-        </Flex>
+          {t("sourceCode")}
+        </Link>
       </Flex>
-      <footer
-        style={{ position: "absolute", bottom: 0, color: "var(--gray-1)" }}
-      >
-        <Flex gap="4">
-          <Text style={{ color: "var(--gray-1)" }}>Pulsate v0.1.0</Text>
-          <Link
-            href="https://pulsate.dev/about"
-            underline="always"
-            style={{
-              color: "var(--gray-1)"
-            }}
-          >
-            Pulsateについて
-          </Link>
-          <Link
-            href="https://github.com/pulsate-dev"
-            underline="always"
-            style={{
-              color: "var(--gray-1)"
-            }}
-          >
-            ソースコード
-          </Link>
-        </Flex>
-      </footer>
-    </Box>
+    </Flex>
   );
 }
diff --git a/i18n/locales/en_US.json b/i18n/locales/en_US.json
@@ -1,4 +1,12 @@
 {
   "appName": "Pulsate",
-  "welcome": "Welcome"
+  "welcome": "Welcome",
+  "login": "Login",
+  "id": "ID",
+  "idAndMailAddress": "ID / Email Address",
+  "password": "Password",
+  "register": "Register",
+  "forgotPassword": "Forgot password...",
+  "aboutPulsate": "About Pulsate",
+  "sourceCode": "Source code"
 }
diff --git a/i18n/locales/ja_JP.json b/i18n/locales/ja_JP.json
@@ -1,4 +1,12 @@
 {
   "appName": "Pulsate",
-  "welcome": "ようこそ"
+  "welcome": "ようこそ",
+  "login": "ログイン",
+  "id": "ID",
+  "idAndMailAddress": "ID / メールアドレス",
+  "password": "パスワード",
+  "register": "新規登録",
+  "forgotPassword": "パスワードを忘れたら...",
+  "aboutPulsate": "Pulsateについて",
+  "sourceCode": "ソースコード"
 }