From cd437117fafcb6f399ca4cbf15fcc001caedae12 Mon Sep 17 00:00:00 2001
From: Altay <altay@zebrastik.com>
Date: Mon, 11 Dec 2023 23:44:38 +0300
Subject: [PATCH] feat: implement sign-in page

---
 app/(auth)/layout.tsx                 | 30 ++++++++++++----------
 app/(auth)/sign-in/page.stories.tsx   | 13 ++++++++++
 app/(auth)/sign-in/page.tsx           | 36 ++++++++++++++++++++++++---
 components/layout/app-header-logo.tsx | 24 ++++++++++++++++++
 components/layout/app-header.tsx      | 33 +++---------------------
 components/logo.tsx                   | 19 ++++++++++++++
 components/theme-provider/styles.css  |  4 +++
 package.json                          |  1 +
 pnpm-lock.yaml                        | 11 ++++++++
 9 files changed, 124 insertions(+), 47 deletions(-)
 create mode 100644 app/(auth)/sign-in/page.stories.tsx
 create mode 100644 components/layout/app-header-logo.tsx
 create mode 100644 components/logo.tsx

diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index bcffa81..5394b02 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,20 +1,24 @@
 import type { PropsWithChildren } from 'react';
 
-import { Flex } from '@radix-ui/themes';
+import { Logo } from '@/components/logo';
+import { Container, Flex } from '@radix-ui/themes';
 
 export default function AuthLayout(props: PropsWithChildren) {
   return (
-    <Flex
-      direction="column"
-      gap="4"
-      mx="auto"
-      style={{
-        alignItems: 'center',
-        height: '100vh',
-        justifyContent: 'center',
-      }}
-    >
-      {props.children}
-    </Flex>
+    <Container size="1">
+      <Flex
+        direction="column"
+        gap="4"
+        mx="auto"
+        style={{
+          alignItems: 'start',
+          justifyContent: 'center',
+          minHeight: '80vh',
+        }}
+      >
+        <Logo size={64} />
+        {props.children}
+      </Flex>
+    </Container>
   );
 }
diff --git a/app/(auth)/sign-in/page.stories.tsx b/app/(auth)/sign-in/page.stories.tsx
new file mode 100644
index 0000000..8073432
--- /dev/null
+++ b/app/(auth)/sign-in/page.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SignInPage from './page';
+
+const meta: Meta<typeof SignInPage> = {
+  component: SignInPage,
+};
+
+export const Default: StoryObj<typeof SignInPage> = {
+  render: () => <SignInPage />,
+};
+
+export default meta;
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index 468b058..dcdfd59 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -1,9 +1,37 @@
-import { Button } from '@radix-ui/themes';
+import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { FaSpotify } from 'react-icons/fa';
 
 export default function Page() {
   return (
-    <form action="/auth/sign-in" method="POST">
-      <Button type="submit">Sign in with Spotify</Button>
-    </form>
+    <Flex direction="column" gap="4">
+      <Heading>Welcome to Beecast</Heading>
+
+      <Text color="gray" size="4">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod
+        quia quibusdam quos quae.
+      </Text>
+
+      <form action="/auth/sign-in" method="POST">
+        <Flex direction="column">
+          <Button color="gray" highContrast size="3" type="submit">
+            <FaSpotify />
+            Continue with Spotify
+          </Button>
+        </Flex>
+      </form>
+
+      <Text color="gray" size="1">
+        By clicking continue, you acknowledge that you have read and understood,
+        and agree to our{' '}
+        <Link href="/terms-of-service" target="_blank">
+          Terms of Service
+        </Link>{' '}
+        and{' '}
+        <Link href="/privacy-policy" target="_blank">
+          Privacy Policy
+        </Link>
+        .
+      </Text>
+    </Flex>
   );
 }
diff --git a/components/layout/app-header-logo.tsx b/components/layout/app-header-logo.tsx
new file mode 100644
index 0000000..582a328
--- /dev/null
+++ b/components/layout/app-header-logo.tsx
@@ -0,0 +1,24 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import Link from 'next/link';
+
+import { Logo } from '../logo';
+
+export function AppHeaderLogo() {
+  return (
+    <Flex align="center" asChild gap="2">
+      <Link
+        href="/"
+        style={{
+          color: 'inherit',
+          textDecoration: 'none',
+        }}
+      >
+        <Logo />
+
+        <Heading size="5" weight="medium">
+          Beecast
+        </Heading>
+      </Link>
+    </Flex>
+  );
+}
diff --git a/components/layout/app-header.tsx b/components/layout/app-header.tsx
index 2fc8dbd..c0de3ca 100644
--- a/components/layout/app-header.tsx
+++ b/components/layout/app-header.tsx
@@ -1,16 +1,9 @@
 import { ArrowRightIcon, PersonIcon } from '@radix-ui/react-icons';
-import {
-  Avatar,
-  Button,
-  DropdownMenu,
-  Flex,
-  Heading,
-  Text,
-} from '@radix-ui/themes';
-import Image from 'next/image';
+import { Avatar, Button, DropdownMenu, Flex, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 
 import { AppContent } from './app-content';
+import { AppHeaderLogo } from './app-header-logo';
 
 type Props =
   | {
@@ -83,27 +76,7 @@ export function AppHeader(props: Props) {
     <Flex direction="column" gap="4" py="4">
       <AppContent>
         <Flex align="center" justify="between">
-          <Flex align="center" asChild gap="2">
-            <Link
-              href="/"
-              style={{
-                color: 'inherit',
-                textDecoration: 'none',
-              }}
-            >
-              <Image
-                alt="beecast logo"
-                height="48"
-                src="/logo.png"
-                style={{ display: 'block' }}
-                width="48"
-              />
-
-              <Heading size="5" weight="medium">
-                Beecast
-              </Heading>
-            </Link>
-          </Flex>
+          <AppHeaderLogo />
 
           {props.variant === 'authenticated' ? (
             <AppHeaderActionsAuthenticated {...props} />
diff --git a/components/logo.tsx b/components/logo.tsx
new file mode 100644
index 0000000..e8db0d3
--- /dev/null
+++ b/components/logo.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+
+import Image from 'next/image';
+
+type Props = {
+  size?: ComponentProps<typeof Image>['width'];
+};
+
+export function Logo(props: Props) {
+  return (
+    <Image
+      alt="beecast logo"
+      height={props.size || 48}
+      src="/logo.png"
+      style={{ display: 'block' }}
+      width={props.size || 48}
+    />
+  );
+}
diff --git a/components/theme-provider/styles.css b/components/theme-provider/styles.css
index a3de752..71a8267 100644
--- a/components/theme-provider/styles.css
+++ b/components/theme-provider/styles.css
@@ -3,3 +3,7 @@
 body {
   margin: 0;
 }
+
+.radix-themes {
+  --cursor-button: pointer;
+}
diff --git a/package.json b/package.json
index 49829b2..559e5c7 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "ofetch": "^1.3.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^4.12.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2913a9a..292ef4f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
   react-dom:
     specifier: ^18
     version: 18.2.0(react@18.2.0)
+  react-icons:
+    specifier: ^4.12.0
+    version: 4.12.0(react@18.2.0)
   zod:
     specifier: ^3.22.4
     version: 3.22.4
@@ -10911,6 +10914,14 @@ packages:
       react-is: 18.1.0
     dev: true
 
+  /react-icons@4.12.0(react@18.2.0):
+    resolution: {integrity: sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true