feat: some b2b app example

8iq · Jun 8, 2024 · a3ad6a6 · a3ad6a6
1 parent 6551f24
commit a3ad6a6
Show file tree

Hide file tree

Showing 35 changed files with 1,905 additions and 0 deletions.
diff --git a/apps/web/README.md b/apps/web/README.md
@@ -2,3 +2,12 @@
 
 Simple Front-End WEB app example
 
+# What do you need to change?
+
+1. You need to stats from `providers.tsx` logic and
+   create your own `AuthProvider` and `DataProvider` and `resources`.
+
+   DOCS: https://refine.dev/docs/data/data-provider/
+
+2. 
+
diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
@@ -0,0 +1,18 @@
+'use server'
+
+import { Show } from '@repo/ui/refine/antd'
+import React from 'react'
+
+import { Layout } from 'web/components/Layout'
+
+
+export default async function DashboardPage (): Promise<React.JSX.Element> {
+  return (
+    <Layout>
+      <Show headerButtons={[]}>
+        <h1>Dashboard!</h1>
+        <p>Content of your show page...</p>
+      </Show>
+    </Layout>
+  )
+}
diff --git a/apps/web/app/forgot-password/page.tsx b/apps/web/app/forgot-password/page.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { AuthPage } from '@repo/ui/refine/antd'
+import { useParsed } from '@repo/ui/refine/core'
+import React from 'react'
+
+import { BrandTitle } from 'web/components/BrandTitle'
+
+interface QueryProps {
+  email?: string
+}
+
+export default function ForgotPasswordPage (): React.JSX.Element {
+  const { params } = useParsed<QueryProps>()
+
+  const emailFromSearchParams = params['email']
+
+  const initialValues = emailFromSearchParams
+    ? { email: emailFromSearchParams }
+    : undefined
+
+  return (
+    <AuthPage
+      type="forgotPassword"
+      formProps={{ initialValues }}
+      title={<BrandTitle collapsed={false}/>}
+    />
+  )
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -0,0 +1,38 @@
+:root {
+    --max-width: 1100px;
+    --border-radius: 12px;
+    --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+
+    --glow-conic: conic-gradient(
+            from 180deg at 50% 50%,
+            #2a8af6 0deg,
+            #a853ba 180deg,
+            #e92a67 360deg
+    );
+}
+
+html,
+body {
+    max-width: 100vw;
+    overflow-x: hidden;
+}
+
+body {
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(
+            to bottom,
+            transparent,
+            rgb(var(--background-end-rgb))
+    ) rgb(var(--background-start-rgb));
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -0,0 +1,22 @@
+import { dir, getLocale } from '@repo/i18n/server'
+import { Inter } from 'next/font/google'
+
+// import './globals.css'
+import React from 'react'
+import { Providers } from './providers'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default async function RootLayout ({ children }: {
+  children: React.ReactNode
+}): Promise<React.JSX.Element> {
+  const locale = await getLocale()
+
+  return (
+    <html lang={locale} dir={dir(locale)}>
+    <body className={inter.className}>
+    <Providers locale={locale}>{(children)}</Providers>
+    </body>
+    </html>
+  )
+}
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { GithubOutlined, GoogleOutlined } from '@repo/ui/icons'
+import { AuthPage } from '@repo/ui/refine/antd'
+import { useLogin, useParsed, useTranslate } from '@repo/ui/refine/core'
+import React, { useEffect } from 'react'
+
+import { BrandTitle } from 'web/components/BrandTitle'
+
+interface QueryProps {
+  email?: string
+  accessToken?: string
+  refreshToken?: string
+}
+
+export default function LoginPage (): React.JSX.Element {
+  const { params } = useParsed<QueryProps>()
+  const { mutate } = useLogin()
+  const translate = useTranslate()
+
+  const emailFromSearchParams = params['email']
+  const accessToken = params['accessToken']
+  const refreshToken = params['refreshToken']
+
+  const initialValues = emailFromSearchParams
+    ? { email: emailFromSearchParams }
+    : undefined
+
+  useEffect(() => {
+    if (accessToken && refreshToken) {
+      mutate({
+        accessToken,
+        refreshToken,
+      })
+    }
+  }, [accessToken, refreshToken])
+
+  return (
+    <AuthPage
+      type="login"
+      formProps={{ initialValues }}
+      title={<BrandTitle collapsed={false}/>}
+      providers={[
+        {
+          name: 'google',
+          label: translate("pages.login.google", 'Sign in with Google'),
+          icon: (
+            <GoogleOutlined
+              style={{
+                fontSize: 24,
+                lineHeight: 0,
+              }}
+            />
+          ),
+        },
+        {
+          name: 'github',
+          label: translate("pages.login.github", 'Sign in with GitHub'),
+          icon: (
+            <GithubOutlined
+              style={{
+                fontSize: 24,
+                lineHeight: 0,
+              }}
+            />
+          ),
+        },
+      ]}
+    />
+  )
+}