basic AddUserModal ui

ref #12

src/components/AddUserModal.svelte

@@ -3,23 +3,33 @@
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
-  import { TrackService } from "@odit/lfk-client-js";
+  import { TrackService, UserService } from "@odit/lfk-client-js";
+  import isEmail from "validator/es/lib/isEmail";
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  import About from "./About.svelte";
   export let modal_open;
-  let trackname_input;
+  let firstname_input;
+  let lastname_input;
+  let middlename_input;
+  let password_input;
+  let email_input;
   function focus(el) {
     el.focus();
   }
-  $: trackname_input_value = "";
+  $: middlename_input_value = "";
+  $: password_input_value = "";
+  $: email_input_value = "";
+  $: lastname_input_value = "";
+  $: firstname_input_value = "";
   $: track_min_duration = 0;
   $: tracklength = 0;
   $: processed_last_submit = true;
-  $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
-  $: isFirstnameValid = trackname_input_value.trim().length === 0;
-  $: isTracklengthValid = tracklength <= 0;
-  $: trackMintimevalid = track_min_duration >= 0;
-  $: createbtnenabled = !isFirstnameValid && !isTracklengthValid;
+  $: isPasswordValid = password_input_value.trim().length === 0;
+  $: isEmailValid = isEmail(email_input_value);
+  $: isLastnameValid = lastname_input_value.trim().length === 0;
+  $: isFirstnameValid = firstname_input_value.trim().length === 0;
+  $: createbtnenabled = !isFirstnameValid && !isLastnameValid;
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -38,22 +48,23 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_("track-is-being-added"),
+        text: "User is being added...",
         duration: -1,
       }).showToast();
-      TrackService.trackControllerPost({
-        distance: parseInt(tracklength),
-        name: trackname_input_value,
-        minimumLapTime: track_min_duration,
+      UserService.userControllerPost({
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+        middlename: middlename_input_value,
+        email:email_input_value,password:password_input_value
       })
         .then((result) => {
-          trackname_input_value = "";
-          track_min_duration = 0;
-          tracklength = 0;
+          firstname_input_value = "";
+          lastname_input_value = "";
+          middlename_input_value = "";
           modal_open = false;
           //
           Toastify({
-            text: $_("track-added"),
+            text: "User added",
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -125,7 +136,7 @@
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
-                    for="trackname"
+                    for="firstname"
                     class="block text-sm font-medium text-gray-700">First Name</label>
                   <input
                     use:focus
@@ -134,10 +145,10 @@
                     class:border-red-500={isFirstnameValid}
                     class:focus:border-red-500={isFirstnameValid}
                     class:focus:ring-red-500={isFirstnameValid}
-                    bind:value={trackname_input_value}
-                    bind:this={trackname_input}
+                    bind:value={firstname_input_value}
+                    bind:this={firstname_input}
                     type="text"
-                    name="trackname"
+                    name="firstname"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
                   {#if isFirstnameValid}
                     <span
@@ -146,6 +157,85 @@
                     </span>
                   {/if}
                 </div>
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">Middle Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Middle Name"
+                    bind:value={middlename_input_value}
+                    bind:this={middlename_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="lastname"
+                    class="block text-sm font-medium text-gray-700">Last Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Last Name"
+                    class:border-red-500={isLastnameValid}
+                    class:focus:border-red-500={isLastnameValid}
+                    class:focus:ring-red-500={isLastnameValid}
+                    bind:value={lastname_input_value}
+                    bind:this={lastname_input}
+                    type="text"
+                    name="lastname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if isLastnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Last Name is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="password"
+                    class="block text-sm font-medium text-gray-700">Password</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Password"
+                    class:border-red-500={isPasswordValid}
+                    class:focus:border-red-500={isPasswordValid}
+                    class:focus:ring-red-500={isPasswordValid}
+                    bind:value={password_input_value}
+                    bind:this={password_input}
+                    type="password"
+                    name="password"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if isPasswordValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Password is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-700">E-Mail</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="E-Mail"
+                    class:border-red-500={!isEmailValid}
+                    class:focus:border-red-500={!isEmailValid}
+                    class:focus:ring-red-500={!isEmailValid}
+                    bind:value={email_input_value}
+                    bind:this={email_input}
+                    type="email"
+                    name="email"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isEmailValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      valid email is required
+                    </span>
+                  {/if}
+                </div>
               </div>
             </div>
           </div>