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