refactored out of src packages

2026-04-04 12:55:10 +05:30
parent 8a285bbdbe
commit 9871dac5c2
9 changed files with 0 additions and 0 deletions
--- a/react-auth/AuthPage.tsx
+++ b/react-auth/AuthPage.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+
+export type AuthMode = "login" | "register";
+
+export interface AuthPageProps {
+  mode: AuthMode;
+  onBack(): void;
+  onSwitchMode(): void;
+  login(username: string, password: string): Promise<void>;
+  register(username: string, password: string): Promise<void>;
+  loading: boolean;
+  error: string | null;
+  currentUser: any;
+}
+
+export function AuthPage({
+  mode,
+  onBack,
+  onSwitchMode,
+  login,
+  register,
+  loading,
+  error,
+  currentUser,
+}: AuthPageProps) {
+
+  const [username, setUsername] = React.useState('');
+  const [password, setPassword] = React.useState('');
+
+  const isLogin = mode === "login";
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isLogin) {
+      await login(username, password);
+    } else {
+      await register(username, password);
+    }
+  };
+
+  // ✅ Auto-return if already logged in
+  React.useEffect(() => {
+    if (currentUser) onBack();
+  }, [currentUser, onBack]);
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 400,
+        mx: 'auto',
+        mt: 8,
+        p: 4,
+        borderRadius: 3,
+        boxShadow: 3,
+        bgcolor: 'background.paper',
+      }}
+    >
+      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+        <ArrowBackRoundedIcon />
+      </IconButton>
+
+      <Typography variant="h4" fontWeight="bold" gutterBottom>
+        {isLogin ? "Sign In" : "Create Account"}
+      </Typography>
+
+      <Typography variant="body2" color="text.secondary" gutterBottom>
+        {isLogin
+          ? "Please log in to continue"
+          : "Create an account to get started"}
+      </Typography>
+
+      <form onSubmit={handleSubmit}>
+        <TextField
+          fullWidth
+          label="Username"
+          type="username"
+          margin="normal"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+          autoFocus
+        />
+        <TextField
+          fullWidth
+          label="Password"
+          type="password"
+          margin="normal"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+
+        {error && (
+          <Typography color="error" variant="body2" sx={{ mt: 1 }}>
+            {error}
+          </Typography>
+        )}
+
+        <Button
+          fullWidth
+          type="submit"
+          variant="contained"
+          color="primary"
+          sx={{ mt: 3 }}
+          disabled={loading}
+        >
+          {loading ? (
+            <CircularProgress size={24} color="inherit" />
+          ) : isLogin ? (
+            "Login"
+          ) : (
+            "Register"
+          )}
+        </Button>
+      </form>
+
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        align="center"
+        sx={{ mt: 3 }}
+      >
+        {isLogin ? "Don’t have an account?" : "Already have an account?"}{' '}
+        <Link
+          component="button"
+          underline="hover"
+          color="primary"
+          onClick={onSwitchMode}
+          sx={{ fontWeight: 500 }}
+        >
+          {isLogin ? "Register" : "Login"}
+        </Link>
+      </Typography>
+    </Box>
+  );
+}