submit form.

2020-12-03 12:21:49 +13:00
parent ead1774191
commit 58f4e18404
22 changed files with 858 additions and 13 deletions
@@ -0,0 +1,143 @@
+<script>
+  import { onMount } from "svelte";
+  import { goto, prefetch } from "@sapper/app";
+
+  let input;
+  let handleSubmit;
+  let hasError;
+  let isLoading;
+
+  onMount(() => {
+    setTimeout(() => {
+      input && input.focus();
+    }, 0);
+    handleSubmit = async () => {
+      isLoading = true;
+      hasError = false;
+      const url = input.value;
+      const response = await fetch(`submit.json`, {
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+        body: JSON.stringify({ url }),
+      });
+      if (!response.ok) {
+        hasError = true;
+        isLoading = false;
+        return;
+      }
+      const { nid } = await response.json();
+      await prefetch(`/${nid}`);
+      await goto(`/${nid}`);
+    };
+  });
+</script>
+
+<style>
+  section {
+    max-width: 45rem;
+    margin: 5rem auto 0;
+  }
+  form {
+    text-align: center;
+    width: 95%;
+    border: solid 1px #aaa;
+    margin: 3.5rem auto;
+    border-radius: 5px;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: row;
+  }
+
+  form:focus-within {
+    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
+  }
+
+  input {
+    width: 85%;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    margin: 0;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border: none;
+    border-radius: 0;
+    background: #fff;
+    vertical-align: middle;
+  }
+
+  form:has(input:focus) {
+    box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2);
+  }
+
+  button {
+    width: 15%;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    margin: 0;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border: none;
+    border-left: solid 1px #aaa;
+    border-radius: 0;
+    background: #f1f1f1;
+    vertical-align: middle;
+  }
+
+  .loading,
+  .is-loading form,
+  .is-loading .error {
+    display: none;
+  }
+
+  .is-loading .loading {
+    display: block;
+    margin: 3.5rem auto 0;
+  }
+
+  .error {
+    display: none;
+  }
+
+  .has-error .error {
+    box-sizing: border-box;
+    height: 3rem;
+    padding: 0;
+    margin: 0;
+    color: darkred;
+    display: block;
+  }
+  .has-error form {
+    margin-top: 5rem;
+  }
+</style>
+
+<svelte:head>
+  <title>QotNews</title>
+  <meta property="og:title" content="QotNews" />
+  <meta property="og:type" content="website" />
+  <link rel="preload" href="/loading.svg" as="image" />
+</svelte:head>
+
+<section class="{isLoading ? 'is-loading' : ''} {hasError ? 'has-error' : ''}">
+  <img
+    class="loading"
+    src="/loading.svg"
+    alt="loading..."
+    width="200"
+    height="200" />
+
+  <form on:submit|preventDefault={handleSubmit} autocomplete="off">
+    <input
+      type="text"
+      name="url"
+      placeholder="Enter article link"
+      pattern="^https?:\/\/(www\.)?.*"
+      value=""
+      bind:this={input}
+      required />
+    <button type="submit">Go</button>
+  </form>
+
+  <p class="error">Something went wrong.</p>
+</section>