@ebubekirylmaz/link-test 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,43 @@
+import { loginWithCognito } from "./cognitoAuth";
+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(tokens);
+      localStorage.setItem("link", "accessToken", tokens.AccessToken);
+      localStorage.setItem("link", "refreshToken", tokens.RefreshToken);
+      window.location.href = "/";
+    } catch (e) {
+      alert("Login failed");
+    }
+  };
+
+  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/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,26 @@
+import {
+  CognitoIdentityProviderClient,
+  InitiateAuthCommand,
+} from "@aws-sdk/client-cognito-identity-provider";
+
+import config from "../../config/config";
+
+const { credentials } = config();
+
+const client = new CognitoIdentityProviderClient({
+  region: credentials?.region,
+});
+
+export async function loginWithCognito(username, password) {
+  const command = new InitiateAuthCommand({
+    AuthFlow: "USER_PASSWORD_AUTH",
+    ClientId: credentials.clientId,
+    AuthParameters: {
+      USERNAME: username,
+      PASSWORD: password,
+    },
+  });
+
+  const response = await client.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";

package/src/widgets/SettingsDialog.jsx

@@ -0,0 +1,308 @@
+import {
+  Avatar,
+  Box,
+  FormControl,
+  Grow,
+  IconButton,
+  InputLabel,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemSecondaryAction,
+  ListItemText,
+  NativeSelect,
+  Stack,
+  Tab,
+  Tabs,
+  TextField,
+  Typography,
+} from "@mui/material";
+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";
+
+function a11yProps(index) {
+  return {
+    id: `vertical-tab-${index}`,
+    "aria-controls": `vertical-tabpanel-${index}`,
+  };
+}
+
+const TabPanel = (props) => {
+  const { children, value, index } = props;
+
+  return <>{value === index && <Box sx={{ pl: 2, pr: 1 }}>{children}</Box>}</>;
+};
+
+const SettingsDialogTabs = ({ tabs }) => {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          flexGrow: 1,
+          bgcolor: "background.paper",
+          display: "flex",
+          height: 515,
+        }}
+      >
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          orientation="vertical"
+          variant="scrollable"
+          sx={{
+            borderRight: 1,
+            borderColor: "divider",
+            width: 120,
+            display: "flex",
+            flexDirection: "flex-end",
+            ml: -2,
+            mt: 1,
+            "& .MuiTabs-indicator": {
+              backgroundColor: "primary.main",
+              height: 3,
+            },
+            "& .MuiTab-root.Mui-selected": {
+              color: "custom.grey",
+              bgcolor: "rgba(0,0,0,0.1)",
+              borderTopLeftRadius: 8,
+              borderBottomLeftRadius: 8,
+            },
+            "& .MuiTab-root": {
+              color: "custom.grey",
+              width: 1,
+            },
+          }}
+        >
+          <Tab
+            label={"Permissions"}
+            sx={{ "& label": { color: "custom.grey" } }}
+            {...a11yProps(0)}
+          />
+          <Tab
+            label={"Settings"}
+            sx={{ "& label": { color: "custom.grey" } }}
+            {...a11yProps(1)}
+          />
+          {tabs?.map((tab, index) => (
+            <Tab
+              key={tab.label}
+              iconPosition="start"
+              label={tab.label}
+              sx={{ "& label": { color: "custom.grey" } }}
+              {...a11yProps(index + 2)}
+            />
+          ))}
+        </Tabs>
+        <Box sx={{ width: "100%" }}>
+          <TabPanel value={value} index={0}>
+            <Permission />
+          </TabPanel>
+          <TabPanel value={value} index={1}>
+            <Settings />
+          </TabPanel>
+          {tabs?.map((tab, index) => (
+            <TabPanel key={tab.label} value={value} index={index + 2}>
+              <tab.panel />
+            </TabPanel>
+          ))}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+function SettingsDialog({ handleClose, open }) {
+  const { settings } = config().template;
+  return (
+    <Dialog
+      open={open}
+      fullWidth
+      maxWidth={"md"}
+      onClose={() => handleClose()}
+      sx={{ bgcolor: "custom.darkDialogBg", zIndex: 2147483647 }}
+      PaperProps={{
+        style: {
+          color: "white",
+          minHeight: 600,
+        },
+      }}
+    >
+      <DialogContent>
+        <Typography variant="h5" sx={{ my: 2 }}>
+          Settings
+        </Typography>
+        <SettingsDialogTabs tabs={settings.tabs} />
+      </DialogContent>
+      <DialogActions
+        sx={{
+          borderTop: 1,
+          borderColor: "divider",
+          display: "flex",
+          justifyContent: "flex-end",
+        }}
+      >
+        <Button
+          sx={{ color: "white" }}
+          autoFocus
+          onClick={() => console.log("save")}
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+const Permission = () => {
+  const [newUserId, setNewUserId] = useState(null);
+  const { getPermittedUsers, users, createPermission, deletePermission } =
+    useUser();
+  const [event] = useEvent("PERMISSION_CREATED", null);
+  const [event2] = useEvent("PERMISSION_DELETED", null);
+
+  useEffect(() => {
+    getPermittedUsers();
+  }, [event, event2]);
+
+  return (
+    <Stack direction="column" spacing={2} p={2}>
+      <Typography variant="h6">Users</Typography>
+      <Typography variant="subtitle2" color="text.secondary">
+        Users with access to the project.
+      </Typography>
+      <List>
+        {users?.map((user) => (
+          <ListItem
+            key={user.id}
+            sx={{
+              backgroundColor: "background.paper",
+              boxShadow: 1,
+              borderRadius: 1,
+              m: 1,
+              p: 2,
+              ":hover": { boxShadow: 3 },
+              transition: "all 0.2s ease-in-out",
+            }}
+          >
+            <ListItemAvatar>
+              <Avatar src={user.avatar_url} alt={user.name} />
+            </ListItemAvatar>
+            <ListItemText primary={user.name} />
+            <ListItemSecondaryAction>
+              <IconButton
+                onClick={async () => {
+                  await deletePermission(user.id);
+                }}
+                sx={{ color: "error.main" }}
+              >
+                <Iconify icon="solar:trash-bin-minimalistic-bold-duotone" />
+              </IconButton>
+            </ListItemSecondaryAction>
+          </ListItem>
+        ))}
+        {newUserId !== null && (
+          <Grow in={true}>
+            <TextField
+              label="User ID"
+              value={newUserId}
+              onChange={(e) => setNewUserId(e.target.value)}
+              sx={{ width: "calc(100% - 16px)", m: 1 }}
+            />
+          </Grow>
+        )}
+      </List>
+      <Button
+        variant="contained"
+        size="medium"
+        fullWidth
+        sx={{
+          backgroundColor: "primary.main",
+          ":hover": { backgroundColor: "primary.dark" },
+        }}
+        onClick={async () => {
+          if (newUserId) {
+            await createPermission(newUserId);
+            setNewUserId(null);
+          } else {
+            setNewUserId("");
+          }
+        }}
+      >
+        {newUserId ? "Add User" : "Enter User ID"}
+      </Button>
+    </Stack>
+  );
+};
+
+const Settings = () => {
+  const projectId = localStorage.getItem("projectId");
+  const { settings, updateSettings } = useSettings(projectId);
+
+  const timeZones = [
+    "Asia/Kolkata",
+    "Asia/Dubai",
+    "America/New_York",
+    "America/Los_Angeles",
+    "Europe/London",
+  ];
+
+  const handleChange = (event) => {
+    const newTimeZone = event.target.value;
+    updateSettings(projectId, newTimeZone);
+  };
+
+  return (
+    <Stack direction="column" spacing={2} p={2}>
+      <Typography variant="h6">Settings</Typography>
+      <Typography variant="subtitle2" color="text.secondary">
+        Configure your application settings.
+      </Typography>
+      <List>
+        <ListItem
+          sx={{
+            backgroundColor: "background.paper",
+            boxShadow: 1,
+            borderRadius: 1,
+            m: 1,
+            p: 2,
+            ":hover": { boxShadow: 3 },
+            transition: "all 0.2s ease-in-out",
+          }}
+        >
+          <FormControl fullWidth>
+            <InputLabel variant="standard" shrink>
+              Time Zone
+            </InputLabel>
+            <NativeSelect
+              defaultValue={settings.timeZone || ""}
+              onChange={(event) => handleChange(event)}
+            >
+              <option value="" disabled>
+                {settings.timeZone || "Select Time Zone"}
+              </option>
+              {timeZones.map((time, index) => (
+                <option key={index} value={time}>
+                  {time}
+                </option>
+              ))}
+            </NativeSelect>
+          </FormControl>
+        </ListItem>
+      </List>
+    </Stack>
+  );
+};
+
+export default SettingsDialog;

package/src/widgets/error/index.js

@@ -0,0 +1 @@
+export { default as NotFoundView } from "./not-found-view";

package/src/widgets/error/not-found-view.jsx

@@ -0,0 +1,42 @@
+import Button from "@mui/material/Button";
+import { PageNotFoundIllustration } from "../../assets/illustrations";
+import React from "react";
+import { RouterLink } from "../../routes/components";
+import Typography from "@mui/material/Typography";
+import { motion } from "framer-motion";
+
+import { MotionContainer, varBounce } from "../../components/animate";
+
+// ----------------------------------------------------------------------
+
+export default function NotFoundView() {
+  return (
+    <MotionContainer>
+      <motion.div variants={varBounce().in}>
+        <Typography variant="h3" sx={{ mb: 2 }}>
+          Sorry, Page Not Found!
+        </Typography>
+      </motion.div>
+
+      <motion.div variants={varBounce().in}>
+        <Typography sx={{ color: "text.secondary" }}>
+          Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve
+          mistyped the URL? Be sure to check your spelling.
+        </Typography>
+      </motion.div>
+
+      <motion.div variants={varBounce().in}>
+        <PageNotFoundIllustration
+          sx={{
+            height: 260,
+            my: { xs: 5, sm: 10 },
+          }}
+        />
+      </motion.div>
+
+      <Button component={RouterLink} href="/" size="large" variant="contained">
+        Go to Home
+      </Button>
+    </MotionContainer>
+  );
+}