@ebubekirylmaz/link-test 1.2.43 → 1.2.45

package/src/widgets/Login/CognitoLogin.jsx

@@ -4,20 +4,56 @@ import { storage } from "@nucleoidjs/webstorage";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 
-import { Button, Stack, TextField, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+  alpha,
+} from "@mui/material";
+import {
+  CheckOutlined,
+  EmailOutlined,
+  LockOutlined,
+  MarkEmailReadOutlined,
+  Visibility,
+  VisibilityOff,
+} from "@mui/icons-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,
+  "&: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 [confirmPassword, setConfirmPassword] = useState("");
   const [code, setCode] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const navigate = useNavigate();
 
-  const { appId } = config();
+  const { appId, credentials } = config();
 
   const handleLogin = async () => {
     try {
@@ -27,7 +63,9 @@ export default function CognitoLogin() {
       if (!tokens?.accessToken)
         throw new Error("No Cognito access token received");
 
-      const res = await fetch("/api/oauth", {
+      const requestUrl = credentials.requestUrl || "/api/oauth";
+
+      const res = await fetch(requestUrl, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -59,7 +97,7 @@ export default function CognitoLogin() {
 
   const handleSignup = async () => {
     try {
-      await signup(email, password, password);
+      await signup(email, password);
       publish("GLOBAL_MESSAGE_POSTED", {
         status: true,
         message:
@@ -94,36 +132,128 @@ 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={3} sx={{ mb: 2 }}>
+      <Box sx={{ textAlign: "center" }}>
+        <Box
+          sx={{
+            width: 52,
+            height: 52,
+            borderRadius: 2,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            mb: 2,
+            bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
+            color: "primary.main",
+          }}
+        >
+          {mode === "confirm" ? (
+            <MarkEmailReadOutlined sx={{ fontSize: 26 }} />
+          ) : (
+            <LockOutlined sx={{ fontSize: 26 }} />
+          )}
+        </Box>
+
+        <Typography variant="h4" fontWeight={700} gutterBottom>
+          {titles[mode].heading}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {titles[mode].sub}
+        </Typography>
+      </Box>
 
       <Stack spacing={2}>
         <TextField
           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 === "signup" && (
+        {mode !== "confirm" && (
           <TextField
-            type="password"
+            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" && (
+        {mode === "signup" && (
           <TextField
-            type="password"
-            label="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            type={showConfirmPassword ? "text" : "password"}
+            label="Confirm Password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            fullWidth
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <LockOutlined
+                    sx={{ color: "text.secondary", fontSize: 22 }}
+                  />
+                </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    edge="end"
+                    size="small"
+                    tabIndex={-1}
+                  >
+                    {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            sx={inputSx}
           />
         )}
 
@@ -132,33 +262,74 @@ export default function CognitoLogin() {
             label="Confirmation Code"
             value={code}
             onChange={(e) => setCode(e.target.value)}
+            fullWidth
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <CheckOutlined
+                    sx={{ color: "text.secondary", fontSize: 22 }}
+                  />
+                </InputAdornment>
+              ),
+            }}
+            sx={inputSx}
           />
         )}
+      </Stack>
 
-        {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
-            </Button>
-            <Button onClick={() => setMode("login")}>Back to login</Button>
-          </>
-        )}
+      {mode === "login" && (
+        <Stack spacing={1.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 === "confirm" && (
-          <Button variant="contained" onClick={handleConfirm}>
-            Confirm
+      {mode === "signup" && (
+        <Stack spacing={1.5}>
+          <Button
+            variant="contained"
+            onClick={handleSignup}
+            size="large"
+            fullWidth
+            sx={primaryButtonSx}
+          >
+            Sign Up
           </Button>
-        )}
-      </Stack>
-    </>
+          <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}
+        >
+          Confirm
+        </Button>
+      )}
+    </Stack>
   );
 }

package/src/widgets/Login/DemoLogin.jsx

@@ -1,3 +1,7 @@
+import config from "../../config/config";
+import { storage } from "@nucleoidjs/webstorage";
+import { useNavigate } from "react-router-dom";
+
 import {
   Box,
   Button,
@@ -16,20 +20,18 @@ import {
 } from "@mui/icons-material";
 import React, { useState } from "react";
 
-import config from "../../config/config";
-import { storage } from "@nucleoidjs/webstorage";
-import { useNavigate } from "react-router-dom";
-
 export default function DemoLogin() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
 
-  const { appId } = config();
+  const { appId, credentials } = config();
 
   async function handleLogin() {
-    const res = await fetch("/api/oauth", {
+    const requestUrl = credentials.requestUrl || "/api/oauth";
+
+    const res = await fetch(requestUrl, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -53,7 +55,7 @@ export default function DemoLogin() {
   }
 
   return (
-    <Stack spacing={2.5}>
+    <Stack spacing={2.5} sx={{ mb: 2 }}>
       <Stack spacing={2}>
         <TextField
           label="Username"

package/src/widgets/Login/amplifyAuth.js

@@ -6,13 +6,13 @@ import {
   signUp,
 } from "aws-amplify/auth";
 
-export async function login(username, password) {
-  return signIn({ username, password });
+export async function login(email, password) {
+  return signIn({ username: email, password });
 }
 
-export async function signup(username, password, email) {
+export async function signup(email, password) {
   return signUp({
-    username,
+    username: email,
     password,
     options: {
       userAttributes: {
@@ -22,9 +22,9 @@ export async function signup(username, password, email) {
   });
 }
 
-export async function confirmSignup(username, code) {
+export async function confirmSignup(email, code) {
   return confirmSignUp({
-    username,
+    username: email,
     confirmationCode: code,
   });
 }

package/src/widgets/Login/amplifyConfig.js

@@ -14,6 +14,9 @@ export function configureAmplify() {
         userPoolId: credentials.userPoolId,
         userPoolClientId: credentials.clientId,
         region: credentials.region,
+        loginWith: {
+          email: true,
+        },
       },
     },
   });

package/src/widgets/LoginForm/LoginForm.jsx

@@ -18,12 +18,17 @@ const handleOAuthLogin = (
 };
 
 function LoginForm() {
-  const { name, project } = config();
+  const { name, project, credentials } = config();
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
-  const renderHead = (
+  const providerCheck =
+    credentials?.provider === "COGNITO" || credentials?.provider === "DEMO";
+
+  const hasContent = !providerCheck || !!project.nucleoid;
+
+  const renderHead = hasContent ? (
     <Stack spacing={2} sx={{ mb: 5 }}>
       <Typography variant="h4">Sign in to {name}</Typography>
       {project.nucleoid && (
@@ -34,7 +39,7 @@ function LoginForm() {
         </Stack>
       )}
     </Stack>
-  );
+  ) : null;
 
   const renderForm = (
     <>

package/src/widgets/SettingsDialog.jsx

@@ -1,10 +1,19 @@
+import Iconify from "../components/Iconify";
+import config from "../config/config";
+import { useEvent } from "@nucleoidai/react-event";
+import useSettings from "../hooks/useSettings";
+import { useSettingsContext } from "../components/settings/context";
+import { useUser } from "../hooks/use-user";
+
 import {
   Avatar,
   Box,
+  Chip,
   FormControl,
   Grow,
   IconButton,
   InputLabel,
+  Link,
   List,
   ListItem,
   ListItemAvatar,
@@ -12,6 +21,7 @@ import {
   ListItemText,
   NativeSelect,
   Stack,
+  Switch,
   Tab,
   Tabs,
   TextField,
@@ -20,11 +30,17 @@ import {
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
-import Iconify from "../components/Iconify";
-import config from "../config/config";
-import { useEvent } from "@nucleoidai/react-event";
-import useSettings from "../hooks/useSettings";
-import { useUser } from "../hooks/use-user";
+let pkg = {
+  name: "",
+  version: "",
+  description: "",
+};
+
+try {
+  pkg = require("../../../../../../package.json");
+} catch (error) {
+  console.error("Failed to load package.json for About tab:", error);
+}
 
 function a11yProps(index) {
   return {
@@ -42,6 +58,9 @@ const TabPanel = (props) => {
 const SettingsDialogTabs = ({ tabs }) => {
   const [value, setValue] = useState(0);
 
+  const hasPkgInfo =
+    pkg && (pkg.name || pkg.version || pkg.description) ? true : false;
+
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
@@ -95,13 +114,20 @@ const SettingsDialogTabs = ({ tabs }) => {
             sx={{ "& label": { color: "custom.grey" } }}
             {...a11yProps(1)}
           />
+          {hasPkgInfo && (
+            <Tab
+              label={"About"}
+              sx={{ "& label": { color: "custom.grey" } }}
+              {...a11yProps(2)}
+            />
+          )}
           {tabs?.map((tab, index) => (
             <Tab
               key={tab.label}
               iconPosition="start"
               label={tab.label}
               sx={{ "& label": { color: "custom.grey" } }}
-              {...a11yProps(index + 2)}
+              {...a11yProps(index + (hasPkgInfo ? 3 : 2))}
             />
           ))}
         </Tabs>
@@ -112,8 +138,17 @@ const SettingsDialogTabs = ({ tabs }) => {
           <TabPanel value={value} index={1}>
             <Settings />
           </TabPanel>
+          {hasPkgInfo && (
+            <TabPanel value={value} index={2}>
+              <About />
+            </TabPanel>
+          )}
           {tabs?.map((tab, index) => (
-            <TabPanel key={tab.label} value={value} index={index + 2}>
+            <TabPanel
+              key={tab.label}
+              value={value}
+              index={index + (hasPkgInfo ? 3 : 2)}
+            >
               <tab.panel />
             </TabPanel>
           ))}
@@ -249,6 +284,7 @@ const Permission = () => {
 const Settings = () => {
   const projectId = localStorage.getItem("projectId");
   const { settings, updateSettings } = useSettings(projectId);
+  const { beta, onUpdate } = useSettingsContext();
 
   const timeZones = [
     "Asia/Kolkata",
@@ -300,9 +336,137 @@ const Settings = () => {
             </NativeSelect>
           </FormControl>
         </ListItem>
+        <ListItem
+          sx={{
+            backgroundColor: "background.paper",
+            boxShadow: 1,
+            borderRadius: 1,
+            m: 1,
+            p: 2,
+            ":hover": { boxShadow: 3 },
+            transition: "all 0.2s ease-in-out",
+          }}
+        >
+          <ListItemText primary="Beta" secondary="Enable beta features" />
+          <Switch checked={beta} onChange={() => onUpdate("beta", !beta)} />
+        </ListItem>
       </List>
     </Stack>
   );
 };
 
+const About = () => {
+  const iconSrc = config().template?.login?.icon || "";
+
+  const appName = pkg.name;
+  const version = pkg.version;
+  const description = pkg.description;
+
+  return (
+    <Stack direction="column" spacing={2} p={2}>
+      <Box
+        sx={{
+          p: 3,
+          borderRadius: 3,
+          border: "1px solid",
+          borderColor: "divider",
+          background:
+            "linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01))",
+        }}
+      >
+        <Stack direction="row" spacing={2.5} alignItems="center">
+          <Avatar
+            src={iconSrc}
+            variant="rounded"
+            sx={{
+              width: 56,
+              height: 56,
+              borderRadius: 2,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+            }}
+          >
+            <Iconify icon="solar:widget-bold-duotone" width={28} />
+          </Avatar>
+
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography variant="h5" fontWeight={600}>
+              {appName.toUpperCase()}
+            </Typography>
+
+            {description && (
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                sx={{ mt: 0.5, maxWidth: 520 }}
+              >
+                {description}
+              </Typography>
+            )}
+
+            <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+              <Chip size="small" label={`v${version}`} />
+            </Stack>
+          </Box>
+        </Stack>
+
+        <Box
+          sx={{
+            my: 2,
+            borderBottom: "1px dashed",
+            borderColor: "divider",
+          }}
+        />
+
+        <Stack spacing={1.2}>
+          <InfoRow label="Version" value={version} />
+          <InfoRow label="Deployment" value="On-Premise" />
+          <InfoRow
+            label="Support"
+            value="support@greycollar.ai"
+            link="mailto:support@greycollar.ai"
+          />
+          <InfoRow
+            label="Documentation"
+            value="greycollar.ai/docs"
+            link="https://greycollar.ai/docs"
+          />
+        </Stack>
+
+        <Box
+          sx={{
+            mt: 3,
+            pt: 2,
+            borderTop: "1px dashed",
+            borderColor: "divider",
+            textAlign: "center",
+          }}
+        >
+          <Typography variant="caption" color="text.secondary">
+            © 2026 greycollar.ai. All rights reserved.
+          </Typography>
+        </Box>
+      </Box>
+    </Stack>
+  );
+};
+
+const InfoRow = ({ label, value, link }) => {
+  return (
+    <Stack direction="row" spacing={1.5} alignItems="center">
+      <Typography variant="body2" color="text.secondary" sx={{ minWidth: 110 }}>
+        {label}
+      </Typography>
+
+      {link ? (
+        <Link href={link} target="_blank" rel="noreferrer" underline="hover">
+          {value}
+        </Link>
+      ) : (
+        <Typography variant="body2">{value}</Typography>
+      )}
+    </Stack>
+  );
+};
+
 export default SettingsDialog;