PROD-501 Validation Clean-up - PROD-265_work-intake

src/lib/form/form-input/input-textarea/InputTextarea.tsx

@@ -6,7 +6,7 @@ import { FormFieldWrapper } from '../form-field-wrapper'
 import styles from './InputTextarea.module.scss'
 
 interface InputTextareaProps {
-    readonly dirty?: boolean
+    readonly dirtyOrTouched?: boolean
     readonly disabled?: boolean
     readonly error?: string
     readonly hint?: string
@@ -24,7 +24,7 @@ interface InputTextareaProps {
 const InputTextarea: FC<InputTextareaProps> = (props: InputTextareaProps) => {
     return (
         <FormFieldWrapper
-            dirtyOrTouched={!!props.dirty}
+            dirtyOrTouched={!!props.dirtyOrTouched}
             disabled={!!props.disabled}
             error={props.error}
             hint={props.hint}

src/lib/form/validator-functions/index.ts

@@ -5,7 +5,7 @@ export {
     password as validatorPassword,
     required as validatorRequired,
     requiredIfOther as validatorRequiredIfOther,
-    url as validatorUrl,
+    sslUrl as validatorSslUrl,
 } from './validator.functions'
 export
     // tslint:disable-next-line: no-unused-expression

src/lib/form/validator-functions/validator.functions.ts

@@ -90,19 +90,25 @@ export function requiredIfOther(value: string | undefined, formElements?: HTMLFo
     return `required when ${getOtherFieldLabel(otherField, otherFieldName)} is not blank`
 }
 
-export function url(value: string | undefined): string | undefined {
+export function sslUrl(value: string | undefined): string | undefined {
 
     // if there's no value, there's nothing to check
     if (!value) {
         return undefined
     }
 
-    const urlRegex: RegExp = /\b(https?|ftp|file):\/\/[\-A-Za-z0-9+&@#\/%?=~_|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_|]/
-    return !urlRegex.test(value) ? 'invalid url' : undefined
+    try {
+
+        // require https
+        return new URL(value).protocol !== 'https:' ? 'links must start with https' : undefined
+
+    } catch {
+        return 'invalid url'
+    }
 }
 
 export type ValidatorFn = Array<(value: string | undefined, formValues?: HTMLFormControlsCollection, otherField?: string)
-     => string | undefined | Promise<string | undefined>>
+    => string | undefined | Promise<string | undefined>>
 
 function getOtherField(formElements?: HTMLFormControlsCollection, otherFieldName?: string): HTMLInputElement {
 

src/tools/work-intake/work-intake-form.config.ts

@@ -2,7 +2,7 @@ import {
     FormDefinition,
     inputOptionalHint,
     validatorRequired,
-    validatorUrl,
+    validatorSslUrl,
 } from '../../lib'
 
 export const workIntakeTitle: string = 'Define your work'
@@ -30,10 +30,10 @@ export const workIntakeDef: FormDefinition = {
             hint: inputOptionalHint,
             label: 'Share your data',
             name: 'data',
-            placeholder: 'Paste a link',
+            placeholder: 'https://...',
             type: 'text',
             validateOnChange: [
-                validatorUrl,
+                validatorSslUrl,
             ],
         },
         {