refactor: remove dedicated login page, handle login through main UI

This commit is contained in:
Gigi
2025-10-05 23:32:52 +01:00
parent 9065501043
commit 7a4cb77aa3
3 changed files with 6 additions and 132 deletions

View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate, useLocation, useNavigate } from 'react-router-dom'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { EventStoreProvider, AccountsProvider, Hooks } from 'applesauce-react'
@@ -8,7 +8,6 @@ import { AccountManager } from 'applesauce-accounts'
import { registerCommonAccountTypes } from 'applesauce-accounts/accounts'
import { RelayPool } from 'applesauce-relay'
import { createAddressLoader } from 'applesauce-loaders/loaders'
import Login from './components/Login'
import Bookmarks from './components/Bookmarks'
import Toast from './components/Toast'
import { useToast } from './hooks/useToast'
@@ -16,19 +15,7 @@ import { useToast } from './hooks/useToast'
const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR ||
'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
// Protected route component that redirects to login if no active account
function ProtectedRoute({ children }: { children: React.ReactNode }) {
const activeAccount = Hooks.useActiveAccount()
const location = useLocation()
if (!activeAccount) {
return <Navigate to="/login" state={{ from: location }} replace />
}
return <>{children}</>
}
// AppRoutes component that has access to navigation hooks
// AppRoutes component that has access to hooks
function AppRoutes({
relayPool,
showToast
@@ -37,13 +24,11 @@ function AppRoutes({
showToast: (message: string) => void
}) {
const accountManager = Hooks.useAccountManager()
const navigate = useNavigate()
const handleLogout = () => {
accountManager.setActive(undefined as never)
localStorage.removeItem('active')
showToast('Logged out successfully')
navigate('/login')
}
return (
@@ -51,16 +36,13 @@ function AppRoutes({
<Route
path="/a/:naddr"
element={
<ProtectedRoute>
<Bookmarks
relayPool={relayPool}
onLogout={handleLogout}
/>
</ProtectedRoute>
<Bookmarks
relayPool={relayPool}
onLogout={handleLogout}
/>
}
/>
<Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
<Route path="/login" element={<Login onLogin={() => showToast('Logged in successfully')} />} />
</Routes>
)
}

View File

@@ -1,60 +0,0 @@
import React, { useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { Hooks } from 'applesauce-react'
import { Accounts } from 'applesauce-accounts'
interface LoginProps {
onLogin: () => void
}
const Login: React.FC<LoginProps> = ({ onLogin }) => {
const [isConnecting, setIsConnecting] = useState(false)
const accountManager = Hooks.useAccountManager()
const navigate = useNavigate()
const location = useLocation()
const handleLogin = async () => {
try {
setIsConnecting(true)
// Create account from nostr extension
const account = await Accounts.ExtensionAccount.fromExtension()
accountManager.addAccount(account)
accountManager.setActive(account)
onLogin()
// Navigate back to where the user came from, or to the default article
const from = (location.state as { from?: { pathname: string } })?.from?.pathname
if (from) {
navigate(from, { replace: true })
} else {
const defaultArticle = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR ||
'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
navigate(`/a/${defaultArticle}`)
}
} catch (error) {
console.error('Login failed:', error)
alert('Login failed. Please install a nostr browser extension and try again.')
} finally {
setIsConnecting(false)
}
}
return (
<div className="login-container">
<div className="login-card">
<h2>Welcome to Boris</h2>
<p>Connect your nostr account to view your bookmarks</p>
<button
onClick={handleLogin}
disabled={isConnecting}
className="login-button"
>
{isConnecting ? 'Connecting...' : 'Connect with Nostr'}
</button>
</div>
</div>
)
}
export default Login

View File

@@ -56,53 +56,6 @@ body {
color: #888;
}
/* Login Styles */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
}
.login-card {
background: #1a1a1a;
padding: 2rem;
border-radius: 8px;
border: 1px solid #333;
max-width: 400px;
width: 100%;
}
.login-card h2 {
margin: 0 0 1rem 0;
color: #fff;
}
.login-card p {
margin: 0 0 1.5rem 0;
color: #ccc;
}
.login-button {
background: #646cff;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.login-button:hover:not(:disabled) {
background: #535bf2;
}
.login-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Bookmarks Styles */
.bookmarks-container {
background: #1a1a1a;
@@ -1147,7 +1100,6 @@ body {
background-color: #ffffff;
}
.login-card,
.bookmark-item {
background: #f9f9f9;
border-color: #ddd;