@ebubekirylmaz/link-test 1.2.44 → 1.2.45

package/src/widgets/Login/CognitoLogin.jsx

@@ -1,7 +1,12 @@
+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 {
   Box,
   Button,
-  Card,
   IconButton,
   InputAdornment,
   Stack,
@@ -10,6 +15,7 @@ import {
   alpha,
 } from "@mui/material";
 import {
+  CheckOutlined,
   EmailOutlined,
   LockOutlined,
   MarkEmailReadOutlined,
@@ -18,12 +24,6 @@ import {
 } 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";
-
 const inputSx = {
   "& .MuiOutlinedInput-root": {
     fontSize: "1rem",
@@ -38,14 +38,6 @@ const primaryButtonSx = {
   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)" },
 };
 
@@ -54,12 +46,14 @@ export default function CognitoLogin() {
 
   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 {
@@ -69,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({
@@ -101,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:
@@ -162,190 +158,178 @@ export default function CognitoLogin() {
   );
 
   return (
-    <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)}`,
-        }}
-      >
+    <Stack spacing={3} sx={{ mb: 2 }}>
+      <Box sx={{ textAlign: "center" }}>
         <Box
           sx={{
-            mb: 4,
-            display: "flex",
-            flexDirection: "column",
+            width: 52,
+            height: 52,
+            borderRadius: 2,
+            display: "inline-flex",
             alignItems: "center",
-            textAlign: "center",
+            justifyContent: "center",
+            mb: 2,
+            bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
+            color: "primary.main",
           }}
         >
-          <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>
-
-          <Typography variant="h4" fontWeight={700} gutterBottom>
-            {titles[mode].heading}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {titles[mode].sub}
-          </Typography>
+          {mode === "confirm" ? (
+            <MarkEmailReadOutlined sx={{ fontSize: 26 }} />
+          ) : (
+            <LockOutlined sx={{ fontSize: 26 }} />
+          )}
         </Box>
 
-        <Stack spacing={2.5}>
+        <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 !== "confirm" && (
           <TextField
-            label="Email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
+            type={showPassword ? "text" : "password"}
+            label="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
             fullWidth
             InputProps={{
               startAdornment: (
                 <InputAdornment position="start">
-                  <EmailOutlined
+                  <LockOutlined
                     sx={{ color: "text.secondary", fontSize: 22 }}
                   />
                 </InputAdornment>
               ),
+              endAdornment: passwordAdornment,
             }}
             sx={inputSx}
           />
+        )}
 
-          {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 === "signup" && (
+          <TextField
+            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}
+          />
+        )}
 
-          {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 === "confirm" && (
+          <TextField
+            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 === "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 === "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}
-              size="large"
-              fullWidth
-              sx={{ ...primaryButtonSx, mt: 0.5 }}
-            >
-              Confirm
-            </Button>
-          )}
+      {mode === "signup" && (
+        <Stack spacing={1.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>
-      </Card>
-    </Box>
+      )}
+
+      {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 = (
     <>