working login and register page

src/blog/Blog.tsx

@@ -9,6 +9,7 @@ import Article from './components/Article';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
 import Login from './components/Login';
+import Register from './components/Register';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
 
@@ -18,6 +19,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
 
   const [selectedArticle, setSelectedArticle] = React.useState<number | null>(null);
   const [showLogin, setShowLogin] = React.useState(false);
+  const [showRegister, setShowRegister] = React.useState(false);
 
   const handleSelectArticle = (index: number) => {
     setSelectedArticle(index);
@@ -87,16 +89,35 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
             flexDirection: 'column',
             my: 4,
             gap: 4,
-            pb: selectedArticle === null && !showLogin ? 24 : 0,
+            pb: selectedArticle === null && !showLogin && !showRegister ? 24 : 0, // ✅ adjusted footer padding
           }}
         >
-          {showLogin ? (
-            <Login onBack={handleHideLogin} />
-          ) : selectedArticle === null ? (
+          {showRegister ? (
+            <Register
+              onBack={() => {
+                setShowRegister(false);
+                setShowLogin(false);
+              }}
+            />
+          ) : showLogin ? (
+            <Login
+              onBack={() => setShowLogin(false)}
+              onRegister={() => {
+                setShowLogin(false);
+                setShowRegister(true);
+              }}
+            />
+          ) : selectedArticle !== null ? (
+            <Article article={articles[selectedArticle]} onBack={handleBack} />
+          ) : (
             <>
               {!currentUser && (
                 <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
-                  <Button variant="outlined" color="primary" onClick={handleShowLogin}>
+                  <Button
+                    variant="outlined"
+                    color="primary"
+                    onClick={() => setShowLogin(true)}
+                  >
                     Login
                   </Button>
                 </Box>
@@ -109,8 +130,6 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
                 onLoadMore={async () => {}}
               />
             </>
-          ) : (
-            <Article article={articles[selectedArticle]} onBack={handleBack} />
           )}
         </Container>
 

src/blog/components/Login.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { Box, TextField, Button, Typography, IconButton, CircularProgress } from '@mui/material';
+import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
 
 interface LoginProps {
   onBack: () => void;
+  onRegister: () => void;
 }
 
-export default function Login({ onBack }: LoginProps) {
+export default function Login({ onBack, onRegister }: LoginProps) {
   const { login, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
@@ -17,11 +18,10 @@ export default function Login({ onBack }: LoginProps) {
     await login(username, password);
   };
 
-  if (currentUser) {
-    // ✅ if logged in, auto-return to the article list
-    onBack();
-    return null;
-  }
+  // ✅ Auto-return if already logged in
+  React.useEffect(() => {
+    if (currentUser) onBack();
+  }, [currentUser]);
 
   return (
     <Box
@@ -84,6 +84,24 @@ export default function Login({ onBack }: LoginProps) {
           {loading ? <CircularProgress size={24} color="inherit" /> : 'Login'}
         </Button>
       </form>
+
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        align="center"
+        sx={{ mt: 3 }}
+      >
+        Don’t have an account?{' '}
+        <Link
+          component="button"
+          underline="hover"
+          color="primary"
+          onClick={onRegister}
+          sx={{ fontWeight: 500 }}
+        >
+          Register
+        </Link>
+      </Typography>
     </Box>
   );
 }