feat(auth): add Sign In with Patreon

itsjavi · Aug 24, 2024 · 352b901 · 352b901 · vercel · Aug 24, 2024
1 parent 2610e18
commit 352b901
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/src/features/users/components/PatreonButtons.tsx b/src/features/users/components/PatreonButtons.tsx
@@ -3,16 +3,17 @@ import { signIn } from 'next-auth/react'
 import { Routes } from '@/config/routes'
 import Button from '@/lib/components/Button'
 
-export function PatreonButton() {
+export function PatreonButton({ children, ...rest }: { children?: string } & any) {
   return (
     <Button
       className="btn btn-secondary"
       style={{ padding: '5px 15px' }}
+      {...rest}
       onClick={() => {
         signIn('patreon', { callbackUrl: window.location.origin + '/profile?patreon=ok' })
       }}
     >
-      Link your Patreon account
+      {children || 'Link your Patreon account'}
     </Button>
   )
 }

diff --git a/src/features/users/views/LoginView.tsx b/src/features/users/views/LoginView.tsx
@@ -6,9 +6,11 @@ import { Routes } from '@/config/routes'
 import { useSession } from '@/features/users/auth/hooks/useSession'
 import EmailSigninView from '@/features/users/views/EmailSigninView'
 import TokenSignInView from '@/features/users/views/TokenSignInView'
+import Button from '@/lib/components/Button'
 import { SiteLink } from '@/lib/components/Links'
 import { LoadingBanner } from '@/lib/components/panels/LoadingBanner'
 import { LoadingRedirectBanner } from '@/lib/components/panels/LoadingRedirectBanner'
+import { PatreonButton } from '../components/PatreonButtons'
 
 export function LoginView({ csrfToken }: { csrfToken: string | null }): JSX.Element {
   const router = useRouter()
@@ -64,22 +66,51 @@ export function LoginView({ csrfToken }: { csrfToken: string | null }): JSX.Elem
         progress and use all other upcoming features of the website.
       </p>
       {!tokenMode && (
-        <>
+        <div>
           <EmailSigninView csrfToken={csrfToken} />
-          <p>
-            Do you want to use the token you got via email?{' '}
-            <a
-              href="#"
-              onClick={(e) => {
-                e.preventDefault()
-                setTokenMode(true)
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              margin: '1rem 0',
+              gap: '1rem',
+              padding: '0 1rem',
+            }}
+          >
+            <hr
+              style={{
+                border: 'none',
+                height: '1px',
+                flex: '1',
+                borderBottom: '1px dotted currentColor',
+                opacity: '0.5',
               }}
-              style={{ color: 'var(--color-link)', textDecoration: 'underline' }}
-            >
-              Sign In with Token
-            </a>
-          </p>
-        </>
+            />
+            or
+            <hr
+              style={{
+                border: 'none',
+                height: '1px',
+                flex: '1',
+                borderBottom: '1px dotted currentColor',
+                opacity: '0.5',
+              }}
+            />
+          </div>
+          <Button
+            title="Sign In with the token you got via email"
+            onClick={(e: any) => {
+              e.preventDefault()
+              setTokenMode(true)
+            }}
+          >
+            Sign In with Token from Email
+          </Button>
+          <PatreonButton style={{}} className="btn">
+            Sign In with Patreon
+          </PatreonButton>
+        </div>
       )}
       {tokenMode && <TokenSignInView csrfToken={csrfToken} />}
       <p style={{ fontStyle: 'italic', fontSize: '0.9rem' }}>

diff --git a/src/features/users/views/ProfileView.tsx b/src/features/users/views/ProfileView.tsx
@@ -60,6 +60,10 @@ export function ProfileView(): JSX.Element | null {
     await signOut(true, '/login')
   }
 
+  if (auth.membership) {
+    auth.membership.avatarUrl = auth.membership.avatarUrl || auth.currentUser?.photoUrl || undefined
+  }
+
   return (
     <UserRestrictedArea>
       <div>