umwd-components 0.1.232 → 0.1.233

package/dist/cjs/components/LogoutButton.js

@@ -0,0 +1,35 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var authActions = require('../data/actions/auth-actions.js');
+var material = require('@mui/material');
+var LogoutIcon = require('@mui/icons-material/Logout');
+
+//
+function LogoutButton(_ref) {
+  let {
+    text = "Log out",
+    variant = "text"
+  } = _ref;
+  return /*#__PURE__*/React.createElement("form", {
+    action: authActions.logoutAction
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    type: "submit"
+    // aria-disabled={status.pending || loading}
+    // disabled={status.pending || loading}
+    ,
+    startIcon: /*#__PURE__*/React.createElement(LogoutIcon, null),
+    variant: variant
+  }, text));
+}
+
+exports.default = LogoutButton;

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

@@ -110,6 +110,14 @@ async function loginUserAction(prevState, formData) {
   headers.cookies().set("jwt", responseData.jwt, config);
   navigation.redirect("/dashboard");
 }
+async function logoutAction() {
+  headers.cookies().set("jwt", "", {
+    ...config,
+    maxAge: 0
+  });
+  navigation.redirect("/");
+}
 
 exports.loginUserAction = loginUserAction;
+exports.logoutAction = logoutAction;
 exports.registerUserAction = registerUserAction;

package/dist/cjs/index.js

@@ -22,6 +22,7 @@ var FluidBackgroundV2 = require('./components/FluidBackgroundV2.js');
 var RegisterForm = require('./components/forms/RegisterForm.js');
 var SigninForm = require('./components/forms/SigninForm.js');
 var SideNav = require('./components/dashboard/SideNav.js');
+var LogoutButton = require('./components/LogoutButton.js');
 
 
 
@@ -41,3 +42,4 @@ exports.FluidBackground = FluidBackgroundV2.default;
 exports.RegisterForm = RegisterForm.default;
 exports.SigninForm = SigninForm.default;
 exports.SideNav = SideNav.default;
+exports.LogoutButton = LogoutButton.default;

package/dist/esm/components/LogoutButton.js

@@ -0,0 +1,31 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React__default from 'react';
+import { logoutAction } from '../data/actions/auth-actions.js';
+import { Button } from '@mui/material';
+import LogoutIcon from '@mui/icons-material/Logout';
+
+//
+function LogoutButton(_ref) {
+  let {
+    text = "Log out",
+    variant = "text"
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("form", {
+    action: logoutAction
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: "submit"
+    // aria-disabled={status.pending || loading}
+    // disabled={status.pending || loading}
+    ,
+    startIcon: /*#__PURE__*/React__default.createElement(LogoutIcon, null),
+    variant: variant
+  }, text));
+}
+
+export { LogoutButton as default };

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

@@ -108,5 +108,12 @@ async function loginUserAction(prevState, formData) {
   cookies().set("jwt", responseData.jwt, config);
   redirect("/dashboard");
 }
+async function logoutAction() {
+  cookies().set("jwt", "", {
+    ...config,
+    maxAge: 0
+  });
+  redirect("/");
+}
 
-export { loginUserAction, registerUserAction };
+export { loginUserAction, logoutAction, registerUserAction };

package/dist/esm/index.js

@@ -20,3 +20,4 @@ export { default as FluidBackground } from './components/FluidBackgroundV2.js';
 export { default as RegisterForm } from './components/forms/RegisterForm.js';
 export { default as SigninForm } from './components/forms/SigninForm.js';
 export { default as SideNav } from './components/dashboard/SideNav.js';
+export { default as LogoutButton } from './components/LogoutButton.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.232",
+  "version": "0.1.233",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/LogoutButton.tsx

@@ -1,12 +1,63 @@
-import { logoutAction } from "@/data/actions/auth-actions";
-import { LogOut } from "lucide-react";
+"use client";
+import React from "react";
+import { logoutAction } from "../data/actions/auth-actions.ts";
+import { Button, Skeleton } from "@mui/material";
+import LogoutIcon from "@mui/icons-material/Logout";
 
-export function LogoutButton() {
+interface LogoutButtonProps {
+  text: string;
+  variant?: "text" | "outlined" | "contained";
+  /* loadingText: string;
+  loading?: boolean; */
+}
+
+//
+function LogoutButton({
+  text = "Log out",
+  variant = "text",
+}: Readonly<LogoutButtonProps>) {
   return (
     <form action={logoutAction}>
-      <button type="submit">
-        <LogOut className="w-6 h-6 hover:text-primary" />
-      </button>
+      <Button
+        type="submit"
+        // aria-disabled={status.pending || loading}
+        // disabled={status.pending || loading}
+        startIcon={<LogoutIcon />}
+        variant={variant}
+      >
+        {/*{status.pending || loading ? <Loader text={loadingText} /> : text}*/}
+        {text}
+      </Button>
     </form>
   );
 }
+
+/* import { useFormStatus } from "react-dom";
+
+function Loader({ text }: { readonly text: string }) {
+  return (
+    <div className="flex items-center space-x-2">
+      <Skeleton />
+      <p>{text}</p>
+    </div>
+  );
+} */
+
+/* export function SubmitButton({
+  text,
+  loadingText,
+  loading,
+}: Readonly<SubmitButtonProps>) {
+  const status = useFormStatus();
+  return (
+    <Button
+      type="submit"
+      aria-disabled={status.pending || loading}
+      disabled={status.pending || loading}
+    >
+      {status.pending || loading ? <Loader text={loadingText} /> : text}
+    </Button>
+  );
+} */
+
+export default LogoutButton;

package/src/index.js

@@ -14,3 +14,4 @@ export { default as FluidBackground } from "./components/FluidBackgroundV2.tsx";
 export { default as RegisterForm } from "./components/forms/RegisterForm.tsx";
 export { default as SigninForm } from "./components/forms/SigninForm.tsx";
 export { default as SideNav } from "./components/dashboard/SideNav.tsx";
+export { default as LogoutButton } from "./components/LogoutButton.tsx";

package/src/stories/LogoutButton.stories.js

@@ -0,0 +1,15 @@
+import LogoutButton from "../components/LogoutButton.tsx";
+import React from "react";
+
+export default {
+  title: "UMWD/LogoutButton",
+  component: LogoutButton,
+};
+
+const Template = ({ ...args }) => <LogoutButton data={{ ...args }} />;
+
+export const HelloWorld = Template.bind({});
+
+HelloWorld.args = {
+  text: "Log-Out",
+};