@plutonhq/core-frontend 0.0.1

package/dist/router.d.ts

@@ -0,0 +1,2 @@
+export declare const router: import("react-router").DataRouter;
+//# sourceMappingURL=router.d.ts.map

package/dist/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,MAAM,mCAelB,CAAC"}

package/dist/router.js

@@ -0,0 +1,40 @@
+import { jsxs as o, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { createBrowserRouter as i, createRoutesFromElements as p, Route as t, Navigate as s } from "react-router";
+import l from "./routes/Plans/Plans.js";
+import a from "./routes/Login/Login.js";
+import { useAuth as u } from "./services/users.js";
+import c from "./components/App/App/App.js";
+import f from "./routes/Settings/Settings.js";
+import g from "./routes/Storages/Storages.js";
+import h from "./routes/Sources/Sources.js";
+import d from "./routes/PlanSingle/PlanSingle.js";
+import S from "./routes/DeviceSingle/DeviceSingle.js";
+import v from "./components/App/Footer/Footer.js";
+import x from "./routes/NotFoundRoute/NotFoundRoute.js";
+function F() {
+  const { data: r, isError: n } = u();
+  return console.log("User data :", r), n ? /* @__PURE__ */ e(s, { to: "/login", replace: !0 }) : /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ e(c, {}),
+    /* @__PURE__ */ e(v, { version: r == null ? void 0 : r.appVersion })
+  ] });
+}
+const b = i(
+  p(
+    /* @__PURE__ */ o(m, { children: [
+      /* @__PURE__ */ o(t, { path: "/", element: /* @__PURE__ */ e(F, {}), children: [
+        /* @__PURE__ */ e(t, { index: !0, element: /* @__PURE__ */ e(l, {}) }),
+        /* @__PURE__ */ e(t, { path: "settings", element: /* @__PURE__ */ e(f, {}) }),
+        /* @__PURE__ */ e(t, { path: "storages", element: /* @__PURE__ */ e(g, {}) }),
+        /* @__PURE__ */ e(t, { path: "sources", element: /* @__PURE__ */ e(h, {}) }),
+        /* @__PURE__ */ e(t, { path: "device/:id", element: /* @__PURE__ */ e(S, {}) }),
+        /* @__PURE__ */ e(t, { path: "plan/:id", element: /* @__PURE__ */ e(d, {}) }),
+        /* @__PURE__ */ e(t, { path: "*", element: /* @__PURE__ */ e(x, {}) })
+      ] }),
+      /* @__PURE__ */ e(t, { path: "login", element: /* @__PURE__ */ e(a, {}) })
+    ] })
+  )
+);
+export {
+  b as router
+};
+//# sourceMappingURL=router.js.map

package/dist/router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.js","sources":["../src/router.tsx"],"sourcesContent":["import { createBrowserRouter, createRoutesFromElements, Route, Navigate } from 'react-router';\r\nimport Plans from './routes/Plans/Plans';\r\nimport Login from './routes/Login/Login';\r\nimport { useAuth } from './services/users';\r\nimport App from './components/App/App/App';\r\nimport Settings from './routes/Settings/Settings';\r\nimport Storages from './routes/Storages/Storages';\r\nimport Sources from './routes/Sources/Sources';\r\nimport PlanSingle from './routes/PlanSingle/PlanSingle';\r\nimport DeviceSingle from './routes/DeviceSingle/DeviceSingle';\r\nimport Footer from './components/App/Footer/Footer';\r\nimport NotFoundRoute from './routes/NotFoundRoute/NotFoundRoute';\r\n\r\nfunction ProtectedLayout() {\r\n   const { data, isError } = useAuth();\r\n   console.log('User data :', data);\r\n   // if (isLoading)\r\n   //    return (\r\n   //       <div className=\"loadingScreen\">\r\n   //          <Icon size={60} type=\"loading\" />{' '}\r\n   //       </div>\r\n   //    );\r\n   if (isError) return <Navigate to=\"/login\" replace />;\r\n\r\n   return (\r\n      <>\r\n         <App />\r\n         <Footer version={data?.appVersion} />\r\n      </>\r\n   );\r\n}\r\n\r\nexport const router = createBrowserRouter(\r\n   createRoutesFromElements(\r\n      <>\r\n         <Route path=\"/\" element={<ProtectedLayout />}>\r\n            <Route index element={<Plans />} />\r\n            <Route path=\"settings\" element={<Settings />} />\r\n            <Route path=\"storages\" element={<Storages />} />\r\n            <Route path=\"sources\" element={<Sources />} />\r\n            <Route path={'device/:id'} element={<DeviceSingle />} />\r\n            <Route path={'plan/:id'} element={<PlanSingle />} />\r\n            <Route path=\"*\" element={<NotFoundRoute />} />\r\n         </Route>\r\n         <Route path=\"login\" element={<Login />} />\r\n      </>,\r\n   ),\r\n);\r\n"],"names":["ProtectedLayout","data","isError","useAuth","jsx","Navigate","jsxs","Fragment","App","Footer","router","createBrowserRouter","createRoutesFromElements","Route","Plans","Settings","Storages","Sources","DeviceSingle","PlanSingle","NotFoundRoute","Login"],"mappings":";;;;;;;;;;;;;AAaA,SAASA,IAAkB;AACxB,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA;AAQ1B,SAPA,QAAQ,IAAI,eAAeF,CAAI,GAO3BC,IAAgB,gBAAAE,EAACC,KAAS,IAAG,UAAS,SAAO,IAAC,IAG/C,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAI;AAAA,IACL,gBAAAJ,EAACK,GAAA,EAAO,SAASR,KAAA,gBAAAA,EAAM,WAAA,CAAY;AAAA,EAAA,GACtC;AAEN;AAEO,MAAMS,IAASC;AAAA,EACnBC;AAAA,IACG,gBAAAN,EAAAC,GAAA,EACG,UAAA;AAAA,MAAA,gBAAAD,EAACO,KAAM,MAAK,KAAI,SAAS,gBAAAT,EAACJ,KAAgB,GACvC,UAAA;AAAA,QAAA,gBAAAI,EAACS,KAAM,OAAK,IAAC,SAAS,gBAAAT,EAACU,KAAM,GAAI;AAAA,0BAChCD,GAAA,EAAM,MAAK,YAAW,SAAS,gBAAAT,EAACW,KAAS,GAAI;AAAA,0BAC7CF,GAAA,EAAM,MAAK,YAAW,SAAS,gBAAAT,EAACY,KAAS,GAAI;AAAA,0BAC7CH,GAAA,EAAM,MAAK,WAAU,SAAS,gBAAAT,EAACa,KAAQ,GAAI;AAAA,0BAC3CJ,GAAA,EAAM,MAAM,cAAc,SAAS,gBAAAT,EAACc,KAAa,GAAI;AAAA,0BACrDL,GAAA,EAAM,MAAM,YAAY,SAAS,gBAAAT,EAACe,KAAW,GAAI;AAAA,0BACjDN,GAAA,EAAM,MAAK,KAAI,SAAS,gBAAAT,EAACgB,KAAc,EAAA,CAAI;AAAA,MAAA,GAC/C;AAAA,wBACCP,GAAA,EAAM,MAAK,SAAQ,SAAS,gBAAAT,EAACiB,KAAM,EAAA,CAAI;AAAA,IAAA,EAAA,CAC3C;AAAA,EAAA;AAEN;"}

package/dist/routes/DeviceSingle/DeviceSingle.d.ts

@@ -0,0 +1,3 @@
+declare const DeviceSingle: () => import("react/jsx-runtime").JSX.Element;
+export default DeviceSingle;
+//# sourceMappingURL=DeviceSingle.d.ts.map

package/dist/routes/DeviceSingle/DeviceSingle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSingle.d.ts","sourceRoot":"","sources":["../../../src/routes/DeviceSingle/DeviceSingle.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,YAAY,+CAsEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/routes/DeviceSingle/DeviceSingle.js

@@ -0,0 +1,67 @@
+import { jsx as t, jsxs as s, Fragment as a } from "react/jsx-runtime";
+import { useParams as x } from "react-router";
+import { useState as $ } from "react";
+import m from "../../components/common/Icon/Icon.js";
+import z from "../../components/common/PageHeader/PageHeader.js";
+import { useGetDevice as M, useGetSystemMetrics as P } from "../../services/devices.js";
+import T from "../../components/Device/DeviceInfo/DeviceInfo.js";
+import C from "../../components/Device/EditDevice/EditDevice.js";
+import l from "./DeviceSingle.module.scss.js";
+import R from "../../components/common/NotFound/NotFound.js";
+import j from "../../components/Device/DeviceBackups/DeviceBackups.js";
+const q = () => {
+  var h, g, v;
+  const { id: r } = x(), [N, p] = $(!1), { data: n, isLoading: S, error: o } = M(r), { data: i } = P(r);
+  console.log("DeviceError :", o, o == null ? void 0 : o.status);
+  const y = o == null ? void 0 : o.status;
+  if (!r || y === 404)
+    return /* @__PURE__ */ t(R, { name: "Device", link: "/sources", linkText: "All Sources" });
+  const e = (h = n == null ? void 0 : n.result) == null ? void 0 : h.device, c = i != null && i.result && ((g = i == null ? void 0 : i.result) != null && g.system) ? i.result : e == null ? void 0 : e.metrics, b = ((v = n == null ? void 0 : n.result) == null ? void 0 : v.plans) || [], d = e == null ? void 0 : e.name, k = (e == null ? void 0 : e.status) && (e == null ? void 0 : e.status) === "pending", { restic: u = "100.0.0", rclone: f = "100.0.0" } = (e == null ? void 0 : e.versions) || {};
+  return /* @__PURE__ */ s("div", { className: l.device, children: [
+    d ? /* @__PURE__ */ t(
+      z,
+      {
+        title: /* @__PURE__ */ s(a, { children: [
+          d,
+          r === "main" && /* @__PURE__ */ t("span", { className: "label in_progress", children: "Main" })
+        ] }),
+        pageTitle: d,
+        icon: "devices",
+        rightSection: /* @__PURE__ */ s(a, { children: [
+          (!k || r === "main") && /* @__PURE__ */ s(a, { children: [
+            /* @__PURE__ */ s("button", { className: `${l.version}`, "data-tooltip-id": "appTooltip", "data-tooltip-content": `Restic version: ${u}`, children: [
+              /* @__PURE__ */ t(m, { type: "restic", size: 14 }),
+              " ",
+              /* @__PURE__ */ s("i", { children: [
+                "v",
+                u
+              ] })
+            ] }),
+            /* @__PURE__ */ s("button", { className: `${l.version}`, "data-tooltip-id": "appTooltip", "data-tooltip-content": `Rclone version: ${f}`, children: [
+              /* @__PURE__ */ t(m, { type: "rclone", size: 14 }),
+              " ",
+              /* @__PURE__ */ s("i", { children: [
+                "v",
+                f
+              ] })
+            ] }),
+            /* @__PURE__ */ t("b", { children: "|" })
+          ] }),
+          /* @__PURE__ */ s("button", { className: l.actionBtn, onClick: () => p(!0), children: [
+            /* @__PURE__ */ t(m, { size: 14, type: "edit-settings" }),
+            " Edit"
+          ] })
+        ] })
+      }
+    ) : /* @__PURE__ */ t("span", { className: `skeleton-box ${l.titleSkeleton}` }),
+    /* @__PURE__ */ t("div", { className: l.deviceContent, children: S ? /* @__PURE__ */ t("div", { className: "loadingScreen", children: /* @__PURE__ */ t(m, { size: 60, type: "loading" }) }) : /* @__PURE__ */ s(a, { children: [
+      /* @__PURE__ */ t(j, { plans: b }),
+      (c == null ? void 0 : c.system) && /* @__PURE__ */ t(T, { metrics: c, isRefetching: !1 })
+    ] }) }),
+    e && N && /* @__PURE__ */ t(C, { device: e, close: () => p(!1) })
+  ] });
+};
+export {
+  q as default
+};
+//# sourceMappingURL=DeviceSingle.js.map

package/dist/routes/DeviceSingle/DeviceSingle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSingle.js","sources":["../../../src/routes/DeviceSingle/DeviceSingle.tsx"],"sourcesContent":["import { useParams } from 'react-router';\r\nimport { useState } from 'react';\r\nimport Icon from '../../components/common/Icon/Icon';\r\nimport PageHeader from '../../components/common/PageHeader/PageHeader';\r\nimport { useGetDevice, useGetSystemMetrics } from '../../services/devices';\r\nimport DeviceInfo from '../../components/Device/DeviceInfo/DeviceInfo';\r\nimport EditDevice from '../../components/Device/EditDevice/EditDevice';\r\nimport classes from './DeviceSingle.module.scss';\r\n// import { compareVersions } from '../../utils/helpers';\r\nimport NotFound from '../../components/common/NotFound/NotFound';\r\nimport DeviceBackups from '../../components/Device/DeviceBackups/DeviceBackups';\r\nimport { DevicePlan } from '../../@types/devices';\r\n\r\nconst DeviceSingle = () => {\r\n   const { id } = useParams();\r\n   const [showEditModal, setShowEditModal] = useState(false);\r\n   const { data, isLoading, error: DeviceError } = useGetDevice(id as string);\r\n   const { data: metricsData } = useGetSystemMetrics(id as string);\r\n\r\n   console.log('DeviceError :', DeviceError, (DeviceError as Error & { status?: number })?.status);\r\n\r\n   const errorStatusCode = (DeviceError as Error & { status?: number })?.status;\r\n   if (!id || errorStatusCode === 404) {\r\n      return <NotFound name=\"Device\" link=\"/sources\" linkText=\"All Sources\" />;\r\n   }\r\n\r\n   const device = data?.result?.device;\r\n   const metrics = metricsData?.result && metricsData?.result?.system ? metricsData.result : device?.metrics;\r\n   const devicePlans: DevicePlan[] = data?.result?.plans || [];\r\n   const deviceName = device?.name;\r\n   const isPending = device?.status && device?.status === 'pending';\r\n\r\n   const { restic = '100.0.0', rclone = '100.0.0' } = device?.versions || {};\r\n\r\n   return (\r\n      <div className={classes.device}>\r\n         {deviceName ? (\r\n            <PageHeader\r\n               title={\r\n                  <>\r\n                     {deviceName}\r\n                     {id === 'main' && <span className=\"label in_progress\">Main</span>}\r\n                  </>\r\n               }\r\n               pageTitle={deviceName}\r\n               icon=\"devices\"\r\n               rightSection={\r\n                  <>\r\n                     {(!isPending || id === 'main') && (\r\n                        <>\r\n                           <button className={`${classes.version}`} data-tooltip-id=\"appTooltip\" data-tooltip-content={`Restic version: ${restic}`}>\r\n                              <Icon type=\"restic\" size={14} /> <i>v{restic}</i>\r\n                           </button>\r\n                           <button className={`${classes.version}`} data-tooltip-id=\"appTooltip\" data-tooltip-content={`Rclone version: ${rclone}`}>\r\n                              <Icon type=\"rclone\" size={14} /> <i>v{rclone}</i>\r\n                           </button>\r\n                           <b>|</b>\r\n                        </>\r\n                     )}\r\n                     <button className={classes.actionBtn} onClick={() => setShowEditModal(true)}>\r\n                        <Icon size={14} type=\"edit-settings\" /> Edit\r\n                     </button>\r\n                  </>\r\n               }\r\n            />\r\n         ) : (\r\n            <span className={`skeleton-box ${classes.titleSkeleton}`} />\r\n         )}\r\n         <div className={classes.deviceContent}>\r\n            {isLoading ? (\r\n               <div className=\"loadingScreen\">\r\n                  <Icon size={60} type=\"loading\" />\r\n               </div>\r\n            ) : (\r\n               <>\r\n                  <DeviceBackups plans={devicePlans} />\r\n                  {metrics?.system && <DeviceInfo metrics={metrics} isRefetching={false} />}\r\n               </>\r\n            )}\r\n         </div>\r\n         {device && showEditModal && <EditDevice device={device} close={() => setShowEditModal(false)} />}\r\n      </div>\r\n   );\r\n};\r\n\r\nexport default DeviceSingle;\r\n"],"names":["DeviceSingle","id","useParams","showEditModal","setShowEditModal","useState","data","isLoading","DeviceError","useGetDevice","metricsData","useGetSystemMetrics","errorStatusCode","NotFound","device","_a","metrics","_b","devicePlans","_c","deviceName","isPending","restic","rclone","jsxs","classes","jsx","PageHeader","Fragment","Icon","DeviceBackups","DeviceInfo","EditDevice"],"mappings":"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"}

package/dist/routes/DeviceSingle/DeviceSingle.module.scss

@@ -0,0 +1,105 @@
+.deviceContent {
+   width: 100%;
+   position: relative;
+   padding: 30px;
+   border-radius: 7px;
+   box-sizing: border-box;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   min-height: 200px;
+   margin-top: 20px;
+   display: flex;
+   flex-direction: column;
+}
+
+.noMetrics {
+   text-align: center;
+   align-items: center;
+   align-self: center;
+   width: 100%;
+}
+
+.titleSkeleton {
+   width: 200px;
+   height: 30px;
+   // background-color: var(--line-color);
+}
+
+.version {
+   display: flex;
+   align-items: center;
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+      opacity: 0.5;
+   }
+   i {
+      font-style: normal;
+   }
+   b {
+      margin-left: 3px;
+      color: #06ba9f;
+   }
+   &.versionUpdate {
+      cursor: pointer;
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+
+   &.agentUpdateBtn {
+      svg {
+         margin-right: 4px;
+         color: var(--icon-color);
+      }
+   }
+}
+
+.moreOptions {
+   position: absolute;
+   width: max-content;
+   top: 35px;
+   right: 10px;
+   margin: 0;
+   padding: 0;
+   z-index: 9;
+   background-color: var(--content-background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   list-style-type: none;
+   li {
+      cursor: pointer;
+      padding: 5px 15px;
+      font-size: 0.9em;
+      color: var(--content-text-color-light);
+
+      &:hover {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+   }
+}
+
+.connectionStatus {
+   width: 12px;
+   height: 12px;
+   border-radius: 50%;
+   background-color: var(--line-active-color);
+   margin-left: 4px;
+   &.connected {
+      background-color: turquoise;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .device {
+      :global([class*='_header_']) {
+         flex-direction: column;
+      }
+      .deviceContent {
+         padding: 20px;
+      }
+   }
+}

package/dist/routes/DeviceSingle/DeviceSingle.module.scss.js

@@ -0,0 +1,14 @@
+const e = "DeviceSingle-module__deviceContent___9qSG6", t = "DeviceSingle-module__titleSkeleton___WtbBq", n = "DeviceSingle-module__version___yPu1x", i = "DeviceSingle-module__device___o51z2", o = {
+  deviceContent: e,
+  titleSkeleton: t,
+  version: n,
+  device: i
+};
+export {
+  o as default,
+  i as device,
+  e as deviceContent,
+  t as titleSkeleton,
+  n as version
+};
+//# sourceMappingURL=DeviceSingle.module.scss.js.map

package/dist/routes/DeviceSingle/DeviceSingle.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSingle.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/routes/Login/Login.d.ts

@@ -0,0 +1,3 @@
+declare const Login: () => import("react/jsx-runtime").JSX.Element;
+export default Login;
+//# sourceMappingURL=Login.d.ts.map

package/dist/routes/Login/Login.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login.d.ts","sourceRoot":"","sources":["../../../src/routes/Login/Login.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,KAAK,+CAwFV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/routes/Login/Login.js

@@ -0,0 +1,72 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { useState as p } from "react";
+import r from "./Login.module.scss.js";
+import h from "../../components/common/Logo/Logo.js";
+import { APP_NAME as f } from "../../utils/constants.js";
+import c from "../../components/common/Icon/Icon.js";
+import { useLogin as w } from "../../services/users.js";
+import y from "../../components/App/PageTitle/PageTitle.js";
+const C = () => {
+  const [o, i] = p(null), [n, d] = p(""), [t, u] = p(""), l = w(), g = () => {
+    if (!n || !t) {
+      let e = null;
+      !n && !t && (e = { type: "empty_username_password", msg: "Please Insert Your App Username & Password to login." }), !n && t && (e = { type: "empty_username", msg: "Please Insert Your App Username" }), !t && n && (e = { type: "empty_password", msg: "Please Insert Your App Password" }), i(e), setTimeout(() => {
+        i(null);
+      }, 5e3);
+      return;
+    }
+    l.mutate(
+      { username: n, password: t },
+      {
+        onError: (e) => {
+          let m = "";
+          e.message.toLowerCase().includes("username") && (m = "incorrect_username"), e.message.toLowerCase().includes("password") && (m = "incorrect_password"), i({ type: m, msg: e.message }), setTimeout(() => {
+            i(null);
+          }, 5e3);
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ a("div", { className: r.loginPage, children: [
+    /* @__PURE__ */ s(y, { title: "Login" }),
+    /* @__PURE__ */ s("div", { className: r.loginLogo, children: /* @__PURE__ */ a("h3", { children: [
+      /* @__PURE__ */ s(h, { size: 36 }),
+      " ",
+      /* @__PURE__ */ s("span", { children: f })
+    ] }) }),
+    /* @__PURE__ */ s("div", { className: r.container, children: /* @__PURE__ */ a("div", { className: "loginForm", children: [
+      /* @__PURE__ */ a("div", { className: r.loginInput, children: [
+        /* @__PURE__ */ s(c, { type: "user", classes: r.loginInputIcon }),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            className: `${o && o.type.includes("username") ? "inputError" : ""}`,
+            type: "text",
+            value: n,
+            placeholder: "Username",
+            onChange: (e) => d(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: r.loginInput, children: [
+        /* @__PURE__ */ s(c, { type: "password", classes: r.loginInputIcon }),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            className: `${o && o.type.includes("password") ? "inputError" : ""}`,
+            type: "password",
+            value: t,
+            placeholder: "Password",
+            onChange: (e) => u(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s("button", { className: r.loginButton, onClick: g, disabled: l.isPending, children: l.isPending ? "Logging in..." : "Login" }),
+      o && o.msg && /* @__PURE__ */ s("div", { className: r.loginErrorMsg, children: o.msg })
+    ] }) })
+  ] });
+};
+export {
+  C as default
+};
+//# sourceMappingURL=Login.js.map

package/dist/routes/Login/Login.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login.js","sources":["../../../src/routes/Login/Login.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport classes from './Login.module.scss';\r\nimport Logo from '../../components/common/Logo/Logo';\r\nimport { APP_NAME } from '../../utils/constants';\r\nimport Icon from '../../components/common/Icon/Icon';\r\nimport { useLogin } from '../../services/users';\r\nimport PageTitle from '../../components/App/PageTitle/PageTitle';\r\n\r\nconst Login = () => {\r\n   const [error, setError] = useState<LoginError | null>(null);\r\n   const [username, setUsername] = useState<string>('');\r\n   const [password, setPassword] = useState<string>('');\r\n   const loginMutation = useLogin();\r\n\r\n   type LoginError = {\r\n      type: string;\r\n      msg: string;\r\n   };\r\n\r\n   const handleLogin = () => {\r\n      if (!username || !password) {\r\n         let loginError: LoginError | null = null;\r\n         if (!username && !password) {\r\n            loginError = { type: 'empty_username_password', msg: 'Please Insert Your App Username & Password to login.' };\r\n         }\r\n         if (!username && password) {\r\n            loginError = { type: 'empty_username', msg: 'Please Insert Your App Username' };\r\n         }\r\n         if (!password && username) {\r\n            loginError = { type: 'empty_password', msg: 'Please Insert Your App Password' };\r\n         }\r\n         setError(loginError);\r\n         setTimeout(() => {\r\n            setError(null);\r\n         }, 5000);\r\n         return;\r\n      }\r\n\r\n      loginMutation.mutate(\r\n         { username, password },\r\n         {\r\n            onError: (error: Error) => {\r\n               let errorType = '';\r\n               if (error.message.toLowerCase().includes('username')) {\r\n                  errorType = 'incorrect_username';\r\n               }\r\n               if (error.message.toLowerCase().includes('password')) {\r\n                  errorType = 'incorrect_password';\r\n               }\r\n               setError({ type: errorType, msg: error.message });\r\n               setTimeout(() => {\r\n                  setError(null);\r\n               }, 5000);\r\n            },\r\n         },\r\n      );\r\n   };\r\n\r\n   return (\r\n      <div className={classes.loginPage}>\r\n         <PageTitle title={`Login`} />\r\n         <div className={classes.loginLogo}>\r\n            <h3>\r\n               <Logo size={36} /> <span>{APP_NAME}</span>\r\n            </h3>\r\n         </div>\r\n         <div className={classes.container}>\r\n            <div className=\"loginForm\">\r\n               <div className={classes.loginInput}>\r\n                  <Icon type=\"user\" classes={classes.loginInputIcon} />\r\n                  <input\r\n                     className={`${error && error.type.includes('username') ? 'inputError' : ''}`}\r\n                     type=\"text\"\r\n                     value={username}\r\n                     placeholder=\"Username\"\r\n                     onChange={(event) => setUsername(event.target.value)}\r\n                  />\r\n               </div>\r\n               <div className={classes.loginInput}>\r\n                  <Icon type=\"password\" classes={classes.loginInputIcon} />\r\n                  <input\r\n                     className={`${error && error.type.includes('password') ? 'inputError' : ''}`}\r\n                     type=\"password\"\r\n                     value={password}\r\n                     placeholder=\"Password\"\r\n                     onChange={(event) => setPassword(event.target.value)}\r\n                  />\r\n               </div>\r\n               <button className={classes.loginButton} onClick={handleLogin} disabled={loginMutation.isPending}>\r\n                  {loginMutation.isPending ? 'Logging in...' : 'Login'}\r\n               </button>\r\n               {error && error.msg && <div className={classes.loginErrorMsg}>{error.msg}</div>}\r\n            </div>\r\n         </div>\r\n      </div>\r\n   );\r\n};\r\n\r\nexport default Login;\r\n"],"names":["Login","error","setError","useState","username","setUsername","password","setPassword","loginMutation","useLogin","handleLogin","loginError","errorType","jsxs","classes","jsx","PageTitle","Logo","APP_NAME","Icon","event"],"mappings":";;;;;;;;AAQA,MAAMA,IAAQ,MAAM;AACjB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA4B,IAAI,GACpD,CAACC,GAAUC,CAAW,IAAIF,EAAiB,EAAE,GAC7C,CAACG,GAAUC,CAAW,IAAIJ,EAAiB,EAAE,GAC7CK,IAAgBC,EAAA,GAOhBC,IAAc,MAAM;AACvB,QAAI,CAACN,KAAY,CAACE,GAAU;AACzB,UAAIK,IAAgC;AACpC,MAAI,CAACP,KAAY,CAACE,MACfK,IAAa,EAAE,MAAM,2BAA2B,KAAK,uDAAA,IAEpD,CAACP,KAAYE,MACdK,IAAa,EAAE,MAAM,kBAAkB,KAAK,kCAAA,IAE3C,CAACL,KAAYF,MACdO,IAAa,EAAE,MAAM,kBAAkB,KAAK,kCAAA,IAE/CT,EAASS,CAAU,GACnB,WAAW,MAAM;AACd,QAAAT,EAAS,IAAI;AAAA,MAChB,GAAG,GAAI;AACP;AAAA,IACH;AAEA,IAAAM,EAAc;AAAA,MACX,EAAE,UAAAJ,GAAU,UAAAE,EAAA;AAAA,MACZ;AAAA,QACG,SAAS,CAACL,MAAiB;AACxB,cAAIW,IAAY;AAChB,UAAIX,EAAM,QAAQ,YAAA,EAAc,SAAS,UAAU,MAChDW,IAAY,uBAEXX,EAAM,QAAQ,YAAA,EAAc,SAAS,UAAU,MAChDW,IAAY,uBAEfV,EAAS,EAAE,MAAMU,GAAW,KAAKX,EAAM,SAAS,GAChD,WAAW,MAAM;AACd,YAAAC,EAAS,IAAI;AAAA,UAChB,GAAG,GAAI;AAAA,QACV;AAAA,MAAA;AAAA,IACH;AAAA,EAEN;AAEA,SACG,gBAAAW,EAAC,OAAA,EAAI,WAAWC,EAAQ,WACrB,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAU,OAAO,QAAA,CAAS;AAAA,sBAC1B,OAAA,EAAI,WAAWF,EAAQ,WACrB,4BAAC,MAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAACE,GAAA,EAAK,MAAM,GAAA,CAAI;AAAA,MAAE;AAAA,MAAC,gBAAAF,EAAC,UAAM,UAAAG,EAAA,CAAS;AAAA,IAAA,EAAA,CACtC,EAAA,CACH;AAAA,IACA,gBAAAH,EAAC,SAAI,WAAWD,EAAQ,WACrB,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAWC,EAAQ,YACrB,UAAA;AAAA,QAAA,gBAAAC,EAACI,GAAA,EAAK,MAAK,QAAO,SAASL,EAAQ,gBAAgB;AAAA,QACnD,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,WAAW,GAAGd,KAASA,EAAM,KAAK,SAAS,UAAU,IAAI,eAAe,EAAE;AAAA,YAC1E,MAAK;AAAA,YACL,OAAOG;AAAA,YACP,aAAY;AAAA,YACZ,UAAU,CAACgB,MAAUf,EAAYe,EAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACtD,GACH;AAAA,MACA,gBAAAP,EAAC,OAAA,EAAI,WAAWC,EAAQ,YACrB,UAAA;AAAA,QAAA,gBAAAC,EAACI,GAAA,EAAK,MAAK,YAAW,SAASL,EAAQ,gBAAgB;AAAA,QACvD,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,WAAW,GAAGd,KAASA,EAAM,KAAK,SAAS,UAAU,IAAI,eAAe,EAAE;AAAA,YAC1E,MAAK;AAAA,YACL,OAAOK;AAAA,YACP,aAAY;AAAA,YACZ,UAAU,CAACc,MAAUb,EAAYa,EAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACtD,GACH;AAAA,MACA,gBAAAL,EAAC,UAAA,EAAO,WAAWD,EAAQ,aAAa,SAASJ,GAAa,UAAUF,EAAc,WAClF,UAAAA,EAAc,YAAY,kBAAkB,SAChD;AAAA,MACCP,KAASA,EAAM,OAAO,gBAAAc,EAAC,SAAI,WAAWD,EAAQ,eAAgB,UAAAb,EAAM,IAAA,CAAI;AAAA,IAAA,EAAA,CAC5E,EAAA,CACH;AAAA,EAAA,GACH;AAEN;"}

package/dist/routes/Login/Login.module.scss

@@ -0,0 +1,94 @@
+.loginPage {
+   width: 100%;
+   height: 100vh;
+   display: flex;
+   align-items: center;
+   justify-content: top;
+   flex-direction: column;
+   padding-top: 10%;
+   box-sizing: border-box;
+}
+
+.loginLogo {
+   h3 {
+      display: flex;
+      align-items: center;
+      color: var(--primary-color);
+      font-size: 1.125rem;
+      text-transform: uppercase;
+      font-weight: 900;
+      span:nth-child(1) {
+         display: flex;
+         color: var(--primary-color);
+      }
+      span:nth-child(2) {
+         margin-left: 5px;
+      }
+   }
+}
+
+.container {
+   width: 270px;
+   border-radius: 7px;
+   background-color: var(--content-background-color);
+   padding: 30px 25px;
+   box-shadow: 0 0 10px var(--content-shadow-color);
+}
+
+.loginForm {
+   width: 100%;
+   display: flex;
+   h4 {
+      margin-top: 0;
+   }
+}
+.loginInput {
+   margin-bottom: 15px;
+   position: relative;
+   label {
+      display: block;
+      color: var(--content-text-color);
+      font-size: 0.75rem;
+      font-weight: 600;
+      margin-bottom: 4px;
+   }
+   input {
+      border: 1px solid;
+      border-color: var(--line-color);
+      border-radius: 4px;
+      padding: 12px;
+      padding-left: 36px;
+      width: 100%;
+      box-sizing: border-box;
+      outline: none;
+      &:focus {
+         outline: none;
+         border-color: var(--primary-color);
+      }
+   }
+   .loginInputIcon {
+      position: absolute !important;
+      left: 12px;
+      top: 12px;
+      opacity: 0.7;
+   }
+}
+
+.loginButton {
+   background-color: var(--primary-color);
+   color: var(--primary-text-color);
+   font-size: 0.75rem;
+   border-radius: 4px;
+   width: 100%;
+   box-sizing: border-box;
+   padding: 12px;
+   font-weight: 600;
+}
+
+.loginErrorMsg {
+   color: var(--error-text-color);
+   background-color: var(--error-bg-color);
+   padding: 12px;
+   border-radius: 5px;
+   margin-top: 15px;
+}