@appkit/dek-lib 0.46.0 → 0.47.0

package/dist/components/LoginScreen/LoginScreen.d.ts

@@ -0,0 +1,6 @@
+export declare const DEK_AUTH_TOKEN_KEY = "dek_auth_token";
+type Props = {
+    onSuccess: (token: string) => void;
+};
+declare const LoginScreen: ({ onSuccess }: Props) => import("react/jsx-runtime").JSX.Element;
+export default LoginScreen;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { default as Board } from './components/Board/Board';
+export { default as LoginScreen } from './components/LoginScreen/LoginScreen';
+export { DEK_AUTH_TOKEN_KEY } from './components/LoginScreen/LoginScreen';
 export { default as BoardProvider } from './components/BoardProvider/BoardProvider';
 export { default as Command } from './components/Command/Command';
 export { default as CommandGroup } from './components/CommandGroup/CommandGroup';

package/dist/index.es.js

@@ -64519,6 +64519,115 @@ function watchForDataChanges(authToken, cb2) {
 async function authorize(email, password) {
   return fetchUserToken(email, password);
 }
+const DEK_AUTH_TOKEN_KEY = "dek_auth_token";
+const DEK_EMAIL_KEY = "dek_auth_email";
+const FullScreen = styled.div`
+  position: fixed;
+  inset: 0;
+  background: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 70px;
+`;
+const StyledInput = styled.input`
+  width: 100%;
+  height: 56px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  color: #fff;
+  font-family: Heebo, Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  padding: 0 16px;
+  box-sizing: border-box;
+  outline: none;
+
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  &:focus {
+    border-color: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.12);
+  }
+`;
+const LoginScreen = ({ onSuccess }) => {
+  const [email, setEmail] = useState$1(() => localStorage.getItem(DEK_EMAIL_KEY) || "");
+  const [password, setPassword] = useState$1("");
+  const [error2, setError] = useState$1("");
+  const [loading, setLoading] = useState$1(false);
+  useEffect$1(() => {
+    const savedToken = localStorage.getItem(DEK_AUTH_TOKEN_KEY);
+    if (savedToken) {
+      onSuccess(savedToken);
+    }
+  }, []);
+  const handleSubmit = async () => {
+    if (loading)
+      return;
+    setError("");
+    setLoading(true);
+    try {
+      const token2 = await authorize(email, password);
+      localStorage.setItem(DEK_AUTH_TOKEN_KEY, token2);
+      localStorage.setItem(DEK_EMAIL_KEY, email);
+      onSuccess(token2);
+    } catch {
+      localStorage.removeItem(DEK_AUTH_TOKEN_KEY);
+      setError("Invalid email or password.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleKeyDown = (e2) => {
+    if (e2.key === "Enter")
+      handleSubmit();
+  };
+  return /* @__PURE__ */ jsxs(FullScreen, { children: [
+    /* @__PURE__ */ jsx(Q42, { transitionDelay: 0 }),
+    /* @__PURE__ */ jsx(q42, { direction: "vert", valign: "center", halign: "center", children: /* @__PURE__ */ jsxs(g0, { direction: "vert", gap: 20, style: { width: 380, paddingTop: 150 }, children: [
+      /* @__PURE__ */ jsxs(g0, { direction: "vert", gap: 12, collapse: true, children: [
+        /* @__PURE__ */ jsx(
+          StyledInput,
+          {
+            type: "email",
+            placeholder: "Email",
+            value: email,
+            onChange: (e2) => setEmail(e2.target.value),
+            onKeyDown: handleKeyDown,
+            autoComplete: "email",
+            style: { width: 380 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledInput,
+          {
+            type: "password",
+            placeholder: "Password",
+            value: password,
+            onChange: (e2) => setPassword(e2.target.value),
+            onKeyDown: handleKeyDown,
+            autoComplete: "current-password",
+            style: { width: 380 }
+          }
+        )
+      ] }),
+      error2 && /* @__PURE__ */ jsx(g0, { collapse: true, children: /* @__PURE__ */ jsx(l4, { color: "#ff6b6b", children: error2 }) }),
+      /* @__PURE__ */ jsx(g0, { collapse: true, children: /* @__PURE__ */ jsx(
+        ee,
+        {
+          title: loading ? "Signing in..." : "Sign In",
+          icon: "none",
+          width: 380,
+          onClick: handleSubmit
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(a52, { title: "Sign In", noclose: true })
+  ] });
+};
 const USER_PLUGIN_AND_INTEGRATIONS_QUERY = gql(`
   query userPluginsAndIntegrations {
     currentUser {
@@ -64548,7 +64657,7 @@ async function fetchUserPlugins(authToken) {
   result.integrations.unshift({
     key: "base",
     pluginName: "base",
-    pluginVersion: "0.46.0",
+    pluginVersion: "0.47.0",
     pluginConfig: []
   });
   return result;
@@ -64617,7 +64726,7 @@ const ClockComponent = () => {
 };
 const About = () => {
   return /* @__PURE__ */ jsxs(g0, { padding: 20, direction: "vert", children: [
-    /* @__PURE__ */ jsx(uq1, { children: `Dek ${"0.46.0"}` }),
+    /* @__PURE__ */ jsx(uq1, { children: `Dek ${"0.47.0"}` }),
     /* @__PURE__ */ jsx(l4, { children: "From Appkit" })
   ] });
 };
@@ -64786,6 +64895,44 @@ const PluginDev = ({ api: api2 }) => {
     ) })
   ] });
 };
+const Avatar = styled.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: ${({ $hasImage }) => $hasImage ? "transparent" : "#1B75D0"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: 500;
+  color: white;
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+const AvatarImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const Profile = (_props) => {
+  const snap = useSnapshot(state$1);
+  const user = snap.data;
+  const initials = (user == null ? void 0 : user.name) ? user.name.split(" ").map((n2) => n2[0]).join("").toUpperCase().slice(0, 2) : "?";
+  const handleSignOut = () => {
+    window.location.href = "/settings/signout";
+  };
+  return /* @__PURE__ */ jsxs(g0, { direction: "vert", padding: 20, gap: 24, children: [
+    /* @__PURE__ */ jsxs(g0, { direction: "horz", gap: 20, valign: "center", collapse: true, children: [
+      /* @__PURE__ */ jsx(Avatar, { $hasImage: !!(user == null ? void 0 : user.avatar), children: (user == null ? void 0 : user.avatar) ? /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name || "" }) : initials }),
+      /* @__PURE__ */ jsxs(g0, { direction: "vert", gap: 4, children: [
+        (user == null ? void 0 : user.name) && /* @__PURE__ */ jsx(l4, { size: "large", weight: "bold", children: user.name }),
+        (user == null ? void 0 : user.email) && /* @__PURE__ */ jsx(l4, { color: "subtle", children: user.email }),
+        (user == null ? void 0 : user.location) && /* @__PURE__ */ jsx(l4, { color: "subtle", children: user.location })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(g0, { collapse: true, children: /* @__PURE__ */ jsx(ee, { title: "Sign Out", icon: "none", onClick: handleSignOut }) })
+  ] });
+};
 const Theme = ({ api: api2 }) => {
   const [selectedKey, setSelectedKey] = usePluginState(
     api2,
@@ -65040,6 +65187,10 @@ const SettingsScreen = ({ api: api2, isPluginDev }) => {
       title: "Messages",
       key: "messages"
     },
+    {
+      title: "Profile",
+      key: "profile"
+    },
     {
       title: "About",
       key: "about"
@@ -65073,7 +65224,8 @@ const SettingsScreen = ({ api: api2, isPluginDev }) => {
       selectedKey === "theme" && /* @__PURE__ */ jsx(Theme, { api: api2 }),
       selectedKey === "messages" && /* @__PURE__ */ jsx(Messages, { api: api2 }),
       selectedKey === "about" && /* @__PURE__ */ jsx(About, {}),
-      selectedKey === "boards" && /* @__PURE__ */ jsx(Boards, { api: api2 })
+      selectedKey === "boards" && /* @__PURE__ */ jsx(Boards, { api: api2 }),
+      selectedKey === "profile" && /* @__PURE__ */ jsx(Profile, { api: api2 })
     ] }),
     /* @__PURE__ */ jsx(a52, { title, noclose: isPluginDev })
   ] });
@@ -104328,7 +104480,7 @@ async function updatePlugins(authToken) {
         {
           key: "base",
           pluginName: "base",
-          pluginVersion: "0.46.0",
+          pluginVersion: "0.47.0",
           pluginConfig: []
         }
       ],
@@ -104583,6 +104735,8 @@ export {
   Command,
   CommandGroup$1 as CommandGroup,
   Component,
+  DEK_AUTH_TOKEN_KEY,
+  LoginScreen,
   RouteResolver,
   Router,
   Zone,

package/dist/index.umd.js

@@ -64535,6 +64535,115 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   async function authorize(email, password) {
     return fetchUserToken(email, password);
   }
+  const DEK_AUTH_TOKEN_KEY = "dek_auth_token";
+  const DEK_EMAIL_KEY = "dek_auth_email";
+  const FullScreen = styled.div`
+  position: fixed;
+  inset: 0;
+  background: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 70px;
+`;
+  const StyledInput = styled.input`
+  width: 100%;
+  height: 56px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  color: #fff;
+  font-family: Heebo, Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  padding: 0 16px;
+  box-sizing: border-box;
+  outline: none;
+
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  &:focus {
+    border-color: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.12);
+  }
+`;
+  const LoginScreen = ({ onSuccess }) => {
+    const [email, setEmail] = React$3.useState(() => localStorage.getItem(DEK_EMAIL_KEY) || "");
+    const [password, setPassword] = React$3.useState("");
+    const [error2, setError] = React$3.useState("");
+    const [loading, setLoading] = React$3.useState(false);
+    React$3.useEffect(() => {
+      const savedToken = localStorage.getItem(DEK_AUTH_TOKEN_KEY);
+      if (savedToken) {
+        onSuccess(savedToken);
+      }
+    }, []);
+    const handleSubmit = async () => {
+      if (loading)
+        return;
+      setError("");
+      setLoading(true);
+      try {
+        const token2 = await authorize(email, password);
+        localStorage.setItem(DEK_AUTH_TOKEN_KEY, token2);
+        localStorage.setItem(DEK_EMAIL_KEY, email);
+        onSuccess(token2);
+      } catch {
+        localStorage.removeItem(DEK_AUTH_TOKEN_KEY);
+        setError("Invalid email or password.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    const handleKeyDown = (e2) => {
+      if (e2.key === "Enter")
+        handleSubmit();
+    };
+    return /* @__PURE__ */ jsxRuntimeModule.jsxs(FullScreen, { children: [
+      /* @__PURE__ */ jsxRuntimeModule.jsx(Q42, { transitionDelay: 0 }),
+      /* @__PURE__ */ jsxRuntimeModule.jsx(q42, { direction: "vert", valign: "center", halign: "center", children: /* @__PURE__ */ jsxRuntimeModule.jsxs(g0, { direction: "vert", gap: 20, style: { width: 380, paddingTop: 150 }, children: [
+        /* @__PURE__ */ jsxRuntimeModule.jsxs(g0, { direction: "vert", gap: 12, collapse: true, children: [
+          /* @__PURE__ */ jsxRuntimeModule.jsx(
+            StyledInput,
+            {
+              type: "email",
+              placeholder: "Email",
+              value: email,
+              onChange: (e2) => setEmail(e2.target.value),
+              onKeyDown: handleKeyDown,
+              autoComplete: "email",
+              style: { width: 380 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeModule.jsx(
+            StyledInput,
+            {
+              type: "password",
+              placeholder: "Password",
+              value: password,
+              onChange: (e2) => setPassword(e2.target.value),
+              onKeyDown: handleKeyDown,
+              autoComplete: "current-password",
+              style: { width: 380 }
+            }
+          )
+        ] }),
+        error2 && /* @__PURE__ */ jsxRuntimeModule.jsx(g0, { collapse: true, children: /* @__PURE__ */ jsxRuntimeModule.jsx(l4, { color: "#ff6b6b", children: error2 }) }),
+        /* @__PURE__ */ jsxRuntimeModule.jsx(g0, { collapse: true, children: /* @__PURE__ */ jsxRuntimeModule.jsx(
+          ee,
+          {
+            title: loading ? "Signing in..." : "Sign In",
+            icon: "none",
+            width: 380,
+            onClick: handleSubmit
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeModule.jsx(a52, { title: "Sign In", noclose: true })
+    ] });
+  };
   const USER_PLUGIN_AND_INTEGRATIONS_QUERY = gql(`
   query userPluginsAndIntegrations {
     currentUser {
@@ -64564,7 +64673,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     result.integrations.unshift({
       key: "base",
       pluginName: "base",
-      pluginVersion: "0.46.0",
+      pluginVersion: "0.47.0",
       pluginConfig: []
     });
     return result;
@@ -64633,7 +64742,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   };
   const About = () => {
     return /* @__PURE__ */ jsxRuntimeModule.jsxs(g0, { padding: 20, direction: "vert", children: [
-      /* @__PURE__ */ jsxRuntimeModule.jsx(uq1, { children: `Dek ${"0.46.0"}` }),
+      /* @__PURE__ */ jsxRuntimeModule.jsx(uq1, { children: `Dek ${"0.47.0"}` }),
       /* @__PURE__ */ jsxRuntimeModule.jsx(l4, { children: "From Appkit" })
     ] });
   };
@@ -64802,6 +64911,44 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       ) })
     ] });
   };
+  const Avatar = styled.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: ${({ $hasImage }) => $hasImage ? "transparent" : "#1B75D0"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: 500;
+  color: white;
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+  const AvatarImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+  const Profile = (_props) => {
+    const snap = useSnapshot(state$1);
+    const user = snap.data;
+    const initials = (user == null ? void 0 : user.name) ? user.name.split(" ").map((n2) => n2[0]).join("").toUpperCase().slice(0, 2) : "?";
+    const handleSignOut = () => {
+      window.location.href = "/settings/signout";
+    };
+    return /* @__PURE__ */ jsxRuntimeModule.jsxs(g0, { direction: "vert", padding: 20, gap: 24, children: [
+      /* @__PURE__ */ jsxRuntimeModule.jsxs(g0, { direction: "horz", gap: 20, valign: "center", collapse: true, children: [
+        /* @__PURE__ */ jsxRuntimeModule.jsx(Avatar, { $hasImage: !!(user == null ? void 0 : user.avatar), children: (user == null ? void 0 : user.avatar) ? /* @__PURE__ */ jsxRuntimeModule.jsx(AvatarImage, { src: user.avatar, alt: user.name || "" }) : initials }),
+        /* @__PURE__ */ jsxRuntimeModule.jsxs(g0, { direction: "vert", gap: 4, children: [
+          (user == null ? void 0 : user.name) && /* @__PURE__ */ jsxRuntimeModule.jsx(l4, { size: "large", weight: "bold", children: user.name }),
+          (user == null ? void 0 : user.email) && /* @__PURE__ */ jsxRuntimeModule.jsx(l4, { color: "subtle", children: user.email }),
+          (user == null ? void 0 : user.location) && /* @__PURE__ */ jsxRuntimeModule.jsx(l4, { color: "subtle", children: user.location })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeModule.jsx(g0, { collapse: true, children: /* @__PURE__ */ jsxRuntimeModule.jsx(ee, { title: "Sign Out", icon: "none", onClick: handleSignOut }) })
+    ] });
+  };
   const Theme = ({ api: api2 }) => {
     const [selectedKey, setSelectedKey] = usePluginState(
       api2,
@@ -65056,6 +65203,10 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
         title: "Messages",
         key: "messages"
       },
+      {
+        title: "Profile",
+        key: "profile"
+      },
       {
         title: "About",
         key: "about"
@@ -65089,7 +65240,8 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
         selectedKey === "theme" && /* @__PURE__ */ jsxRuntimeModule.jsx(Theme, { api: api2 }),
         selectedKey === "messages" && /* @__PURE__ */ jsxRuntimeModule.jsx(Messages, { api: api2 }),
         selectedKey === "about" && /* @__PURE__ */ jsxRuntimeModule.jsx(About, {}),
-        selectedKey === "boards" && /* @__PURE__ */ jsxRuntimeModule.jsx(Boards, { api: api2 })
+        selectedKey === "boards" && /* @__PURE__ */ jsxRuntimeModule.jsx(Boards, { api: api2 }),
+        selectedKey === "profile" && /* @__PURE__ */ jsxRuntimeModule.jsx(Profile, { api: api2 })
       ] }),
       /* @__PURE__ */ jsxRuntimeModule.jsx(a52, { title, noclose: isPluginDev })
     ] });
@@ -104344,7 +104496,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
           {
             key: "base",
             pluginName: "base",
-            pluginVersion: "0.46.0",
+            pluginVersion: "0.47.0",
             pluginConfig: []
           }
         ],
@@ -104598,6 +104750,8 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   exports2.Command = Command;
   exports2.CommandGroup = CommandGroup$1;
   exports2.Component = Component;
+  exports2.DEK_AUTH_TOKEN_KEY = DEK_AUTH_TOKEN_KEY;
+  exports2.LoginScreen = LoginScreen;
   exports2.RouteResolver = RouteResolver;
   exports2.Router = Router;
   exports2.Zone = Zone;

package/dist/plugins/base/screens/SettingsScreen/Profile.d.ts

@@ -0,0 +1,6 @@
+import { DekApi } from '@appkit/dek-plugin';
+type Props = {
+    api: DekApi;
+};
+declare const Profile: (_props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Profile;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appkit/dek-lib",
   "private": false,
-  "version": "0.46.0",
+  "version": "0.47.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port 5173 --host",