flowlink-auth 2.7.4 → 2.7.6

package/src/SignUp.jsx

@@ -1,70 +1,315 @@
+// // src/signup.jsx
+// 'use client'
+// import React, { useState } from 'react'
+// import { useAuth } from './provider.js'
+
+// export default function SignUp() {
+//   const {
+//     publishableKey,
+//     baseUrl,
+//     redirect,
+//     redirectTo,
+//     user,
+//     loadingUser,
+//     fetchMe,
+//     setUser
+//   } = useAuth()
+
+//   const [name, setName] = useState('')
+//   const [email, setEmail] = useState('')
+//   const [password, setPassword] = useState('')
+//   const [loading, setLoading] = useState(false)
+//   const [error, setError] = useState(null)
+//   const [message, setMessage] = useState(null)
+
+//   if (loadingUser) return null
+
+//   if (user && redirect) {
+//     if (typeof redirectTo === 'function') redirectTo(redirect)
+//     else if (typeof window !== 'undefined') window.location.assign(redirect)
+//     return null
+//   }
+
+//   async function submit(e) {
+//     e.preventDefault()
+//     setError(null)
+//     setMessage(null)
+//     setLoading(true)
+
+//     const url = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/signup`
+
+//     try {
+//       const res = await fetch(url, {
+//         method: 'POST',
+//         credentials: 'include',
+//         headers: {
+//           'Content-Type': 'application/json',
+//           'x-publishable-key': publishableKey || ''
+//         },
+//         body: JSON.stringify({ name, email, password })
+//       })
+
+//       const data = await res.json().catch(() => ({}))
+//       if (!res.ok) throw new Error(data.error || 'Signup failed')
+
+//       if (data.user && typeof setUser === 'function') setUser(data.user)
+//       if (typeof fetchMe === 'function') await fetchMe()
+
+//       setMessage('Account created. Redirecting…')
+
+//       if (redirect) {
+//         setTimeout(() => {
+//           if (typeof redirectTo === 'function') redirectTo(redirect)
+//           else if (typeof window !== 'undefined') window.location.assign(redirect)
+//         }, 300)
+//       }
+//     } catch (err) {
+//       setError(err?.message ?? 'Network error')
+//       console.error('Signup error:', err)
+//     } finally {
+//       setLoading(false)
+//     }
+//   }
+
+//   async function startOAuthFlow(provider) {
+//   // prevent double clicks
+//   setError(null)
+//   setLoading(true)
+
+//   try {
+//     const rid =
+//       (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+//         ? crypto.randomUUID()
+//         : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
+
+//     // callback must match what your SDK start expects and what Google console allows
+//     const callbackUrl = encodeURIComponent(`${window.location.origin}/signup`)
+
+//     // build start URL (server returns { oauthUrl })
+//     const sdkBase = (typeof process !== 'undefined' && process.env && process.env.NEXT_PUBLIC_FLOWLINK_BASE_URL)
+//       || baseUrl || window.location.origin.replace(/\/+$/, '')
+//     const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
+
+//     // ensure publishableKey exists
+//     if (!publishableKey) {
+//       throw new Error('Missing publishable key (client side). Set NEXT_PUBLIC_FLOWLINK_PUBLISHABLE_KEY or provide publishableKey in provider.')
+//     }
+
+//     const res = await fetch(startUrl, {
+//       method: 'GET',
+//       headers: {
+//         'x-publishable-key': publishableKey
+//       }
+//     })
+
+//     const data = await res.json().catch(() => null)
+//     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')
+//     }
+
+//     // navigate to provider (Google/GitHub)
+//     window.location.href = data.oauthUrl
+//   } catch (err) {
+//     console.error('OAuth start error:', err)
+//     setError(err?.message || 'OAuth start failed')
+//     setLoading(false)
+//   }
+// }
+
+// const handleGoogle = (e) => {
+//   if (e && typeof e.preventDefault === 'function') e.preventDefault()
+//   startOAuthFlow('google')
+// }
+
+// const handleGithub = (e) => {
+//   if (e && typeof e.preventDefault === 'function') e.preventDefault()
+//   startOAuthFlow('github')
+// }
+//   return (
+//     <div style={overlay}>
+//       <div style={modal}>
+//         <h2 style={title}>Create account</h2>
+
+//         <form onSubmit={submit}>
+//           <label style={label}>Full name</label>
+//           <input
+//             name="name"
+//             style={input}
+//             value={name}
+//             onChange={e => setName(e.target.value)}
+//             autoComplete="name"
+//           />
+
+//           <label style={label}>Email</label>
+//           <input
+//             name="email"
+//             type="email"
+//             style={input}
+//             value={email}
+//             onChange={e => setEmail(e.target.value)}
+//             required
+//             autoComplete="email"
+//           />
+
+//           <label style={label}>Password</label>
+//           <input
+//             name="password"
+//             type="password"
+//             style={input}
+//             value={password}
+//             onChange={e => setPassword(e.target.value)}
+//             required
+//             autoComplete="new-password"
+//           />
+
+//           <div style={{ marginTop: 12 }}>
+//             <button style={button} type="submit" disabled={loading}>
+//               {loading ? 'Creating...' : 'Create account'}
+//             </button>
+//           </div>
+
+//           <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+//             <button
+//               type="button"
+//               onClick={handleGoogle}
+//               style={oauthButtonGoogle}
+//             >
+//               Continue with Google
+//             </button>
+
+//             <button
+//               type="button"
+//               onClick={handleGithub}
+//               style={oauthButtonGithub}
+//             >
+//               Continue with GitHub
+//             </button>
+//           </div>
+
+//           {error && <div style={errorBox}>{error}</div>}
+//           {message && <div style={successBox}>{message}</div>}
+//         </form>
+//       </div>
+//     </div>
+//   )
+// }
+
+// const overlay = {
+//   position: 'fixed',
+//   inset: 0,
+//   background: 'rgba(0,0,0,0.5)',
+//   display: 'flex',
+//   justifyContent: 'center',
+//   alignItems: 'center',
+//   padding: 20,
+//   zIndex: 9999
+// }
+// const modal = {
+//   width: '100%',
+//   maxWidth: 420,
+//   background: '#0f1724',
+//   borderRadius: 12,
+//   padding: 24,
+//   color: '#fff'
+// }
+// const title = { margin: 0, fontSize: 20, fontWeight: 600 }
+// const label = { marginTop: 10, display: 'block', fontSize: 13 }
+// const input = {
+//   width: '100%',
+//   padding: '10px 12px',
+//   borderRadius: 8,
+//   background: '#0b1220',
+//   color: '#fff',
+//   border: '1px solid #1e293b',
+//   marginTop: 6
+// }
+// const button = {
+//   marginTop: 15,
+//   width: '100%',
+//   padding: '10px 12px',
+//   borderRadius: 8,
+//   background: '#2563eb',
+//   border: 'none',
+//   color: '#fff',
+//   fontWeight: 600,
+//   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 }
+
 // src/signup.jsx
 'use client'
-import React, { useState } from 'react'
-import { useAuth } from './provider.js'
-
-export default function SignUp() {
-  const {
-    publishableKey,
-    baseUrl,
-    redirect,
-    redirectTo,
-    user,
-    loadingUser,
-    fetchMe,
-    setUser
-  } = useAuth()
+import React, { useState, useRef, useEffect } from 'react'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import Link from 'next/link'
 
+export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(null)
+  const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false })
   const [message, setMessage] = useState(null)
+  const [showKeysPanel, setShowKeysPanel] = useState(false)
+  const [newKeys, setNewKeys] = useState(null)
+  const redirectTimer = useRef(null)
 
-  if (loadingUser) return null
-
-  if (user && redirect) {
-    if (typeof redirectTo === 'function') redirectTo(redirect)
-    else if (typeof window !== 'undefined') window.location.assign(redirect)
-    return null
-  }
+  useEffect(() => {
+    return () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current)
+    }
+  }, [])
 
+  // Example submit — replace with real auth call
   async function submit(e) {
     e.preventDefault()
-    setError(null)
+    if (loading) return
     setMessage(null)
     setLoading(true)
 
-    const url = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/signup`
-
     try {
-      const res = await fetch(url, {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-publishable-key': publishableKey || ''
-        },
-        body: JSON.stringify({ name, email, password })
-      })
-
-      const data = await res.json().catch(() => ({}))
-      if (!res.ok) throw new Error(data.error || 'Signup failed')
-
-      if (data.user && typeof setUser === 'function') setUser(data.user)
-      if (typeof fetchMe === 'function') await fetchMe()
+      // simulate API
+      await new Promise((r) => setTimeout(r, 700))
+
+      // example error cases (replace with real server response handling)
+      if (!email.includes('@')) throw new Error('Invalid email address')
+      if (password.length < 8) throw new Error('Password must be at least 8 characters')
+      if (email === 'taken@example.com') throw new Error('User already exists')
 
+      // success
       setMessage('Account created. Redirecting…')
+      toast.success('Account created. Redirecting…')
 
-      if (redirect) {
-        setTimeout(() => {
-          if (typeof redirectTo === 'function') redirectTo(redirect)
-          else if (typeof window !== 'undefined') window.location.assign(redirect)
-        }, 300)
-      }
+      // simulate redirect timer
+      redirectTimer.current = setTimeout(() => {
+        // real redirect logic here
+      }, 300)
     } catch (err) {
-      setError(err?.message ?? 'Network error')
+      const text = err?.message ?? 'Network error'
+      // show toast with black background (ToastContainer configured below)
+      toast.error(text)
       console.error('Signup error:', err)
     } finally {
       setLoading(false)
@@ -72,189 +317,453 @@ export default function SignUp() {
   }
 
   async function startOAuthFlow(provider) {
-  // prevent double clicks
-  setError(null)
-  setLoading(true)
-
-  try {
-    const rid =
-      (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
-        ? crypto.randomUUID()
-        : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
-
-    // callback must match what your SDK start expects and what Google console allows
-    const callbackUrl = encodeURIComponent(`${window.location.origin}/signup`)
-
-    // build start URL (server returns { oauthUrl })
-    const sdkBase = (typeof process !== 'undefined' && process.env && process.env.NEXT_PUBLIC_FLOWLINK_BASE_URL)
-      || baseUrl || window.location.origin.replace(/\/+$/, '')
-    const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
-
-    // ensure publishableKey exists
-    if (!publishableKey) {
-      throw new Error('Missing publishable key (client side). Set NEXT_PUBLIC_FLOWLINK_PUBLISHABLE_KEY or provide publishableKey in provider.')
-    }
+    if (loading || loadingOauth[provider]) return
+    setLoadingOauth(prev => ({ ...prev, [provider]: true }))
 
-    const res = await fetch(startUrl, {
-      method: 'GET',
-      headers: {
-        'x-publishable-key': publishableKey
-      }
-    })
+    try {
+      // simulate network latency
+      await new Promise((r) => setTimeout(r, 600))
 
-    const data = await res.json().catch(() => null)
-    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')
+      // replace with actual start flow & redirect
+      toast.info(`Starting ${provider} sign-in...`)
+      // on success real flow will redirect, so no need to unset loading in that case
+    } catch (err) {
+      toast.error(err?.message || 'OAuth start failed')
+      console.error('OAuth start error:', err)
+      setLoadingOauth(prev => ({ ...prev, [provider]: false }))
     }
+  }
 
-    // navigate to provider (Google/GitHub)
-    window.location.href = data.oauthUrl
-  } catch (err) {
-    console.error('OAuth start error:', err)
-    setError(err?.message || 'OAuth start failed')
-    setLoading(false)
+  const handleGoogle = (e) => {
+    if (e && typeof e.preventDefault === 'function') e.preventDefault()
+    startOAuthFlow('google')
   }
-}
 
-const handleGoogle = (e) => {
-  if (e && typeof e.preventDefault === 'function') e.preventDefault()
-  startOAuthFlow('google')
-}
+  const handleGithub = (e) => {
+    if (e && typeof e.preventDefault === 'function') e.preventDefault()
+    startOAuthFlow('github')
+  }
 
-const handleGithub = (e) => {
-  if (e && typeof e.preventDefault === 'function') e.preventDefault()
-  startOAuthFlow('github')
-}
   return (
     <div style={overlay}>
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        newestOnTop
+        closeOnClick
+        pauseOnHover
+        draggable
+        toastStyle={{
+          background: '#000000',
+          color: '#ffffff',
+          borderRadius: 10,
+          boxShadow: '0 6px 18px rgba(0,0,0,0.6)',
+          padding: '10px 14px',
+          fontWeight: 500
+        }}
+      />
+
       <div style={modal}>
-        <h2 style={title}>Create account</h2>
-
-        <form onSubmit={submit}>
-          <label style={label}>Full name</label>
-          <input
-            name="name"
-            style={input}
-            value={name}
-            onChange={e => setName(e.target.value)}
-            autoComplete="name"
-          />
-
-          <label style={label}>Email</label>
-          <input
-            name="email"
-            type="email"
-            style={input}
-            value={email}
-            onChange={e => setEmail(e.target.value)}
-            required
-            autoComplete="email"
-          />
-
-          <label style={label}>Password</label>
-          <input
-            name="password"
-            type="password"
-            style={input}
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            required
-            autoComplete="new-password"
-          />
-
-          <div style={{ marginTop: 12 }}>
-            <button style={button} type="submit" disabled={loading}>
-              {loading ? 'Creating...' : 'Create account'}
-            </button>
-          </div>
+        <div style={modalInner}>
+          <header style={header}>
+            <div style={brandRow}>
+              <div style={logo}>
+                {/* if you have a real logo, replace with <Image src={agency.logo} ... /> */}
+                <div style={logoCircle} aria-hidden />
+              </div>
+              <div>
+                <h1 style={title}>Sign up to {agency.name}</h1>
+                <div style={subtitle}>Welcome! Create your account.</div>
+              </div>
+            </div>
+          </header>
 
-          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+          <section style={oauthSection}>
             <button
-              type="button"
               onClick={handleGoogle}
-              style={oauthButtonGoogle}
+              type="button"
+              style={{ ...oauthButton, ...oauthGoogle }}
+              disabled={loading || loadingOauth.google}
+              aria-disabled={loading || loadingOauth.google}
             >
-              Continue with Google
+              <svg width={18} style={{ marginRight: 10 }} 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...' : 'Continue with Google'}</span>
             </button>
 
             <button
-              type="button"
               onClick={handleGithub}
-              style={oauthButtonGithub}
+              type="button"
+              style={{ ...oauthButton, ...oauthGithub }}
+              disabled={loading || loadingOauth.github}
+              aria-disabled={loading || loadingOauth.github}
             >
-              Continue with GitHub
+              <svg width={18} style={{ marginRight: 10 }} 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...' : 'Continue with GitHub'}</span>
             </button>
+          </section>
+
+          <div style={dividerRow}>
+            <div style={line} />
+            <div style={orText}>or</div>
+            <div style={line} />
           </div>
 
-          {error && <div style={errorBox}>{error}</div>}
-          {message && <div style={successBox}>{message}</div>}
-        </form>
+          <form onSubmit={submit} style={form}>
+            <label style={label} htmlFor="name">
+              <span style={labelText}>Name</span>
+              <input
+                id="name"
+                type="text"
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder="Your name"
+                style={input}
+                autoComplete="name"
+              />
+            </label>
+
+            <label style={label} htmlFor="email">
+              <span style={labelText}>Email address</span>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                required
+                placeholder="you@example.com"
+                style={input}
+                autoComplete="email"
+              />
+            </label>
+
+            <label style={label} htmlFor="password">
+              <span style={labelText}>Password</span>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                required
+                placeholder="••••••••"
+                style={input}
+                autoComplete="new-password"
+              />
+            </label>
+
+            <button
+              type="submit"
+              style={submitButton}
+              disabled={loading}
+              aria-disabled={loading}
+            >
+              {loading ? 'Signing up...' : 'Sign Up'}
+            </button>
+          </form>
+        </div>
+
+        <div style={modalFooter}>
+          <div style={belowRow}>
+            <span style={muted}>Already have an account? </span>
+            <Link href="/sign-in" style={link}>Sign in</Link>
+          </div>
+          <div style={dividerThin} />
+          <div style={secured}>
+            <div style={securedText}>Secured by auth</div>
+          </div>
+        </div>
       </div>
+
+      {showKeysPanel && newKeys && (
+        <div style={keysOverlay}>
+          <div style={keysPanel}>
+            <h3 style={{ margin: 0, marginBottom: 8 }}>Your API keys — copy now</h3>
+            <p style={{ margin: 0, marginBottom: 12, color: '#4b5563', fontSize: 13 }}>Secret key is shown only once. Save it securely.</p>
+
+            <div style={{ marginBottom: 10 }}>
+              <div style={{ fontSize: 12, color: '#6b7280' }}>Publishable key (use in client)</div>
+              <pre style={keyBox}>{newKeys.publishableKey}</pre>
+              <button onClick={() => navigator.clipboard.writeText(newKeys.publishableKey)} style={copyBtn}>Copy publishable key</button>
+            </div>
+
+            <div style={{ marginBottom: 6 }}>
+              <div style={{ fontSize: 12, color: '#6b7280' }}>Secret key (server only)</div>
+              <pre style={keyBox}>{newKeys.secretKey}</pre>
+              <button onClick={() => navigator.clipboard.writeText(newKeys.secretKey)} style={copyBtn}>Copy secret key</button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
 
+/* Styles (JS objects) */
+
+/* overlay: translucent so underlying content is visible; backdrop blur and subtle vignette */
 const overlay = {
   position: 'fixed',
   inset: 0,
-  background: 'rgba(0,0,0,0.5)',
   display: 'flex',
-  justifyContent: 'center',
   alignItems: 'center',
+  justifyContent: 'center',
   padding: 20,
+  background: 'linear-gradient(180deg, rgba(2,6,23,0.25), rgba(2,6,23,0.35))',
+  backdropFilter: 'blur(6px)',
+  minHeight: '100vh',
   zIndex: 9999
 }
+
+/* modal itself uses semi-transparent background + strong soft shadow,
+   so things beneath are slightly visible but content still readable */
 const modal = {
   width: '100%',
-  maxWidth: 420,
-  background: '#0f1724',
-  borderRadius: 12,
-  padding: 24,
+  maxWidth: 560,
+  borderRadius: 14,
+  background: 'rgba(10,14,20,0.65)', // translucent neutral
+  border: '1px solid rgba(148,163,184,0.12)', // more visible neutral border
+  boxShadow: '0 20px 50px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  transform: 'translateY(-6px)'
+}
+
+const modalInner = {
+  padding: 18,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12
+}
+
+/* HEADER / BRAND */
+const header = {
+  paddingBottom: 6,
+  borderBottom: '1px solid rgba(148,163,184,0.04)'
+}
+
+const brandRow = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12
+}
+
+const logo = {
+  width: 44,
+  height: 44,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+
+const logoCircle = {
+  width: 36,
+  height: 36,
+  borderRadius: 999,
+  background: 'linear-gradient(135deg,#2f3438,#11151a)',
+  boxShadow: '0 4px 12px rgba(2,6,23,0.6)'
+}
+
+const title = {
+  margin: 0,
+  fontSize: 18,
+  fontWeight: 600,
+  color: '#e6e6e6'
+}
+
+const subtitle = {
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.72)',
+  marginTop: 4
+}
+
+/* OAUTH ROW */
+const oauthSection = {
+  marginTop: 8,
+  display: 'flex',
+  gap: 8
+}
+
+const oauthButton = {
+  flex: 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '10px 12px',
+  borderRadius: 10,
+  border: '1px solid rgba(148,163,184,0.08)',
+  fontSize: 14,
+  cursor: 'pointer',
+  userSelect: 'none',
+  gap: 8,
+  minHeight: 40
+}
+
+const oauthGoogle = {
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
   color: '#fff'
 }
-const title = { margin: 0, fontSize: 20, fontWeight: 600 }
-const label = { marginTop: 10, display: 'block', fontSize: 13 }
+
+const oauthGithub = {
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))',
+  color: '#fff'
+}
+
+/* DIVIDER */
+const dividerRow = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  marginTop: 12
+}
+
+const line = {
+  flex: 1,
+  height: 1,
+  background: 'rgba(148,163,184,0.06)'
+}
+
+const orText = {
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.65)',
+  padding: '0 8px'
+}
+
+/* FORM */
+const form = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  marginTop: 6
+}
+
+const label = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6
+}
+
+const labelText = {
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.68)'
+}
+
 const input = {
   width: '100%',
   padding: '10px 12px',
-  borderRadius: 8,
-  background: '#0b1220',
-  color: '#fff',
-  border: '1px solid #1e293b',
-  marginTop: 6
+  borderRadius: 10,
+  background: 'rgba(255,255,255,0.02)',
+  color: '#e6e6e6',
+  border: '1px solid rgba(148,163,184,0.10)', // slightly stronger border for visibility
+  fontSize: 14,
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'box-shadow 120ms, border-color 120ms'
 }
-const button = {
-  marginTop: 15,
+
+const submitButton = {
+  marginTop: 6,
   width: '100%',
   padding: '10px 12px',
-  borderRadius: 8,
-  background: '#2563eb',
+  borderRadius: 10,
+  background: 'linear-gradient(180deg,#475569,#94a3b8)', // neutral blue-gray gradient
   border: 'none',
   color: '#fff',
   fontWeight: 600,
-  cursor: 'pointer'
+  cursor: 'pointer',
+  fontSize: 15,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: 44
 }
-const oauthButtonGoogle = {
-  flex: 1,
-  padding: '10px 12px',
+
+/* FOOTER / BELOW */
+const modalFooter = {
+  padding: '12px 18px 18px 18px',
+  borderTop: '1px solid rgba(148,163,184,0.03)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8
+}
+
+const belowRow = {
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: 8,
+  alignItems: 'center'
+}
+
+const muted = {
+  color: 'rgba(230,230,230,0.66)',
+  fontSize: 13
+}
+
+const link = {
+  color: '#9fb0d9',
+  textDecoration: 'none',
+  fontWeight: 600
+}
+
+const dividerThin = {
+  height: 1,
+  background: 'rgba(148,163,184,0.04)',
+  marginTop: 6,
+  marginBottom: 6
+}
+
+const secured = {
+  textAlign: 'center'
+}
+
+const securedText = {
+  color: 'rgba(230,230,230,0.9)',
+  fontSize: 13,
+  fontWeight: 600
+}
+
+/* KEYS PANEL */
+const keysOverlay = {
+  position: 'fixed',
+  inset: 0,
+  zIndex: 20000,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: 'rgba(2,6,23,0.45)'
+}
+
+const keysPanel = {
+  background: '#fff',
+  color: '#111827',
+  padding: 18,
+  borderRadius: 10,
+  maxWidth: 720,
+  width: '95%',
+  boxShadow: '0 12px 40px rgba(2,6,23,0.5)'
+}
+
+const keyBox = {
+  padding: 10,
+  background: '#f3f4f6',
   borderRadius: 8,
-  background: '#db4437',
-  color: '#fff',
-  border: 'none',
-  cursor: 'pointer'
+  overflowX: 'auto',
+  fontSize: 13
 }
-const oauthButtonGithub = {
-  flex: 1,
-  padding: '10px 12px',
+
+const copyBtn = {
+  marginTop: 8,
+  padding: '8px 10px',
   borderRadius: 8,
-  background: '#24292f',
+  background: '#111827',
   color: '#fff',
   border: 'none',
   cursor: 'pointer'
 }
-const errorBox = { marginTop: 10, color: '#ffb4b4', fontSize: 13 }
-const successBox = { marginTop: 10, color: '#bef264', fontSize: 13 }
-