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

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}