✨ added basic UI for ResetPassword

ref #43

src/App.svelte

@@ -52,6 +52,7 @@
   import RunnerDetail from "./components/RunnerDetail.svelte";
   import Imprint from "./components/Imprint.svelte";
   import Privacy from "./components/Privacy.svelte";
+import ResetPassword from "./components/ResetPassword.svelte";
   store.init();
   registerSW();
 </script>
@@ -61,6 +62,10 @@
     <Route path="/forgot_password">
       <ForgotPassword />
     </Route>
+  {:else if $router.path.includes('/reset')}
+  <Route path="/reset/:resetkey" let:params>
+      <ResetPassword {params} />
+    </Route>
   {:else if $router.path === '/about'}
     <Route path="/about">
       <About />

src/components/ResetPassword.svelte

@@ -0,0 +1,105 @@
+<script>
+  import { ApiError, AuthService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  import isEmail from "validator/es/lib/isEmail";
+  let reset_success = false;
+  let newPassword = "";
+  export let params;
+  function set_new_password() {
+    // if (isEmail(newPassword)) {
+    //   AuthService.authControllerGetResetToken({ email: newPassword })
+    //     .then((resp) => {
+    //       console.log(resp);
+    //       console.log(resp.resetToken);
+    //       Toastify({
+    //         text: $_("mail-validation-in-progress"),
+    //         duration: 3500,
+    //       }).showToast();
+          reset_success = true;
+    //     })
+    //     .catch((err) => {
+    //       console.log(err.body.name);
+    //       console.log(err.body.message);
+    //     });
+    // } else {
+    //   Toastify({
+    //     text: $_("invalid-mail-reset"),
+    //     duration: 3500,
+    //   }).showToast();
+    // }
+  }
+</script>
+
+{#if reset_success}
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="max-w-md w-full py-12 px-6">
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+      <p class="mt-6 text-lg text-center font-bold text-gray-900">
+        {$_('application_name')}
+      </p>
+      <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
+        Successful password reset!
+      </p>
+      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
+        You can now use your new password to log in to your account! 🎉
+      </p>
+      <div class="mt-6">
+        <div class="mt-6">
+          <a
+            href="/login/"
+            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            Go To Login
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="max-w-md w-full py-12 px-6">
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+      <p class="mt-6 text-lg text-center font-bold text-gray-900">
+        {$_('application_name')}
+      </p>
+      <p class="mt-2 mb-4 text-md text-center text-gray-900">
+        {$_('reset-password')}
+      </p>
+      <div>
+        <div class="rounded-md shadow-sm">
+          <div>
+            <input
+              aria-label={$_('new-password')}
+              name="password"
+              type="password"
+              required=""
+              class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
+              placeholder={$_('new-password')}
+              bind:value={newPassword} />
+          </div>
+        </div>
+
+        <div class="mt-5">
+          <button
+            on:click={set_new_password}
+            type="submit"
+            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            <span class="absolute left-0 inset-y pl-3">
+              <svg
+                class="h-5 w-5 text-gray-500"
+                fill="currentColor"
+                viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                  clip-rule="evenodd" />
+              </svg>
+            </span>
+            {$_('reset-my-password')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/locales/en.json

@@ -115,6 +115,7 @@
     "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
     "name": "Name",
+    "new-password": "New password",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
     "organization": "Organization",
@@ -135,6 +136,7 @@
     "register": "Register",
     "repo_link": "Link",
     "reset-my-password": "Reset my password",
+    "reset-password": "Reset your password",
     "runner-import": "Runner Import",
     "runner-updated": "Runner updated!",
     "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",