test-nucleoid 1.0.0

package/src/utils/format-time.js

@@ -0,0 +1,27 @@
+import { format, formatDistanceToNow, getTime } from "date-fns";
+
+// ----------------------------------------------------------------------
+
+export function fDate(date, newFormat) {
+  const fm = newFormat || "dd MMM yyyy";
+
+  return date ? format(new Date(date), fm) : "";
+}
+
+export function fDateTime(date, newFormat) {
+  const fm = newFormat || "dd MMM yyyy p";
+
+  return date ? format(new Date(date), fm) : "";
+}
+
+export function fTimestamp(date) {
+  return date ? getTime(new Date(date)) : "";
+}
+
+export function fToNow(date) {
+  return date
+    ? formatDistanceToNow(new Date(date), {
+        addSuffix: true,
+      })
+    : "";
+}

package/src/utils/storage-available.js

@@ -0,0 +1,24 @@
+// ----------------------------------------------------------------------
+
+export function localStorageAvailable() {
+  try {
+    const key = "__some_random_key_you_are_not_going_to_use__";
+    window.localStorage.setItem(key, key);
+    window.localStorage.removeItem(key);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+export function localStorageGetItem(key, defaultValue = "") {
+  const storageAvailable = localStorageAvailable();
+
+  let value;
+
+  if (storageAvailable) {
+    value = localStorage.getItem(key) || defaultValue;
+  }
+
+  return value;
+}

package/src/widgets/Login/CognitoLogin.jsx

@@ -0,0 +1,45 @@
+import { loginWithCognito } from "./cognitoAuth";
+import { storage } from "@nucleoidjs/webstorage";
+import { useState } from "react";
+
+import { Button, Stack, TextField, Typography } from "@mui/material";
+
+export default function CognitoLogin() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    try {
+      const tokens = await loginWithCognito(username, password);
+      console.log("Login successful, tokens:", tokens);
+      storage.set("link", "accessToken", tokens.AccessToken);
+      storage.set("link", "refreshToken", tokens.RefreshToken);
+      window.location.href = "/";
+    } catch (e) {
+      console.error("Login error:", e);
+      alert(`Login failed: ${e.message || e}`);
+    }
+  };
+
+  return (
+    <>
+      <Typography variant="h4">Login</Typography>
+      <Stack spacing={2}>
+        <TextField
+          label="Username or Email"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <TextField
+          type="password"
+          label="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <Button variant="contained" onClick={handleLogin}>
+          Login
+        </Button>
+      </Stack>
+    </>
+  );
+}

package/src/widgets/Login/DemoLogin.jsx

@@ -0,0 +1,178 @@
+import {
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+  alpha,
+} from "@mui/material";
+import {
+  LockOutlined,
+  PersonOutline,
+  Visibility,
+  VisibilityOff,
+} 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();
+
+  async function handleLogin() {
+    const res = await fetch("/api/oauth/demo", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        appId: appId,
+        projectId: "cb16e069-6214-47f1-9922-1f7fe7629525",
+        username,
+        password,
+      }),
+    });
+
+    if (!res.ok) throw new Error("Demo login failed");
+
+    const data = await res.json();
+
+    storage.set("link", "accessToken", data.accessToken);
+    storage.set("link", "refreshToken", data.refreshToken);
+    storage.set("link", "identityProvider", "Demo");
+
+    navigate("/");
+  }
+
+  return (
+    <Stack spacing={2.5}>
+      <Stack spacing={2}>
+        <TextField
+          label="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PersonOutline sx={{ color: "text.secondary", fontSize: 22 }} />
+              </InputAdornment>
+            ),
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              fontSize: "1rem",
+              "& input": {
+                py: 1.5,
+              },
+              "&:hover fieldset": {
+                borderColor: "primary.main",
+              },
+            },
+          }}
+        />
+
+        <TextField
+          label="Password"
+          type={showPassword ? "text" : "password"}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <LockOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
+              </InputAdornment>
+            ),
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => setShowPassword(!showPassword)}
+                  edge="end"
+                  size="small"
+                  tabIndex={-1}
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              fontSize: "1rem",
+              "& input": {
+                py: 1.5,
+              },
+              "&:hover fieldset": {
+                borderColor: "primary.main",
+              },
+            },
+          }}
+          onKeyPress={(e) => {
+            if (e.key === "Enter") {
+              handleLogin();
+            }
+          }}
+        />
+      </Stack>
+
+      <Button
+        variant="contained"
+        onClick={handleLogin}
+        size="large"
+        fullWidth
+        sx={{
+          mt: 1,
+          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)",
+          },
+        }}
+      >
+        Sign in
+      </Button>
+
+      <Box
+        sx={{
+          mt: 1,
+          textAlign: "center",
+          p: 2,
+          borderRadius: 1.5,
+          bgcolor: (theme) => alpha(theme.palette.info.main, 0.08),
+          border: (theme) =>
+            `1px dashed ${alpha(theme.palette.info.main, 0.24)}`,
+        }}
+      >
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{ fontSize: "0.8125rem" }}
+        >
+          Demo credentials:{" "}
+          <Box component="strong" sx={{ color: "text.primary" }}>
+            admin / admin
+          </Box>
+        </Typography>
+      </Box>
+    </Stack>
+  );
+}

package/src/widgets/Login/Login.jsx

@@ -0,0 +1,58 @@
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import config from "../../config/config";
+import { storage } from "@nucleoidjs/webstorage";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+// ----------------------------------------------------------------------
+
+export default function Auth0LoginView() {
+  const { name, project } = config();
+
+  const handleOAuthLogin = ({ authUrl, clientId, redirectUri, scope }) => {
+    window.location.href = `${authUrl}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code`;
+  };
+  const navigate = useNavigate();
+
+  function token() {
+    if (
+      storage.get("link", "refreshToken") &&
+      storage.get("link", "accessToken")
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  useEffect(() => {
+    if (token()) {
+      navigate("/");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigate]);
+
+  return (
+    <>
+      <Typography variant="h4" sx={{ mb: 5 }}>
+        Sign in to {name}
+      </Typography>
+      <Divider />
+      <Stack spacing={2}>
+        <Button
+          fullWidth={true}
+          color="primary"
+          size="large"
+          variant="contained"
+          onClick={() => handleOAuthLogin({ ...project.github })}
+        >
+          Login with Github
+        </Button>
+      </Stack>
+    </>
+  );
+}

package/src/widgets/Login/cognitoAuth.jsx

@@ -0,0 +1,44 @@
+import config from "../../config/config";
+
+import {
+  CognitoIdentityProviderClient,
+  InitiateAuthCommand,
+} from "@aws-sdk/client-cognito-identity-provider";
+
+let client = null;
+
+function getClient() {
+  if (!client) {
+    const { credentials } = config();
+    if (!credentials) {
+      throw new Error("Cognito credentials not initialized yet");
+    }
+
+    client = new CognitoIdentityProviderClient({
+      region: credentials.region,
+    });
+
+    console.log("Initialized Cognito Client with region:", credentials.region);
+  }
+
+  return client;
+}
+
+export async function loginWithCognito(username, password) {
+  const { credentials } = config();
+  if (!credentials) {
+    throw new Error("CONFIG not initialized yet. Wait for CONFIG_INITIALIZED.");
+  }
+
+  const command = new InitiateAuthCommand({
+    AuthFlow: "USER_PASSWORD_AUTH",
+    ClientId: credentials.clientId,
+    AuthParameters: {
+      USERNAME: username,
+      PASSWORD: password,
+    },
+  });
+
+  const response = await getClient().send(command);
+  return response.AuthenticationResult;
+}

package/src/widgets/LoginForm/LoginForm.jsx

@@ -0,0 +1,87 @@
+import NucleoidLoginForm from "../../components/NucleoidLoginForm";
+import SocialLoginButtons from "../../components/SocialLoginButtons";
+import Stack from "@mui/material/Stack";
+import config from "../../config/config";
+
+import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+const handleOAuthLogin = (
+  { redirectUri, authUrl, clientId, scope },
+  identityProvider
+) => {
+  const state = JSON.stringify({
+    identityProvider: identityProvider,
+  });
+  const encodedState = encodeURIComponent(state);
+  window.location.href = `${authUrl}?client_id=${clientId}&scope=${scope}&response_type=code&redirect_uri=${redirectUri}&state=${encodedState}`;
+};
+
+function LoginForm() {
+  const { name, project } = config();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const renderHead = (
+    <Stack spacing={2} sx={{ mb: 5 }}>
+      <Typography variant="h4">Sign in to {name}</Typography>
+      {project.nucleoid && (
+        <Stack direction="row" spacing={0.5}>
+          <Typography variant="body2">New user?</Typography>
+
+          <MuiLink variant="subtitle2">Create an account</MuiLink>
+        </Stack>
+      )}
+    </Stack>
+  );
+
+  const renderForm = (
+    <>
+      {!!project.nucleoid && (
+        <>
+          <NucleoidLoginForm
+            email={email}
+            password={password}
+            setEmail={setEmail}
+            setPassword={setPassword}
+            // TODO: Add function for login without Oauth 2.0
+            onSubmit={() => handleOAuthLogin(config.login.nucleoid)}
+          />
+          <Typography
+            variant="body2"
+            sx={{ width: "100%", textAlign: "center" }}
+          >
+            Don&apos;t have an account ?
+            <MuiLink
+              href="/console/login2"
+              variant="body2"
+              sx={{ display: "flex", justifyContent: "center" }}
+            >
+              Sign Up Now
+            </MuiLink>
+          </Typography>
+
+          <Divider sx={{ width: "100%", margin: "1rem 0" }}>
+            <Box sx={{ px: 2 }}>or</Box>
+          </Divider>
+        </>
+      )}
+      <SocialLoginButtons
+        googleEnable={!!project.google}
+        onGoogle={() => handleOAuthLogin({ ...project.google }, "google")}
+        githubEnable={!!project.github}
+        onGithub={() => handleOAuthLogin({ ...project.github }, "github")}
+        linkedinEnable={!!project.linkedin}
+        onLinkedin={() => handleOAuthLogin({ ...project.linkedin }, "linkedin")}
+      />
+    </>
+  );
+
+  return (
+    <>
+      {renderHead} {renderForm}
+    </>
+  );
+}
+export default LoginForm;

package/src/widgets/LoginForm/LoginFormStyles.js

@@ -0,0 +1,43 @@
+const LoginFormStyles = {
+  mainBoxStyle: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "1rem",
+    borderRadius: "10px",
+    justifyContent: "center",
+  },
+
+  formBoxStyle: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+  },
+  signInButtonStyle: {
+    margin: "1rem 0 2rem",
+    width: "100%",
+    color: "#f4f4f4",
+  },
+  githubButtonStyle: {
+    margin: "0.5rem 0 ",
+    width: "100%",
+    color: "#f4f4f4",
+    backgroundColor: "#333",
+  },
+  googleButtonStyle: {
+    margin: "0.5rem 0",
+    width: "100%",
+    backgroundColor: "#fff",
+    color: "#3C3C3C",
+    borderColor: "#DB4437",
+  },
+  linkedinButtonStyle: {
+    margin: "0.5rem 0 1rem",
+    width: "100%",
+    backgroundColor: "#0077b5",
+    color: "#f4f4f4",
+  },
+};
+export default LoginFormStyles;

package/src/widgets/LoginForm/index.js

@@ -0,0 +1 @@
+export { default } from "./LoginForm";