Commit 06236f84 authored by Magnus Westergaard's avatar Magnus Westergaard
Browse files

DEICH-5757: Add simple validation to branch social media input fields. Remove some unused code.

parent abde31e5
......@@ -14,24 +14,25 @@
<div class="edit-branch">
<div class="block block--top-8">
<EditBranchSignature strings={strings} bind:branch="{branch}" required={true}
<EditBranchSignature strings={strings} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" />
</div>
<div class="block block--top-8">
<EditBranchAddress strings={strings} bind:branch="{branch}" required={true}
<EditBranchAddress strings={strings} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" />
</div>
<div class="block block--top-8">
<EditBranchSocialMedia strings={strings} bind:branch="{branch}" required={true} />
<EditBranchSocialMedia strings={strings} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" />
</div>
<div class="block block--top-8">
<EditBranchInformation strings={strings.description} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" />
</div>
<div class="block block--top-8">
<EditSingleImage strings={strings} bind:image="{branch.profileImage}" label="Profilbilde" required={true} />
<EditSingleImage strings={strings} bind:image="{branch.profileImage}" label="Profilbilde" />
</div>
<div class="block block--top-8">
<EditBranchImages strings={strings} bind:images="{branch.image}" required={true} />
<EditBranchImages strings={strings} bind:images="{branch.image}" />
</div>
</div>
\ No newline at end of file
......@@ -6,14 +6,6 @@
import {strings} from "../../lib/strings.js"
import EditField from "./EditField.svelte"
const validMandatoryFields = {}
validMandatoryFields["branch"] = false
validMandatoryFields["date"] = false
validMandatoryFields["startTime"] = false
validMandatoryFields["title"] = false
validMandatoryFields["ingress"] = false
validMandatoryFields["description"] = false
validMandatoryFields["libraryEventPrice"] = false
export let images
onMount(() => {
......
<script>
import EditField from "./EditField.svelte"
const urlProtocolPattern = "^https://.+"
const urlProtocolErrorMessage = "Vennligst legg inn hele nettadressen som begynner med https://..."
export let branch
export let strings
export let validMandatoryFields
export function setValidProp(event) {
validMandatoryFields[event.detail.prop] = event.detail.valid
validMandatoryFields = validMandatoryFields
}
</script>
<div class="edit-branch-social-media">
......@@ -10,15 +20,19 @@
<h2>Sosiale medier</h2>
</div>
<div class="grid__item large--three-fifths">
<EditField strings={strings.twitter} bind:value="{branch.twitter}" required={false} data_cy="input-branch-twitter" />
<EditField strings={strings.twitter} bind:value="{branch.twitter}" required={false} data_cy="input-branch-twitter" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="twitter" />
<div class="block block--top-4">
<EditField strings={strings.facebook} bind:value="{branch.facebook}" required={false} data_cy="input-branch-facebook" />
<EditField strings={strings.facebook} bind:value="{branch.facebook}" required={false} data_cy="input-branch-facebook" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="facebook" />
</div>
<div class="block block--top-4">
<EditField strings={strings.snapchat} bind:value="{branch.snapchat}" required={false} data_cy="input-branch-snapchat" />
<EditField strings={strings.snapchat} bind:value="{branch.snapchat}" required={false} data_cy="input-branch-snapchat" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="snapchat" />
</div>
<div class="block block--top-4">
<EditField strings={strings.instagram} bind:value="{branch.instagram}" required={false} data_cy="input-branch-instagram" />
<EditField strings={strings.instagram} bind:value="{branch.instagram}" required={false} data_cy="input-branch-instagram" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="instagram" />
</div>
</div>
</div>
......
......@@ -12,33 +12,34 @@
export let prop
export let data_cy = null
export let strings = {}
export let validPattern
export let patternErrorMsg
$: valid = validate(value, required, validPattern)
onMount(() => {
fireValid()
})
export function fireValid () {
if (!required || required && value) {
dispatch("valid", { prop: prop, valid: true })
} else if (required && !value) {
dispatch("valid", { prop: prop, valid: false })
}
dispatch("valid", { prop, valid })
}
function validClass (value, required) {
if (!required) {
return ""
function validate(value, required, validPattern) {
if (value && validPattern) {
return new RegExp(validPattern).test(value)
}
if (required && value) {
return ""
} else {
return "input--error"
if (!required || (required && value)) {
return true
}
return false
}
</script>
<div class="edit-field">
<div class="input input--full {validClass(value, required)}">
<div class="input input--full" class:input--error={!valid} >
<label>{strings.label}
{#if required}
*
......@@ -66,6 +67,9 @@
on:blur="{fireValid}"
data-cy={data_cy}
/>
{/if}
{#if !valid && patternErrorMsg}
<p class="text text--error">{patternErrorMsg}</p>
{/if}
</div>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment