mirror of
https://github.com/dergigi/boris.git
synced 2025-12-27 03:24:31 +01:00
refactor: remove dedicated login page, handle login through main UI
This commit is contained in:
30
src/App.tsx
30
src/App.tsx
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user