lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

AddUserModal - data validation

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-09 18:55:54 +01:00
parent 7cf2ffce2d
commit 264e0d7ed9
1 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/AddUserModal.svelte
View File

@ -3,11 +3,10 @@
import { clickOutside } from "./outsideclick"; import { clickOutside } from "./outsideclick";
import { focusTrap } from "svelte-focus-trap"; import { focusTrap } from "svelte-focus-trap";
import { tracks as tracksstore } from "../store.js"; import { tracks as tracksstore } from "../store.js";
import { TrackService, UserService } from "@odit/lfk-client-js"; import { UserService } from "@odit/lfk-client-js";
import isEmail from "validator/es/lib/isEmail"; import isEmail from "validator/es/lib/isEmail";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import "toastify-js/src/toastify.css"; import "toastify-js/src/toastify.css";
import About from "./About.svelte";
export let modal_open; export let modal_open;
let firstname_input; let firstname_input;
let lastname_input; let lastname_input;
@ -22,14 +21,13 @@
$: email_input_value = ""; $: email_input_value = "";
$: lastname_input_value = ""; $: lastname_input_value = "";
$: firstname_input_value = ""; $: firstname_input_value = "";
$: track_min_duration = 0;
$: tracklength = 0;
$: processed_last_submit = true; $: processed_last_submit = true;
$: isPasswordValid = password_input_value.trim().length === 0; $: isPasswordValid = password_input_value.trim().length !== 0;
$: isEmailValid = isEmail(email_input_value); $: isEmailValid = isEmail(email_input_value);
$: isLastnameValid = lastname_input_value.trim().length === 0; $: isLastnameValid = lastname_input_value.trim().length !== 0;
$: isFirstnameValid = firstname_input_value.trim().length === 0; $: isFirstnameValid = firstname_input_value.trim().length !== 0;
$: createbtnenabled = !isFirstnameValid && !isLastnameValid; $: createbtnenabled =
isFirstnameValid && isLastnameValid && isEmailValid && isPasswordValid;
(function () { (function () {
document.onkeydown = function (e) { document.onkeydown = function (e) {
e = e || window.event; e = e || window.event;
@ -55,7 +53,8 @@
firstname: firstname_input_value, firstname: firstname_input_value,
lastname: lastname_input_value, lastname: lastname_input_value,
middlename: middlename_input_value, middlename: middlename_input_value,
email:email_input_value,password:password_input_value email: email_input_value,
password: password_input_value,
}) })
.then((result) => { .then((result) => {
firstname_input_value = ""; firstname_input_value = "";
@ -142,15 +141,15 @@
use:focus use:focus
autocomplete="off" autocomplete="off"
placeholder="First Name" placeholder="First Name"
class:border-red-500={isFirstnameValid} class:border-red-500={!isFirstnameValid}
class:focus:border-red-500={isFirstnameValid} class:focus:border-red-500={!isFirstnameValid}
class:focus:ring-red-500={isFirstnameValid} class:focus:ring-red-500={!isFirstnameValid}
bind:value={firstname_input_value} bind:value={firstname_input_value}
bind:this={firstname_input} bind:this={firstname_input}
type="text" type="text"
name="firstname" 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" /> 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} {#if !isFirstnameValid}
<span <span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"> class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
First Name is required First Name is required
@ -177,15 +176,15 @@
<input <input
autocomplete="off" autocomplete="off"
placeholder="Last Name" placeholder="Last Name"
class:border-red-500={isLastnameValid} class:border-red-500={!isLastnameValid}
class:focus:border-red-500={isLastnameValid} class:focus:border-red-500={!isLastnameValid}
class:focus:ring-red-500={isLastnameValid} class:focus:ring-red-500={!isLastnameValid}
bind:value={lastname_input_value} bind:value={lastname_input_value}
bind:this={lastname_input} bind:this={lastname_input}
type="text" type="text"
name="lastname" 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" /> 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} {#if !isLastnameValid}
<span <span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"> class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Last Name is required Last Name is required
@ -199,15 +198,15 @@
<input <input
autocomplete="off" autocomplete="off"
placeholder="Password" placeholder="Password"
class:border-red-500={isPasswordValid} class:border-red-500={!isPasswordValid}
class:focus:border-red-500={isPasswordValid} class:focus:border-red-500={!isPasswordValid}
class:focus:ring-red-500={isPasswordValid} class:focus:ring-red-500={!isPasswordValid}
bind:value={password_input_value} bind:value={password_input_value}
bind:this={password_input} bind:this={password_input}
type="password" type="password"
name="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" /> 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} {#if !isPasswordValid}
<span <span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"> class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Password is required Password is required