Fix providers and re-create DB

.env.example

@@ -3,8 +3,6 @@
 NEXTAUTH_SECRET=toBeChanged
 GOOGLE_CLIENT_ID=toBeChanged
 GOOGLE_CLIENT_SECRET=toBeChanged
-FACEBOOK_CLIENT_ID=toBeChanged
-FACEBOOK_CLIENT_SECRET=toBeChanged
 
 # If not set, BASE_URL and NEXTAUTH_URL will default to VERCEL_URL
 BASE_URL=http://localhost:3000

drizzle/0000_nebulous_mauler.sql → drizzle/0000_mute_harrier.sql

@@ -1,7 +1,6 @@
 CREATE TABLE `place` (
 	`id` serial AUTO_INCREMENT NOT NULL,
-	`title` text NOT NULL,
-	`createdAt` timestamp NOT NULL DEFAULT (now()),
+	`name` text NOT NULL,
 	CONSTRAINT `place_id` PRIMARY KEY(`id`)
 );
 --> statement-breakpoint
@@ -15,7 +14,7 @@ CREATE TABLE `account` (
 	`expires_at` int,
 	`token_type` varchar(255),
 	`scope` varchar(255),
-	`id_token` varchar(255),
+	`id_token` text,
 	`session_state` varchar(255),
 	CONSTRAINT `account_provider_providerAccountId` PRIMARY KEY(`provider`,`providerAccountId`)
 );

drizzle/meta/0000_snapshot.json

@@ -1,7 +1,7 @@
 {
   "version": "5",
   "dialect": "mysql",
-  "id": "5b2a885d-a094-435d-9d05-24c29fb45d98",
+  "id": "7ed78391-6147-422a-aabe-4142c0e039c0",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "place": {
@@ -14,20 +14,12 @@
           "notNull": true,
           "autoincrement": true
         },
-        "title": {
-          "name": "title",
+        "name": {
+          "name": "name",
           "type": "text",
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false
-        },
-        "createdAt": {
-          "name": "createdAt",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
         }
       },
       "indexes": {},
@@ -110,7 +102,7 @@
         },
         "id_token": {
           "name": "id_token",
-          "type": "varchar(255)",
+          "type": "text",
           "primaryKey": false,
           "notNull": false,
           "autoincrement": false

drizzle/meta/_journal.json

@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "5",
-      "when": 1697215727115,
-      "tag": "0000_nebulous_mauler",
+      "when": 1697892204087,
+      "tag": "0000_mute_harrier",
       "breakpoints": true
     }
   ]

src/app/[locale]/(app)/explore/_components/place-list.tsx

@@ -34,10 +34,7 @@ export const PlaceList: FC<Omit<HTMLAttributes<HTMLElement>, 'children'>> = ({
           key={place.id}
           className="flex items-center justify-between rounded border border-gray-500 px-4 py-2"
         >
-          <span className="text-lg">{place.title}</span>
-          <span className="text-sm text-gray-500">
-            {t('createdDate', { createdDate: place.createdAt })}
-          </span>
+          <span className="text-lg">{place.name}</span>
         </li>
       ))}
     </ul>

src/app/[locale]/(app)/profile/_components/continue-with-provider.tsx

@@ -1,50 +1,31 @@
 'use client'
 
 import { Button } from '@nextui-org/button'
-import { IconBrandFacebook, IconBrandGoogle } from '@tabler/icons-react'
 import { signIn } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
 import { FC } from 'react'
+import { GoogleGLogo } from '~/components/icons/google-g-logo'
 import { cn } from '~/helpers/cn'
 
 export const ContinueWithProvider: FC<{
   className?: string
-  isProduction?: boolean
-}> = ({ className, isProduction }) => {
+}> = ({ className }) => {
   const t = useTranslations('profile.login')
 
   return (
     <div
-      className={cn(
-        'grid grid-cols-2 gap-2 xs:gap-4',
-        !isProduction &&
-          'relative cursor-not-allowed after:pointer-events-none after:absolute after:-inset-2 after:z-10 after:flex after:items-center after:justify-center after:rounded-xl after:bg-stone-200/70 after:px-4 after:text-center after:font-bold after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out after:content-[attr(data-after)] hover:after:opacity-100',
-        className
-      )}
+      className={cn('flex flex-wrap items-center justify-center', className)}
       data-after={t('not-supported')}
-      tabIndex={isProduction ? undefined : -1}
-      aria-hidden={!isProduction}
     >
       <Button
-        onClick={() =>
-          signIn('google', { callbackUrl: '/api/auth/callback/google' })
-        }
+        onClick={() => signIn('google')}
         variant="solid"
-        className="bg-rose-600 text-white"
-        startContent={<IconBrandGoogle size={20} />}
+        className=" border border-stone-200 bg-white text-stone-800 shadow-md"
+        fullWidth
+        startContent={<GoogleGLogo size={20} />}
       >
         <span className="flex-grow">{t('providers.google')}</span>
       </Button>
-      <Button
-        onClick={() =>
-          signIn('facebook', { callbackUrl: '/api/auth/callback/facebook' })
-        }
-        variant="solid"
-        className="bg-blue-600 text-white"
-        startContent={<IconBrandFacebook size={20} />}
-      >
-        <span className="flex-grow">{t('providers.facebook')}</span>
-      </Button>
     </div>
   )
 }

src/app/[locale]/(app)/profile/_components/profile-login.tsx

@@ -3,42 +3,37 @@ import { FC } from 'react'
 import { LinkButton } from '~/components/link-button'
 import { ContinueWithProvider } from './continue-with-provider'
 import { ContinueWithEmail } from './continue-with-email'
-import { env } from 'process'
+import { RegisterBanner } from './register-banner'
 
 export const ProfileLogin: FC = () => {
   const t = useTranslations('profile.login')
 
   return (
     <>
-      <div className="h-auto rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 bg-cover bg-center object-fill p-6 text-white shadow-lg shadow-purple-500/50">
-        <div className="mb-10 ">
-          <p className="text-sm font-bold uppercase">{t('banner.subtitle')}</p>
-          <h3 className="font-title text-3xl font-bold">{t('banner.title')}</h3>
-          <p className="text-lg leading-none">{t('banner.text')}</p>
+      <RegisterBanner />
+
+      <div className="mx-auto mt-10  max-w-sm">
+        <h2 className="mb-2 text-center font-title text-2xl font-semibold uppercase text-stone-800">
+          {t('login')}
+        </h2>
+        <ContinueWithEmail />
+
+        <div className="mb-2 mt-4 flex items-center gap-2">
+          <div className="flex-1 border-t border-stone-300" aria-hidden />
+          <h3 className=" inline-block font-title text-sm font-medium uppercase text-stone-600">
+            {t('continue-with')}
+          </h3>
+          <div className="flex-1 border-t border-stone-300" aria-hidden />
         </div>
+        <ContinueWithProvider />
 
-        <LinkButton
-          href="/register"
-          radius="full"
-          className="bg-white font-medium uppercase text-purple-500"
-        >
+        <h2 className="mb-2 mt-10 text-center font-title text-2xl font-semibold uppercase text-stone-800">
+          {t('register')}
+        </h2>
+        <LinkButton href="/register" variant="solid" color="primary" fullWidth>
           {t('register')}
         </LinkButton>
       </div>
-
-      <h2 className="mt-8 font-title text-2xl font-medium">
-        {t('login-with')}
-      </h2>
-      <ContinueWithEmail />
-      <ContinueWithProvider
-        className="mt-8"
-        isProduction={env.NODE_ENV === 'production'}
-      />
-
-      <h2 className="mt-8 font-title text-2xl font-medium">{t('register')}</h2>
-      <LinkButton href="/register" variant="solid" color="primary">
-        {t('register')}
-      </LinkButton>
     </>
   )
 }

src/app/[locale]/(app)/profile/_components/register-banner.tsx

@@ -0,0 +1,33 @@
+import { Button } from '@nextui-org/button'
+import { useTranslations } from 'next-intl'
+import Link from 'next-intl/link'
+import { FC } from 'react'
+import { cn } from '~/helpers/cn'
+
+export const RegisterBanner: FC<{
+  className?: string
+}> = ({ className }) => {
+  const t = useTranslations('profile.register-banner')
+  return (
+    <Link
+      href="/register"
+      className="block h-auto rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 bg-cover bg-center object-fill p-6 text-white shadow-lg shadow-purple-500/50"
+    >
+      <div className={cn('mb-10', className)}>
+        <p className="text-sm font-bold uppercase">{t('subtitle')}</p>
+        <h3 className="font-title text-3xl font-bold uppercase">
+          {t('title')}
+        </h3>
+        <p className="text-lg leading-none">{t('text')}</p>
+      </div>
+
+      <Button
+        radius="full"
+        className="bg-white font-medium uppercase text-purple-500"
+        tabIndex={-1}
+      >
+        {t('register')}
+      </Button>
+    </Link>
+  )
+}

src/app/[locale]/page.tsx

@@ -4,7 +4,7 @@ import { getTranslator } from 'next-intl/server'
 import type { FC } from 'react'
 import { LanguageSwitcher } from '~/components/language-switcher'
 import { LinkButton } from '~/components/link-button'
-import { Logo } from '~/components/logo'
+import { Logo } from '~/components/icons/logo'
 import type { LocaleRouteParams } from '~/i18n'
 
 export async function generateMetadata({
@@ -28,9 +28,10 @@ const HomePage: FC<LocaleRouteParams> = () => {
       <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center p-4 text-center text-stone-800">
         <div className="origin-bottom animate-wiggle">
           <Logo
-            className="anima mb-4 h-24 animate-hover text-brand-600"
+            className="anima mb-4 animate-hover text-brand-600"
             outline
             stroke={1.25}
+            size={96}
           />
         </div>
 

src/app/[locale]/register/layout.tsx

@@ -0,0 +1,39 @@
+import { Navbar, NavbarContent, NavbarItem } from '@nextui-org/navbar'
+import { useTranslations } from 'next-intl'
+import type { FC, PropsWithChildren } from 'react'
+import { LinkButton } from '~/components/link-button'
+import type { LocaleRouteParams } from '~/i18n'
+
+type RegisterLayoutProps = PropsWithChildren<LocaleRouteParams>
+
+const RegisterLayout: FC<RegisterLayoutProps> = ({ children }) => {
+  const t = useTranslations('register')
+
+  return (
+    <>
+      <Navbar
+        shouldHideOnScroll
+        isBlurred={false}
+        isBordered
+        classNames={{ wrapper: 'max-w-2xl' }}
+      >
+        <NavbarContent justify="start">
+          <NavbarItem>
+            <h1 className="font-title">{t('heading')}</h1>
+          </NavbarItem>
+        </NavbarContent>
+        <NavbarContent justify="end">
+          <NavbarItem>
+            <LinkButton href="/profile" variant="solid" color="primary">
+              {t('go-to-app')}
+            </LinkButton>
+          </NavbarItem>
+        </NavbarContent>
+      </Navbar>
+
+      <main className="mx-auto max-w-2xl px-6 py-3">{children}</main>
+    </>
+  )
+}
+
+export default RegisterLayout

src/app/[locale]/register/page.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from 'next'
+import { useTranslations } from 'next-intl'
+import { getTranslator } from 'next-intl/server'
+import type { FC } from 'react'
+import { UnderConstruction } from '~/components/under-construction'
+import type { LocaleRouteParams } from '~/i18n'
+
+export async function generateMetadata({
+  params,
+}: LocaleRouteParams): Promise<Metadata> {
+  const t = await getTranslator(params.locale, 'register')
+  return {
+    title: t('meta.title'),
+    description: t('meta.description'),
+  }
+}
+
+const RegisterPage: FC<LocaleRouteParams> = () => {
+  const t = useTranslations('register')
+  return (
+    <>
+      <UnderConstruction />
+      <p className="text-center">{t('content')}</p>
+    </>
+  )
+}
+
+export default RegisterPage

src/components/icons/google-g-logo.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react'
+
+export const GoogleGLogo: FC<{
+  className?: string
+  size?: number
+}> = ({ className, size = 24 }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={size}
+      viewBox="0 0 24 24"
+      width={size}
+      className={className}
+    >
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+      <path d="M1 1h22v22H1z" fill="none" />
+    </svg>
+  )
+}

src/components/navbar/bottom-navbar.tsx

@@ -62,7 +62,7 @@ export const BottomNavbar = async () => {
           }
         />
       </ul>
-      <div className="-z-1 pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div className="pointer-events-none absolute inset-0 -z-10 flex items-center justify-center">
         <DbEnvironmentTag />
       </div>
     </nav>

src/env.mjs

@@ -11,8 +11,6 @@ const server = z.object({
 
   GOOGLE_CLIENT_ID: z.string().min(1),
   GOOGLE_CLIENT_SECRET: z.string().min(1),
-  FACEBOOK_CLIENT_ID: z.string().min(1),
-  FACEBOOK_CLIENT_SECRET: z.string().min(1),
 
   BASE_URL: z.string().regex(/https?:\/\/\w+(\.\w+)*(:\d{4})?/),
   NEXTAUTH_URL: z.string().regex(/https?:\/\/\w+(\.\w+)*(:\d{4})?/),
@@ -71,10 +69,6 @@ const processEnv = {
     process.env.GOOGLE_CLIENT_ID ?? FAKE_VALUE_ONLY_FOR_DEVELOPMENT,
   GOOGLE_CLIENT_SECRET:
     process.env.GOOGLE_CLIENT_SECRET ?? FAKE_VALUE_ONLY_FOR_DEVELOPMENT,
-  FACEBOOK_CLIENT_ID:
-    process.env.FACEBOOK_CLIENT_ID ?? FAKE_VALUE_ONLY_FOR_DEVELOPMENT,
-  FACEBOOK_CLIENT_SECRET:
-    process.env.FACEBOOK_CLIENT_SECRET ?? FAKE_VALUE_ONLY_FOR_DEVELOPMENT,
 
   BASE_URL: process.env.BASE_URL ?? VERCEL_URL_WITH_PROTOCOL,
   VERCEL_URL: process.env.VERCEL_URL,