запуск логинизации

src/App.svelte

@@ -7,6 +7,9 @@
   */
 
   //6+49 кб 09/06/2023
+  //6+51 кб 02/09/2023
+  //6+64 кб 02/10/2023 + axios
+  //6+53 кб 03/10/2023 + fetch
 
   //******************************************************import section*********************************************************/
   //*****************************************************************************************************************************/
@@ -24,7 +27,8 @@
   import ConnectionPage from "./pages/Connection.svelte";
   import ListPage from "./pages/List.svelte";
   import SystemPage from "./pages/System.svelte";
-  import DevPage from "./pages/Dev.svelte";
+  import Login from "./pages/Login.svelte";
+  import { t, locale, locales } from "./i18n";
 
   //import UtilitiesPage from "./pages/Utilities.svelte";
   //import LogPage from "./pages/Log.svelte";
@@ -141,9 +145,9 @@
     console.log("[i]", "user on page:", currentPageName);
 
     //не нужно очищать переменные когда переходим на страницу разработчика
-    if (currentPageName != "/dev|") {
+    // if (currentPageName != "/dev|") {
     clearData();
-    }
+    //}
 
     //если мы на странице dashboard то рассылаем всем устройствам запрос данных
     if (currentPageName === "/|") {
@@ -593,12 +597,6 @@
       if (debug) console.log("✔✔", "system page parced");
       pageReady.system = true;
     }
-
-    if (currentPageName === "/dev|" && parsed.errorsJson && parsed.settingsJson && parsed.configJson && parsed.itemsJson) {
-      clearParcedFlags();
-      if (debug) console.log("✔✔", "dev page parced");
-      pageReady.dev = true;
-    }
   }
 
   async function initDevList() {
@@ -1399,11 +1397,16 @@
       <li>
         <a class="menu__item" href="/list">{"Устройства"}</a>
       </li>
-      {#if devMode}
-        <!--<li>
-          <a class="menu__item" href="/dev">{"Разработчик"}</a>
-        </li>-->
-      {/if}
+      <li>
+        <a class="menu__item" href="/login">{"Вход"}</a>
+      </li>
+      <li class="flex flex-col pl-6 pt-3 w-full h-screen">
+        <select class="border border-indigo-500 border-1 h-6 w-12" bind:value={$locale}>
+          {#each locales as l}
+            <option value={l}>{l}</option>
+          {/each}
+        </select>
+      </li>
     </ul>
   </nav>
 
@@ -1428,15 +1431,11 @@
           <Route path="/system">
             <SystemPage show={pageReady.system} errorsJson={errorsJson} settingsJson={settingsJson} saveSett={() => saveSett()} rebootEsp={() => rebootEsp()} cleanLogs={() => cleanLogs()} cancelAlarm={(alarmKey) => cancelAlarm(alarmKey)} versionsList={versionsList} bind:choosingVersion={choosingVersion} startUpdate={(all) => startUpdate(all)} coreMessages={coreMessages} />
           </Route>
-          {#if devMode}
-            <Route path="/dev">
-              <!--<Card title="Кнопка">
-                <button class="btn-lg" on:click={() => test()}>{"Тест"}</button>
-              </Card>-->
-              <DevPage show={pageReady.dev} layoutJson={layoutJson} errorsJson={errorsJson} settingsJson={settingsJson} configJson={configJson} itemsJson={itemsJson} paramsJson={paramsJson} />
+
+          <Route path="/login">
+            <Login show={true} />
           </Route>
         {/if}
-        {/if}
       </div>
     </ul>
   </main>

src/i18n.js

@@ -0,0 +1,32 @@
+import { derived, writable } from "svelte/store";
+import translations from "./lang";
+
+export const locale = writable("ru");
+export const locales = Object.keys(translations);
+
+function translate(locale, key, vars) {
+  // Let's throw some errors if we're trying to use keys/locales that don't exist.
+  // We could improve this by using Typescript and/or fallback values.
+  if (!key) throw new Error("no key provided to $t()");
+  if (!locale) throw new Error(`no translation for key "${key}"`);
+
+  // Grab the translation from the translations object.
+  let text = translations[locale][key];
+
+  if (!text) throw new Error(`no translation found for ${locale}.${key}`);
+
+  // Replace any passed in variables in the translation string.
+  Object.keys(vars).map((k) => {
+    const regex = new RegExp(`{{${k}}}`, "g");
+    text = text.replace(regex, vars[k]);
+  });
+
+  return text;
+}
+
+export const t = derived(
+  locale,
+  ($locale) =>
+    (key, vars = {}) =>
+      translate($locale, key, vars)
+);

src/lang.js

@@ -0,0 +1,12 @@
+export default {
+  ru: {
+    "login.email": "Введите email",
+    "login.pass": "Введите пароль",
+    "login.login": "Вход",
+  },
+  en: {
+    "login.email": "Email",
+    "login.pass": "Password",
+    "login.login": "Login",
+  },
+};

src/pages/Dev.svelte

@@ -1,53 +0,0 @@
-<script>
-  import Card from "../components/Card.svelte";
-  import Alarm from "../components/Alarm.svelte";
-
-  const syntaxHighlight = (json) => {
-    try {
-      json = JSON.stringify(JSON.parse(json), null, 4);
-    } catch (e) {
-      return json;
-    }
-    json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-      return match;
-    });
-    return json;
-  };
-
-  export let show;
-
-  export let errorsJson;
-  export let settingsJson;
-  export let configJson;
-  export let itemsJson;
-  export let paramsJson;
-  export let layoutJson;
-</script>
-
-{#if show}
-  <div class="my-4">
-    <div class="grd-3col1">
-      <Card title="layoutJson">
-        <textarea on:input={layoutJson} rows="23" class="w-full" id="1">{syntaxHighlight(JSON.stringify(layoutJson))}</textarea>
-      </Card>
-      <Card title="paramsJson">
-        <textarea on:input={paramsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(paramsJson))}</textarea>
-      </Card>
-      <Card title="errorsJson">
-        <textarea on:input={errorsJson} rows="23" class="w-full" id="2">{syntaxHighlight(JSON.stringify(errorsJson))}</textarea>
-      </Card>
-      <Card title="settingsJson">
-        <textarea on:input={settingsJson} rows="23" class="w-full" id="3">{syntaxHighlight(JSON.stringify(settingsJson))}</textarea>
-      </Card>
-      <Card title="configJson">
-        <textarea on:input={configJson} rows="23" class="w-full" id="3">{syntaxHighlight(JSON.stringify(configJson))}</textarea>
-      </Card>
-      <Card title="itemsJson">
-        <textarea on:input={itemsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(itemsJson))}</textarea>
-      </Card>
-    </div>
-  </div>
-{:else}
-  <Alarm title="Загрузка..." />
-{/if}

src/pages/Login.svelte

@@ -0,0 +1,61 @@
+<script>
+  import Card from "../components/Card.svelte";
+  import Alarm from "../components/Alarm.svelte";
+  import { t, locale, locales } from "../i18n";
+  export let show = true;
+
+  let user = {};
+
+  let errors = [];
+
+  const login = async (user) => {
+    try {
+      let res = await fetch("https://portal.iotmanager.org/api/auth/login", {
+        mode: "cors",
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(user),
+      });
+      const content = await res.json();
+      console.log(content);
+      if (res.ok) {
+        //
+      } else {
+        errors = content.message;
+      }
+    } catch (e) {
+      //console.log("er");
+      //errors = e;
+    }
+  };
+</script>
+
+{#if show}
+  <div class="flex h-screen m-2 md:m-4 lg:m-8 items-start justify-center">
+    <div class="w-full max-w-lg">
+      <form class="bg-white shadow-2xl rounded-xl px-8 pt-6 pb-8 mb-4">
+        <div class="mb-4">
+          <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+            {$t("login.email")}
+          </label>
+          <input bind:value={user.username} class="shadow appearance-none border rounded w-full h-10 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder={"someone@example.com"} />
+        </div>
+        <div class="mb-6">
+          <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+            {$t("login.pass")}
+          </label>
+          <input bind:value={user.password} class="shadow appearance-none border rounded w-full h-10 px-3 text-gray-700 mb-0 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="**********" />
+        </div>
+        {#each errors as e, i}
+          <p class="text-red-500 p-0 m-0 font-bold text-xs italic">{e.msg}</p>
+        {/each}
+        <button class="btn-lg mt-6" on:click={() => login(user)}>{$t("login.login")}</button>
+      </form>
+    </div>
+  </div>
+{:else}
+  <Alarm title="Загрузка..." />
+{/if}