umwd-components 0.1.217 → 0.1.219

package/dist/cjs/components/FooterV2.js

@@ -67,7 +67,6 @@ function Footer(_ref) {
     md: 4,
     sx: [useIcons && {
       display: "grid",
-      alignItems: "center",
       justifyContent: "center"
     }]
   }, /*#__PURE__*/React.createElement(material.Box, {
@@ -112,7 +111,6 @@ function Footer(_ref) {
     md: 4,
     sx: [useIcons && {
       display: "grid",
-      alignItems: "center",
       justifyContent: "stretch",
       width: {
         xs: "80%",
@@ -198,7 +196,6 @@ function Footer(_ref) {
     md: 4,
     sx: [useIcons && {
       display: "grid",
-      alignItems: "center",
       justifyContent: "center"
     }]
   }, company_socials && company_socials.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {

package/dist/cjs/components/StrapiErrors.js

@@ -0,0 +1,21 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var material = require('@mui/material');
+
+function StrapiErrors(_ref) {
+  let {
+    error
+  } = _ref;
+  if (!(error !== null && error !== void 0 && error.message)) return null;
+  return /*#__PURE__*/React.createElement(material.Alert, {
+    severity: "error"
+  }, error.message);
+}
+
+exports.StrapiErrors = StrapiErrors;

package/dist/cjs/components/SubmitButton.js

@@ -0,0 +1,37 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var reactDom = require('react-dom');
+var material = require('@mui/material');
+
+function Loader(_ref) {
+  let {
+    text
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(material.Skeleton, null), /*#__PURE__*/React.createElement("p", null, text));
+}
+function SubmitButton(_ref2) {
+  let {
+    text,
+    loadingText,
+    loading
+  } = _ref2;
+  const status = reactDom.useFormStatus();
+  return /*#__PURE__*/React.createElement(material.Button, {
+    type: "submit",
+    "aria-disabled": status.pending || loading,
+    disabled: status.pending || loading
+  }, status.pending || loading ? /*#__PURE__*/React.createElement(Loader, {
+    text: loadingText
+  }) : text);
+}
+
+exports.SubmitButton = SubmitButton;

package/dist/cjs/components/forms/RegisterForm.js

@@ -0,0 +1,95 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Link = require('next/link');
+var reactDom = require('react-dom');
+var authActions = require('../../data/actions/auth-actions.js');
+var material = require('@mui/material');
+var StrapiErrors = require('../StrapiErrors.js');
+var SubmitButton = require('../SubmitButton.js');
+var styles = require('@mui/material/styles');
+var utils = require('../../lib/utils.js');
+
+const INITIAL_STATE = {
+  data: null,
+  zodErrors: null,
+  message: null
+};
+function RegisterForm(_ref) {
+  var _formState$zodErrors, _formState$zodErrors2, _formState$zodErrors3, _formState$zodErrors4, _formState$zodErrors5, _formState$zodErrors6;
+  let {
+    data
+  } = _ref;
+  const {
+    title = "Sign Up",
+    subtitle = "Enter your details to create a new account",
+    maxWidth,
+    sx = {},
+    glass = false
+  } = data;
+  const [formState, formAction] = reactDom.useFormState(authActions.registerUserAction, INITIAL_STATE);
+  const theme = styles.useTheme();
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth ? maxWidth : "lg",
+    sx: {
+      my: 1,
+      ...sx
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    action: formAction
+  }, /*#__PURE__*/React.createElement(material.Card, {
+    sx: {
+      backdropFilter: "blur(3px)",
+      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
+    }
+  }, /*#__PURE__*/React.createElement(material.CardHeader, {
+    title: title,
+    subheader: subtitle
+  }), /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    id: "username",
+    name: "username",
+    label: "username",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors = formState.zodErrors) === null || _formState$zodErrors === void 0 ? void 0 : _formState$zodErrors.username) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors2 = formState.zodErrors) === null || _formState$zodErrors2 === void 0 ? void 0 : _formState$zodErrors2.username
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "email",
+    name: "email",
+    label: "email",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors3 = formState.zodErrors) === null || _formState$zodErrors3 === void 0 ? void 0 : _formState$zodErrors3.email) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors4 = formState.zodErrors) === null || _formState$zodErrors4 === void 0 ? void 0 : _formState$zodErrors4.email
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "password",
+    name: "password",
+    label: "password",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors5 = formState.zodErrors) === null || _formState$zodErrors5 === void 0 ? void 0 : _formState$zodErrors5.password) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors6 = formState.zodErrors) === null || _formState$zodErrors6 === void 0 ? void 0 : _formState$zodErrors6.password
+  }))), /*#__PURE__*/React.createElement(material.CardActions, null, /*#__PURE__*/React.createElement(SubmitButton.SubmitButton, {
+    text: "Sign Up",
+    loadingText: "Loading"
+  }), /*#__PURE__*/React.createElement(StrapiErrors.StrapiErrors, {
+    error: formState === null || formState === void 0 ? void 0 : formState.strapiErrors
+  }))), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body2",
+    sx: {
+      pt: 2
+    }
+  }, "Have an account?"), /*#__PURE__*/React.createElement(Link, {
+    href: "signin"
+  }, "Sing In")));
+}
+
+exports.default = RegisterForm;

package/dist/cjs/components/forms/SigninForm.js

@@ -0,0 +1,89 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Link = require('next/link');
+var reactDom = require('react-dom');
+var authActions = require('../../data/actions/auth-actions.js');
+var utils = require('../../lib/utils.js');
+var material = require('@mui/material');
+var SubmitButton = require('../SubmitButton.js');
+var StrapiErrors = require('../StrapiErrors.js');
+var styles = require('@mui/material/styles');
+
+const INITIAL_STATE = {
+  zodErrors: null,
+  strapiErrors: null,
+  data: null,
+  message: null
+};
+function SigninForm(_ref) {
+  var _formState$zodErrors, _formState$zodErrors2, _formState$zodErrors3, _formState$zodErrors4;
+  let {
+    data
+  } = _ref;
+  const {
+    title = "Sign In",
+    subtitle = "Enter your details to sign in to your account",
+    maxWidth,
+    sx = {},
+    glass = false
+  } = data;
+  const [formState, formAction] = reactDom.useFormState(authActions.loginUserAction, INITIAL_STATE);
+  const theme = styles.useTheme();
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth ? maxWidth : "lg",
+    sx: {
+      my: 1,
+      ...sx
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    action: formAction
+  }, /*#__PURE__*/React.createElement(material.Card, {
+    sx: {
+      backdropFilter: "blur(3px)",
+      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
+    }
+  }, /*#__PURE__*/React.createElement(material.CardHeader, {
+    title: title,
+    subheader: subtitle
+  }), /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    id: "identifier",
+    name: "identifier",
+    label: "identifier",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors = formState.zodErrors) === null || _formState$zodErrors === void 0 ? void 0 : _formState$zodErrors.identifier) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors2 = formState.zodErrors) === null || _formState$zodErrors2 === void 0 ? void 0 : _formState$zodErrors2.identifier
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "password",
+    name: "password",
+    label: "password",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors3 = formState.zodErrors) === null || _formState$zodErrors3 === void 0 ? void 0 : _formState$zodErrors3.password) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors4 = formState.zodErrors) === null || _formState$zodErrors4 === void 0 ? void 0 : _formState$zodErrors4.password
+  }))), /*#__PURE__*/React.createElement(material.CardActions, null, /*#__PURE__*/React.createElement(SubmitButton.SubmitButton, {
+    text: "Sign In",
+    loadingText: "Loading"
+  }), /*#__PURE__*/React.createElement(StrapiErrors.StrapiErrors, {
+    error: formState === null || formState === void 0 ? void 0 : formState.strapiErrors
+  }))), /*#__PURE__*/React.createElement(material.Typography, {
+    sx: {
+      pt: 2
+    },
+    variant: "body2"
+  }, "Don't have an account?"), /*#__PURE__*/React.createElement(Link, {
+    href: "signup"
+  }, "Sign Up")));
+}
+
+exports.default = SigninForm;

package/dist/cjs/data/actions/auth-actions.js

@@ -0,0 +1,115 @@
+"use server";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var zod = require('zod');
+var headers = require('next/headers');
+var navigation = require('next/navigation');
+var authService = require('../services/auth-service.js');
+
+var _process$env$HOST;
+const config = {
+  maxAge: 60 * 60 * 24 * 7,
+  // 1 week
+  path: "/",
+  domain: (_process$env$HOST = process.env.HOST) !== null && _process$env$HOST !== void 0 ? _process$env$HOST : "localhost",
+  httpOnly: true,
+  secure: process.env.NODE_ENV === "production"
+};
+const schemaRegister = zod.z.object({
+  username: zod.z.string().min(3).max(20, {
+    message: "Username must be between 3 and 20 characters"
+  }),
+  password: zod.z.string().min(6).max(100, {
+    message: "Password must be between 6 and 100 characters"
+  }),
+  email: zod.z.string().email({
+    message: "Please enter a valid email address"
+  })
+});
+async function registerUserAction(prevState, formData) {
+  const validatedFields = schemaRegister.safeParse({
+    username: formData.get("username"),
+    password: formData.get("password"),
+    email: formData.get("email")
+  });
+  if (!validatedFields.success) {
+    return {
+      ...prevState,
+      zodErrors: validatedFields.error.flatten().fieldErrors,
+      strapiErrors: null,
+      message: "Missing Fields. Failed to Register."
+    };
+  }
+  const responseData = await authService.registerUserService(validatedFields.data);
+  if (!responseData) {
+    return {
+      ...prevState,
+      strapiErrors: null,
+      zodErrors: null,
+      message: "Ops! Something went wrong. Please try again."
+    };
+  }
+  if (responseData.error) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      zodErrors: null,
+      message: "Failed to Register."
+    };
+  }
+  headers.cookies().set("jwt", responseData.jwt, config);
+  navigation.redirect("/dashboard");
+}
+const schemaLogin = zod.z.object({
+  identifier: zod.z.string().min(3, {
+    message: "Identifier must have at least 3 or more characters"
+  }).max(20, {
+    message: "Please enter a valid username or email address"
+  }),
+  password: zod.z.string().min(6, {
+    message: "Password must have at least 6 or more characters"
+  }).max(100, {
+    message: "Password must be between 6 and 100 characters"
+  })
+});
+async function loginUserAction(prevState, formData) {
+  const validatedFields = schemaLogin.safeParse({
+    identifier: formData.get("identifier"),
+    password: formData.get("password")
+  });
+  if (!validatedFields.success) {
+    return {
+      ...prevState,
+      zodErrors: validatedFields.error.flatten().fieldErrors,
+      message: "Missing Fields. Failed to Login."
+    };
+  }
+  const responseData = await authService.loginUserService(validatedFields.data);
+  if (!responseData) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      zodErrors: null,
+      message: "Ops! Something went wrong. Please try again."
+    };
+  }
+  if (responseData.error) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      zodErrors: null,
+      message: "Failed to Login."
+    };
+  }
+  headers.cookies().set("jwt", responseData.jwt, config);
+  navigation.redirect("/dashboard");
+}
+
+exports.loginUserAction = loginUserAction;
+exports.registerUserAction = registerUserAction;

package/dist/cjs/data/services/auth-service.js

@@ -0,0 +1,51 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var utils = require('../../lib/utils.js');
+
+const baseUrl = utils.getStrapiURL();
+async function registerUserService(userData) {
+  const url = new URL("/api/auth/local/register", baseUrl);
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        ...userData
+      }),
+      cache: "no-cache"
+    });
+    return response.json();
+  } catch (error) {
+    console.error("Registration Service Error:", error);
+  }
+}
+async function loginUserService(userData) {
+  const url = new URL("/api/auth/local", baseUrl);
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        ...userData
+      }),
+      cache: "no-cache"
+    });
+    return response.json();
+  } catch (error) {
+    console.error("Login Service Error:", error);
+    throw error;
+  }
+}
+
+exports.loginUserService = loginUserService;
+exports.registerUserService = registerUserService;

package/dist/cjs/index.js

@@ -19,6 +19,8 @@ var WhatsAppClickToChatButton = require('./components/WhatsAppClickToChatButton.
 var ScrollLink = require('./components/ScrollLink.js');
 var ScrollNavbar = require('./components/ScrollNavbar.js');
 var FluidBackgroundV2 = require('./components/FluidBackgroundV2.js');
+var RegisterForm = require('./components/forms/RegisterForm.js');
+var SigninForm = require('./components/forms/SigninForm.js');
 
 
 
@@ -35,3 +37,5 @@ exports.WhatsAppClickToChatButton = WhatsAppClickToChatButton.default;
 exports.ScrollLink = ScrollLink.default;
 exports.ScrollNavbar = ScrollNavbar.default;
 exports.FluidBackground = FluidBackgroundV2.default;
+exports.RegisterForm = RegisterForm.default;
+exports.SigninForm = SigninForm.default;

package/dist/esm/components/FooterV2.js

@@ -63,7 +63,6 @@ function Footer(_ref) {
     md: 4,
     sx: [useIcons && {
       display: "grid",
-      alignItems: "center",
       justifyContent: "center"
     }]
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -108,7 +107,6 @@ function Footer(_ref) {
     md: 4,
     sx: [useIcons && {
       display: "grid",
-      alignItems: "center",
       justifyContent: "stretch",
       width: {
         xs: "80%",
@@ -194,7 +192,6 @@ function Footer(_ref) {
     md: 4,
     sx: [useIcons && {
       display: "grid",
-      alignItems: "center",
       justifyContent: "center"
     }]
   }, company_socials && company_socials.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {

package/dist/esm/components/StrapiErrors.js

@@ -0,0 +1,19 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { Alert } from '@mui/material';
+
+function StrapiErrors(_ref) {
+  let {
+    error
+  } = _ref;
+  if (!(error !== null && error !== void 0 && error.message)) return null;
+  return /*#__PURE__*/React.createElement(Alert, {
+    severity: "error"
+  }, error.message);
+}
+
+export { StrapiErrors };

package/dist/esm/components/SubmitButton.js

@@ -0,0 +1,35 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { useFormStatus } from 'react-dom';
+import { Button, Skeleton } from '@mui/material';
+
+function Loader(_ref) {
+  let {
+    text
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Skeleton, null), /*#__PURE__*/React.createElement("p", null, text));
+}
+function SubmitButton(_ref2) {
+  let {
+    text,
+    loadingText,
+    loading
+  } = _ref2;
+  const status = useFormStatus();
+  return /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    "aria-disabled": status.pending || loading,
+    disabled: status.pending || loading
+  }, status.pending || loading ? /*#__PURE__*/React.createElement(Loader, {
+    text: loadingText
+  }) : text);
+}
+
+export { SubmitButton };

package/dist/esm/components/forms/RegisterForm.js

@@ -0,0 +1,91 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import Link from 'next/link';
+import { useFormState } from 'react-dom';
+import { registerUserAction } from '../../data/actions/auth-actions.js';
+import { Container, Card, CardHeader, CardContent, Stack, TextField, CardActions, Typography } from '@mui/material';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { SubmitButton } from '../SubmitButton.js';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+
+const INITIAL_STATE = {
+  data: null,
+  zodErrors: null,
+  message: null
+};
+function RegisterForm(_ref) {
+  var _formState$zodErrors, _formState$zodErrors2, _formState$zodErrors3, _formState$zodErrors4, _formState$zodErrors5, _formState$zodErrors6;
+  let {
+    data
+  } = _ref;
+  const {
+    title = "Sign Up",
+    subtitle = "Enter your details to create a new account",
+    maxWidth,
+    sx = {},
+    glass = false
+  } = data;
+  const [formState, formAction] = useFormState(registerUserAction, INITIAL_STATE);
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: maxWidth ? maxWidth : "lg",
+    sx: {
+      my: 1,
+      ...sx
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    action: formAction
+  }, /*#__PURE__*/React.createElement(Card, {
+    sx: {
+      backdropFilter: "blur(3px)",
+      backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
+    }
+  }, /*#__PURE__*/React.createElement(CardHeader, {
+    title: title,
+    subheader: subtitle
+  }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(TextField, {
+    id: "username",
+    name: "username",
+    label: "username",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors = formState.zodErrors) === null || _formState$zodErrors === void 0 ? void 0 : _formState$zodErrors.username) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors2 = formState.zodErrors) === null || _formState$zodErrors2 === void 0 ? void 0 : _formState$zodErrors2.username
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "email",
+    name: "email",
+    label: "email",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors3 = formState.zodErrors) === null || _formState$zodErrors3 === void 0 ? void 0 : _formState$zodErrors3.email) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors4 = formState.zodErrors) === null || _formState$zodErrors4 === void 0 ? void 0 : _formState$zodErrors4.email
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "password",
+    name: "password",
+    label: "password",
+    variant: "outlined",
+    error: (formState === null || formState === void 0 || (_formState$zodErrors5 = formState.zodErrors) === null || _formState$zodErrors5 === void 0 ? void 0 : _formState$zodErrors5.password) != undefined ? true : false,
+    helperText: formState === null || formState === void 0 || (_formState$zodErrors6 = formState.zodErrors) === null || _formState$zodErrors6 === void 0 ? void 0 : _formState$zodErrors6.password
+  }))), /*#__PURE__*/React.createElement(CardActions, null, /*#__PURE__*/React.createElement(SubmitButton, {
+    text: "Sign Up",
+    loadingText: "Loading"
+  }), /*#__PURE__*/React.createElement(StrapiErrors, {
+    error: formState === null || formState === void 0 ? void 0 : formState.strapiErrors
+  }))), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    sx: {
+      pt: 2
+    }
+  }, "Have an account?"), /*#__PURE__*/React.createElement(Link, {
+    href: "signin"
+  }, "Sing In")));
+}
+
+export { RegisterForm as default };