Skip to content

Improve provider wizard #787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Feb 15, 2024
Merged

Improve provider wizard #787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
db0b33a
Update links in provider popovers
stnguyen90 Feb 8, 2024
9da910a
Remove provider link property since it's not used
stnguyen90 Feb 8, 2024
1148fa5
Update phone input to support popovers
stnguyen90 Feb 8, 2024
4c416c7
Fix pattern for domain
stnguyen90 Feb 8, 2024
a74cb9b
Removed required prop from InputSwitch
stnguyen90 Feb 8, 2024
d3a3ed9
Ensure sensitive provider fields use a password input
stnguyen90 Feb 8, 2024
37dc821
Allow revealing the value for provider password inputs
stnguyen90 Feb 8, 2024
05259b7
Update password input to support popovers
stnguyen90 Feb 8, 2024
a35fc76
Update all provider inputs to hide popover button when there's no pop…
stnguyen90 Feb 8, 2024
a589af5
Use a large shadow for popover dropped cards
stnguyen90 Feb 8, 2024
aeb8261
Enforce required password inputs for providers
stnguyen90 Feb 8, 2024
e9647c4
Don't send empty strings for optional provider fields
stnguyen90 Feb 8, 2024
674c839
Skip some tests for the InputDomain input
stnguyen90 Feb 9, 2024
a030c6f
Fix twilio popover links and text
stnguyen90 Feb 14, 2024
a5d76af
Fix Vonage popover links and text
stnguyen90 Feb 14, 2024
e35f1cc
Fix SendGrid case and link
stnguyen90 Feb 14, 2024
671a646
Fix Textmagic case and popover text
stnguyen90 Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/lib/elements/forms/inputDomain.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@
export let autofocus = false;
export let autocomplete = false;
export let maxlength: number = null;
export let isPopoverDefined = true;

// https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
const pattern = String.raw`^(?!-)[A-Za-z0-9-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}$`;
const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;

let element: HTMLInputElement;
let error: string;
Expand Down Expand Up @@ -50,7 +51,7 @@

<FormItem>
<Label {required} hide={!showLabel} for={id}>
{label}{#if $$slots.popover}
{label}{#if $$slots.popover && isPopoverDefined}
<Drop bind:show display="inline-block">
<!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
&nbsp;<button
Expand All @@ -64,7 +65,9 @@
style="font-size: var(--icon-size-small)" />
</button>
<svelte:fragment slot="list">
<div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
<div
class="dropped card u-max-width-250"
style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
<slot name="popover" />
</div>
</svelte:fragment>
Expand Down
7 changes: 5 additions & 2 deletions src/lib/elements/forms/inputEmail.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
export let autofocus = false;
export let autocomplete = false;
export let tooltip: string = null;
export let isPopoverDefined = true;

let element: HTMLInputElement;
let error: string;
Expand Down Expand Up @@ -59,7 +60,7 @@

<FormItem>
<Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
{label}{#if $$slots.popover}
{label}{#if $$slots.popover && isPopoverDefined}
<Drop bind:show display="inline-block">
<!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
&nbsp;<button
Expand All @@ -73,7 +74,9 @@
style="font-size: var(--icon-size-small)" />
</button>
<svelte:fragment slot="list">
<div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
<div
class="dropped card u-max-width-250"
style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
<slot name="popover" />
</div>
</svelte:fragment>
Expand Down
7 changes: 5 additions & 2 deletions src/lib/elements/forms/inputFile.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
export let optionalText: string = null;
export let tooltip: string = null;
export let error: string = null;
export let isPopoverDefined = true;

let input: HTMLInputElement;
let hovering = false;
Expand Down Expand Up @@ -95,7 +96,7 @@
<div>
{#if label}
<Label {required} {optionalText} {tooltip} hide={!label}>
{label}{#if $$slots.popover}
{label}{#if $$slots.popover && isPopoverDefined}
<Drop bind:show display="inline-block">
<!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
&nbsp;<button
Expand All @@ -109,7 +110,9 @@
style="font-size: var(--icon-size-small)" />
</button>
<svelte:fragment slot="list">
<div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
<div
class="dropped card u-max-width-250"
style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
<slot name="popover" />
</div>
</svelte:fragment>
Expand Down
26 changes: 25 additions & 1 deletion src/lib/elements/forms/inputPassword.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem, Helper, Label } from '.';
import { Drop } from '$lib/components';

export let id: string;
export let label: string;
Expand All @@ -15,10 +16,12 @@
export let showPasswordButton = false;
export let minlength = 8;
export let maxlength: number = null;
export let isPopoverDefined = true;

let element: HTMLInputElement;
let error: string;
let showInPlainText = false;
let showPopover = false;

onMount(() => {
if (element && autofocus) {
Expand Down Expand Up @@ -48,7 +51,28 @@

<FormItem>
<Label {required} hide={!showLabel} for={id}>
{label}
{label}{#if $$slots.popover && isPopoverDefined}
<Drop bind:show={showPopover} display="inline-block">
<!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
&nbsp;<button
type="button"
on:click={() => (showPopover = !showPopover)}
class="tooltip"
aria-label="input tooltip">
<span
class="icon-info"
aria-hidden="true"
style="font-size: var(--icon-size-small)" />
</button>
<svelte:fragment slot="list">
<div
class="dropped card u-max-width-250"
style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
<slot name="popover" />
</div>
</svelte:fragment>
</Drop>
{/if}
</Label>

<div class="input-text-wrapper" style={showPasswordButton ? '--amount-of-buttons: 1' : ''}>
Expand Down
26 changes: 25 additions & 1 deletion src/lib/elements/forms/inputPhone.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem, Helper, Label } from '.';
import { Drop } from '$lib/components';

export let label: string;
export let showLabel = true;
Expand All @@ -13,11 +14,13 @@
export let autofocus = false;
export let autocomplete = false;
export let maxlength: number = null;
export let isPopoverDefined = true;

const pattern = String.raw`^\+?[1-9]\d{1,14}$`;

let element: HTMLInputElement;
let error: string;
let show = false;

onMount(() => {
if (element && autofocus) {
Expand Down Expand Up @@ -47,7 +50,28 @@

<FormItem>
<Label {required} hide={!showLabel} for={id}>
{label}
{label}{#if $$slots.popover && isPopoverDefined}
<Drop bind:show display="inline-block">
<!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
&nbsp;<button
type="button"
on:click={() => (show = !show)}
class="tooltip"
aria-label="input tooltip">
<span
class="icon-info"
aria-hidden="true"
style="font-size: var(--icon-size-small)" />
</button>
<svelte:fragment slot="list">
<div
class="dropped card u-max-width-250"
style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
<slot name="popover" />
</div>
</svelte:fragment>
</Drop>
{/if}
</Label>
<div class="input-text-wrapper">
<input
Expand Down
6 changes: 0 additions & 6 deletions src/lib/elements/forms/inputSwitch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
export let label: string;
export let id: string;
export let value = false;
export let required = false;
export let disabled = false;

let element: HTMLInputElement;
Expand All @@ -13,10 +12,6 @@
const handleInvalid = (event: Event) => {
event.preventDefault();

if (element.validity.valueMissing) {
error = 'This field is required';
return;
}
error = element.validationMessage;
};

Expand All @@ -31,7 +26,6 @@
<input
{id}
{disabled}
{required}
type="checkbox"
class="switch"
role="switch"
Expand Down
4 changes: 3 additions & 1 deletion src/lib/elements/forms/inputText.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@
style="font-size: var(--icon-size-small)" />
</button>
<svelte:fragment slot="list">
<div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
<div
class="dropped card u-max-width-250"
style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
<slot name="popover" />
</div>
</svelte:fragment>
Expand Down
12 changes: 6 additions & 6 deletions src/routes/console/project-[project]/messaging/providers/create.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,10 @@
$providerParams[$provider].apiKey,
$providerParams[$provider].domain,
$providerParams[$provider].isEuRegion,
$providerParams[$provider].fromName,
$providerParams[$provider].fromName || undefined,
$providerParams[$provider].fromEmail,
$providerParams[$provider].replyToName,
$providerParams[$provider].replyToEmail,
$providerParams[$provider].replyToName || undefined,
$providerParams[$provider].replyToEmail || undefined,
$providerParams[$provider].enabled
);
break;
Expand All @@ -89,10 +89,10 @@
providerId,
$providerParams[$provider].name,
$providerParams[$provider].apiKey,
$providerParams[$provider].fromName,
$providerParams[$provider].fromName || undefined,
$providerParams[$provider].fromEmail,
$providerParams[$provider].replyToName,
$providerParams[$provider].replyToEmail,
$providerParams[$provider].replyToName || undefined,
$providerParams[$provider].replyToEmail || undefined,
$providerParams[$provider].enabled
);
break;
Expand Down
Loading