@ebubekirylmaz/link-test 1.2.43 → 1.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebubekirylmaz/link-test",
-  "version": "1.2.43",
+  "version": "1.2.44",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/widgets/Login/CognitoLogin.jsx

@@ -1,19 +1,61 @@
+import {
+  Box,
+  Button,
+  Card,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+  alpha,
+} from "@mui/material";
+import {
+  EmailOutlined,
+  LockOutlined,
+  MarkEmailReadOutlined,
+  Visibility,
+  VisibilityOff,
+} from "@mui/icons-material";
+import { confirmSignup, getTokens, login, signup } from "./amplifyAuth";
+
 import config from "../../config/config";
 import { publish } from "@nucleoidai/react-event";
 import { storage } from "@nucleoidjs/webstorage";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 
-import { Button, Stack, TextField, Typography } from "@mui/material";
-import { confirmSignup, getTokens, login, signup } from "./amplifyAuth";
+const inputSx = {
+  "& .MuiOutlinedInput-root": {
+    fontSize: "1rem",
+    "& input": { py: 1.5 },
+    "&:hover fieldset": { borderColor: "primary.main" },
+  },
+};
+
+const primaryButtonSx = {
+  py: 1.5,
+  fontSize: "1rem",
+  fontWeight: 600,
+  textTransform: "none",
+  borderRadius: 1.5,
+  boxShadow: (theme) =>
+    `0 8px 16px ${alpha(theme.palette.primary.main, 0.24)}`,
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+  "&:hover": {
+    transform: "translateY(-2px)",
+    boxShadow: (theme) =>
+      `0 12px 24px ${alpha(theme.palette.primary.main, 0.32)}`,
+  },
+  "&:active": { transform: "translateY(0px)" },
+};
 
 export default function CognitoLogin() {
   const [mode, setMode] = useState("login");
 
-  const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
 
   const navigate = useNavigate();
 
@@ -94,71 +136,216 @@ export default function CognitoLogin() {
     }
   };
 
+  const titles = {
+    login: { heading: "Sign in", sub: "Welcome back! Enter your credentials." },
+    signup: {
+      heading: "Create account",
+      sub: "Sign up to get started for free.",
+    },
+    confirm: {
+      heading: "Verify your email",
+      sub: "Enter the confirmation code sent to your inbox.",
+    },
+  };
+
+  const passwordAdornment = (
+    <InputAdornment position="end">
+      <IconButton
+        onClick={() => setShowPassword(!showPassword)}
+        edge="end"
+        size="small"
+        tabIndex={-1}
+      >
+        {showPassword ? <VisibilityOff /> : <Visibility />}
+      </IconButton>
+    </InputAdornment>
+  );
+
   return (
-    <>
-      <Typography variant="h4" gutterBottom>
-        {mode === "login" && "Login"}
-        {mode === "signup" && "Sign Up"}
-        {mode === "confirm" && "Confirm Account"}
-      </Typography>
-
-      <Stack spacing={2}>
-        <TextField
-          label="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-
-        {mode === "signup" && (
-          <TextField
-            type="password"
-            label="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        )}
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        px: 2,
+        background: (theme) =>
+          `linear-gradient(135deg, ${alpha(theme.palette.primary.lighter, 0.4)} 0%, ${alpha(theme.palette.background.default, 1)} 60%)`,
+      }}
+    >
+      <Card
+        sx={{
+          width: "100%",
+          maxWidth: 440,
+          py: { xs: 5, md: 7 },
+          px: { xs: 3, md: 5 },
+          borderRadius: 3,
+          boxShadow: (theme) =>
+            `0 0 2px ${alpha(theme.palette.grey[500], 0.16)}, 0 24px 48px -4px ${alpha(theme.palette.grey[500], 0.16)}`,
+        }}
+      >
+        <Box
+          sx={{
+            mb: 4,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            textAlign: "center",
+          }}
+        >
+          <Box
+            sx={{
+              width: 56,
+              height: 56,
+              borderRadius: 2,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              mb: 2.5,
+              bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
+              color: "primary.main",
+            }}
+          >
+            {mode === "confirm" ? (
+              <MarkEmailReadOutlined sx={{ fontSize: 28 }} />
+            ) : (
+              <LockOutlined sx={{ fontSize: 28 }} />
+            )}
+          </Box>
 
-        {mode !== "confirm" && (
-          <TextField
-            type="password"
-            label="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        )}
+          <Typography variant="h4" fontWeight={700} gutterBottom>
+            {titles[mode].heading}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {titles[mode].sub}
+          </Typography>
+        </Box>
 
-        {mode === "confirm" && (
+        <Stack spacing={2.5}>
           <TextField
-            label="Confirmation Code"
-            value={code}
-            onChange={(e) => setCode(e.target.value)}
+            label="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            fullWidth
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <EmailOutlined
+                    sx={{ color: "text.secondary", fontSize: 22 }}
+                  />
+                </InputAdornment>
+              ),
+            }}
+            sx={inputSx}
           />
-        )}
 
-        {mode === "login" && (
-          <>
-            <Button variant="contained" onClick={handleLogin}>
-              Login
-            </Button>
-            <Button onClick={() => setMode("signup")}>Create an account</Button>
-          </>
-        )}
-
-        {mode === "signup" && (
-          <>
-            <Button variant="contained" onClick={handleSignup}>
-              Sign Up
+          {mode === "signup" && (
+            <TextField
+              type={showPassword ? "text" : "password"}
+              label="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              fullWidth
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <LockOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+                endAdornment: passwordAdornment,
+              }}
+              sx={inputSx}
+            />
+          )}
+
+          {mode !== "confirm" && (
+            <TextField
+              type={showPassword ? "text" : "password"}
+              label="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              fullWidth
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <LockOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+                endAdornment: passwordAdornment,
+              }}
+              sx={inputSx}
+            />
+          )}
+
+          {mode === "confirm" && (
+            <TextField
+              label="Confirmation Code"
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              fullWidth
+              sx={inputSx}
+            />
+          )}
+
+          {mode === "login" && (
+            <Stack spacing={1.5} pt={0.5}>
+              <Button
+                variant="contained"
+                onClick={handleLogin}
+                size="large"
+                fullWidth
+                sx={primaryButtonSx}
+              >
+                Sign in
+              </Button>
+              <Button
+                onClick={() => setMode("signup")}
+                fullWidth
+                sx={{ textTransform: "none", fontWeight: 500 }}
+              >
+                Create an account
+              </Button>
+            </Stack>
+          )}
+
+          {mode === "signup" && (
+            <Stack spacing={1.5} pt={0.5}>
+              <Button
+                variant="contained"
+                onClick={handleSignup}
+                size="large"
+                fullWidth
+                sx={primaryButtonSx}
+              >
+                Sign Up
+              </Button>
+              <Button
+                onClick={() => setMode("login")}
+                fullWidth
+                sx={{ textTransform: "none", fontWeight: 500 }}
+              >
+                Back to login
+              </Button>
+            </Stack>
+          )}
+
+          {mode === "confirm" && (
+            <Button
+              variant="contained"
+              onClick={handleConfirm}
+              size="large"
+              fullWidth
+              sx={{ ...primaryButtonSx, mt: 0.5 }}
+            >
+              Confirm
             </Button>
-            <Button onClick={() => setMode("login")}>Back to login</Button>
-          </>
-        )}
-
-        {mode === "confirm" && (
-          <Button variant="contained" onClick={handleConfirm}>
-            Confirm
-          </Button>
-        )}
-      </Stack>
-    </>
+          )}
+        </Stack>
+      </Card>
+    </Box>
   );
 }