flowlink-auth 2.8.1 → 2.8.3

package/src/SignIn.jsx

@@ -1,6 +1,6 @@
-// src/signin.jsx
 'use client'
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import Link from 'next/link'
 import { useAuth } from './provider.js'
 
 export default function SignIn({ onSuccess } = {}) {
@@ -14,13 +14,51 @@ export default function SignIn({ onSuccess } = {}) {
     completeLogin,
     fetchMe,
     setUser
-  } = useAuth()
+  } = (typeof useAuth === 'function' ? useAuth() : {}) || {}
 
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(null)
-  const [message, setMessage] = useState(null)
+  const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false })
+
+  const redirectTimer = useRef(null)
+  const toastId = useRef(0)
+  const [toasts, setToasts] = useState([])
+
+  useEffect(() => {
+    // soft-disable pinch-zoom on mobile while mounted
+    const meta = document.createElement('meta')
+    meta.name = 'viewport'
+    meta.content = 'width=device-width, initial-scale=1, maximum-scale=1'
+    document.head.appendChild(meta)
+
+    return () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current)
+      const existing = document.querySelector('meta[name="viewport"]')
+      if (existing && existing.content === meta.content) document.head.removeChild(existing)
+      // clear timers for toasts
+      toasts.forEach(t => { if (t._timer) clearTimeout(t._timer) })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Toast helpers (black background)
+  function showToast(type, message, ms = 5000) {
+    const id = ++toastId.current
+    const t = { id, type, message, _timer: null }
+    setToasts(prev => [t, ...prev].slice(0, 6))
+    const timer = setTimeout(() => {
+      setToasts(prev => prev.filter(x => x.id !== id))
+    }, ms)
+    t._timer = timer
+  }
+
+  function removeToast(id) {
+    setToasts(prev => {
+      prev.forEach(t => { if (t.id === id && t._timer) clearTimeout(t._timer) })
+      return prev.filter(x => x.id !== id)
+    })
+  }
 
   if (loadingUser) return null
 
@@ -32,19 +70,18 @@ export default function SignIn({ onSuccess } = {}) {
 
   async function submit(e) {
     e.preventDefault()
-    setError(null)
-    setMessage(null)
+    if (loading) return
+    setLoading(true)
 
     if (!email || !password) {
-      setError('Email and password are required')
+      showToast('error', 'Email and password are required')
+      setLoading(false)
       return
     }
 
-    setLoading(true)
+    const endpoint = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/login`
 
     try {
-      const endpoint = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/login`
-
       const res = await fetch(endpoint, {
         method: 'POST',
         credentials: 'include',
@@ -57,9 +94,9 @@ export default function SignIn({ onSuccess } = {}) {
 
       const ct = res.headers.get('content-type') || ''
       let data = {}
-      if (ct.includes('application/json')) data = await res.json()
+      if (ct.includes('application/json')) data = await res.json().catch(() => ({}))
       else {
-        const text = await res.text()
+        const text = await res.text().catch(() => '')
         throw new Error(`Unexpected response (status ${res.status}): ${text.slice(0, 200)}`)
       }
 
@@ -84,36 +121,33 @@ export default function SignIn({ onSuccess } = {}) {
         try { onSuccess(data) } catch (_) {}
       }
 
-      setMessage('Signed in. Redirecting...')
+      showToast('success', 'Signed in. Redirecting...')
       if (redirect) {
-        setTimeout(() => {
+        redirectTimer.current = setTimeout(() => {
           if (typeof redirectTo === 'function') redirectTo(redirect)
           else if (typeof window !== 'undefined') window.location.assign(redirect)
         }, 250)
       }
     } catch (err) {
-      setError(err.message || 'Network error')
+      showToast('error', err?.message || 'Network error')
+      console.error('Signin error:', err)
     } finally {
       setLoading(false)
     }
   }
 
-  // --- OAuth start flow (Google / GitHub) ---
   async function startOAuthFlow(provider) {
-    setError(null)
-    setLoading(true)
-
+    // prevent double start
+    if (loading || loadingOauth[provider]) return
+    setLoadingOauth(prev => ({ ...prev, [provider]: true }))
     try {
       const rid =
         (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
           ? crypto.randomUUID()
           : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
 
-      // Use main app signin page as callback so user lands on /signin after flow
-      const callbackUrl = encodeURIComponent(`${window.location.origin}/signin`)
-
-      const sdkBase = (typeof process !== 'undefined' && process.env && process.env.NEXT_PUBLIC_FLOWLINK_BASE_URL)
-        || baseUrl || 'http://localhost:3001'
+      const callbackUrl = encodeURIComponent(`${typeof window !== 'undefined' ? window.location.origin : ''}/signin`)
+      const sdkBase = baseUrl || (typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '')
       const startUrl = `${sdkBase.replace(/\/+$/, '')}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
 
       if (!publishableKey) {
@@ -130,11 +164,11 @@ export default function SignIn({ onSuccess } = {}) {
       if (!res.ok) throw new Error(data?.error || `OAuth start failed (${res.status})`)
       if (!data?.oauthUrl) throw new Error('SDK start did not return oauthUrl')
 
-      window.location.href = data.oauthUrl
+      if (typeof window !== 'undefined') window.location.href = data.oauthUrl
     } catch (err) {
+      showToast('error', err?.message || 'OAuth start failed')
       console.error('OAuth start error:', err)
-      setError(err?.message || 'OAuth start failed')
-      setLoading(false)
+      setLoadingOauth(prev => ({ ...prev, [provider]: false }))
     }
   }
 
@@ -150,6 +184,28 @@ export default function SignIn({ onSuccess } = {}) {
 
   return (
     <div style={overlay}>
+      {/* Toasts */}
+      <div style={toastContainer} aria-live="polite" aria-atomic="true">
+        {toasts.map(t => (
+          <div
+            key={t.id}
+            role="status"
+            style={{
+              ...toastBase,
+              ...(t.type === 'error' ? toastError : t.type === 'success' ? toastSuccess : toastInfo)
+            }}
+            onMouseEnter={() => { if (t._timer) clearTimeout(t._timer) }}
+            onMouseLeave={() => {
+              const timer = setTimeout(() => removeToast(t.id), 3000)
+              setToasts(prev => prev.map(x => x.id === t.id ? { ...x, _timer: timer } : x))
+            }}
+          >
+            <div style={{ flex: 1 }}>{t.message}</div>
+            <button aria-label="Dismiss" onClick={() => removeToast(t.id)} style={toastCloseBtn}>✕</button>
+          </div>
+        ))}
+      </div>
+
       <div style={modal}>
         <h2 style={title}>Sign in</h2>
         <p style={subtitle}>Welcome back — enter your credentials.</p>
@@ -180,17 +236,23 @@ export default function SignIn({ onSuccess } = {}) {
           </div>
 
           <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
-            <button type="button" onClick={handleGoogle} style={oauthButtonGoogle} disabled={loading}>
-              Continue with Google
+            <button type="button" onClick={handleGoogle} style={oauthButtonGoogle} disabled={loading || loadingOauth.google}>
+              <svg width={18} style={{ marginRight: 8 }} viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" fill="#000000" aria-hidden>
+                <path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"></path>
+                <path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"></path>
+                <path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"></path>
+                <path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"></path>
+              </svg>
+              <span>{loadingOauth.google ? 'Loading...' : 'Google'}</span>
             </button>
 
-            <button type="button" onClick={handleGithub} style={oauthButtonGithub} disabled={loading}>
-              Continue with GitHub
+            <button type="button" onClick={handleGithub} style={oauthButtonGithub} disabled={loading || loadingOauth.github}>
+              <svg width={18} style={{ marginRight: 8 }} xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 20 20" aria-hidden>
+                <path fillRule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clipRule="evenodd" />
+              </svg>
+              <span>{loadingOauth.github ? 'Loading...' : 'GitHub'}</span>
             </button>
           </div>
-
-          {error && <div style={errorBox}>{error}</div>}
-          {message && <div style={successBox}>{message}</div>}
         </form>
       </div>
     </div>
@@ -198,15 +260,116 @@ export default function SignIn({ onSuccess } = {}) {
 }
 
 /* styles */
-const overlay = { position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.45)', zIndex: 9999, padding: 20 }
-const modal = { width: '100%', maxWidth: 420, background: '#0f1724', color: '#fff', borderRadius: 12, padding: 22, boxShadow: '0 10px 30px rgba(2,6,23,0.6)', border: '1px solid rgba(255,255,255,0.04)' }
+const overlay = {
+  position: 'fixed',
+  inset: 0,
+  display: 'block', // allow page scroll
+  padding: 20,
+  background: 'linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))',
+  backdropFilter: 'blur(6px)',
+  overflowY: 'auto',
+  WebkitOverflowScrolling: 'touch',
+  minHeight: '100vh',
+  zIndex: 9999
+}
+
+const modal = {
+  width: '100%',
+  maxWidth: 460,
+  margin: '40px auto',
+  borderRadius: 14,
+  background: 'linear-gradient(180deg, rgba(15,19,24,0.85), rgba(10,12,16,0.85))',
+  border: '1px solid rgba(99,102,106,0.12)',
+  boxShadow: '0 18px 48px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
+  padding: 22,
+  color: '#fff'
+}
+
 const title = { margin: 0, fontSize: 20, fontWeight: 600 }
 const subtitle = { marginTop: 6, marginBottom: 14, color: '#cbd5e1', fontSize: 13 }
 const label = { display: 'block', color: '#cbd5e1', fontSize: 13, marginTop: 8 }
-const input = { width: '100%', padding: '10px 12px', marginTop: 6, borderRadius: 8, border: '1px solid rgba(255,255,255,0.06)', background: '#0b1220', color: '#fff', boxSizing: 'border-box' }
-const button = { width: '100%', padding: '10px 12px', borderRadius: 8, background: 'linear-gradient(90deg,#06b6d4,#2563eb)', color: '#0b1220', border: 'none', fontWeight: 700, cursor: 'pointer' }
-const oauthButtonGoogle = { flex: 1, padding: '10px 12px', borderRadius: 8, background: '#db4437', color: '#fff', border: 'none', cursor: 'pointer' }
-const oauthButtonGithub = { flex: 1, padding: '10px 12px', borderRadius: 8, background: '#24292f', color: '#fff', border: 'none', cursor: 'pointer' }
-const errorBox = { marginTop: 10, color: '#ffb4b4', fontSize: 13 }
-const successBox = { marginTop: 10, color: '#bef264', fontSize: 13 }
+const input = {
+  width: '100%',
+  padding: '10px 12px',
+  marginTop: 6,
+  borderRadius: 10,
+  border: '1px solid rgba(148,163,184,0.10)',
+  background: 'rgba(255,255,255,0.02)',
+  color: '#e6e6e6',
+  boxSizing: 'border-box'
+}
+const button = {
+  width: '100%',
+  padding: '10px 12px',
+  borderRadius: 10,
+  background: 'linear-gradient(90deg,#06b6d4,#2563eb)',
+  color: '#0b1220',
+  border: 'none',
+  fontWeight: 700,
+  cursor: 'pointer'
+}
+const oauthButtonGoogle = {
+  flex: 1,
+  padding: '10px 12px',
+  borderRadius: 10,
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
+  color: '#fff',
+  border: '1px solid rgba(148,163,184,0.08)',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8
+}
+const oauthButtonGithub = {
+  flex: 1,
+  padding: '10px 12px',
+  borderRadius: 10,
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))',
+  color: '#fff',
+  border: '1px solid rgba(148,163,184,0.08)',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8
+}
+
+/* Toast styles (black) */
+const toastContainer = {
+  position: 'fixed',
+  top: 18,
+  right: 18,
+  width: 360,
+  maxWidth: 'calc(100% - 36px)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  zIndex: 60000
+}
 
+const toastBase = {
+  display: 'flex',
+  gap: 10,
+  alignItems: 'center',
+  padding: '10px 12px',
+  borderRadius: 10,
+  boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
+  color: '#fff',
+  fontSize: 13,
+  minWidth: 120
+}
+
+const toastError = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
+const toastSuccess = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
+const toastInfo = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
+
+const toastCloseBtn = {
+  marginLeft: 8,
+  background: 'transparent',
+  border: 'none',
+  color: 'rgba(255,255,255,0.7)',
+  cursor: 'pointer',
+  fontSize: 14,
+  lineHeight: 1
+}