Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix by torsten

Browse Source
This commit is contained in:
Torsten Dittmann
2022-08-16 17:10:36 +02:00
parent 15b51b08ee
commit 37f244a858
43 changed files with 302 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/InnerModal.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
<span class="icon-x" aria-hidden="true" />
</button>
<p class="u-flex-basis-100-percent">
<slot />
<slot name="subtitle" />
</p>
</header>
<div class="modal-content">
src/lib/components/alert.svelte
+7 -9
View File
@@ -3,16 +3,9 @@
import type { Buttons } from '../stores/notifications';
export let dismissible = false;
export let type: '' | 'info' | 'success' | 'warning' | 'error' = 'info';
export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
export let buttons: Buttons[] = [];
let icon = {
success: 'icon-check-circle',
warning: 'icon-exclamation',
error: 'icon-exclamation-circle',
info: 'icon-info'
};
const dispatch = createEventDispatcher();
</script>
@@ -31,7 +24,12 @@
<span class="icon-x" aria-hidden="true" />
</button>
{/if}
<span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
<span
class:icon-info={type === 'info'}
class:icon-check-circle={type === 'success'}
class:icon-exclamation={type === 'warning'}
class:icon-exclamation-circle={type === 'error'}
aria-hidden="true" />
<div class="content">
{#if $$slots.title}
<h6 class="title">
src/lib/components/modal.svelte
+5 -8
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { browser } from '$app/env';
import { createEventDispatcher } from 'svelte';
import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
import { Alert } from '$lib/components';
@@ -7,11 +8,6 @@
export let size: 'small' | 'big' = null;
export let warning = false;
export let error: string = null;
let browser = false;
//TODO: explore other solutions compatible with testing library
onMount(() => {
browser = true;
});
const dispatch = createEventDispatcher();
const transitionFly: FlyParams = {
@@ -28,19 +24,20 @@
closeModal();
}
};
const handleBLur = (event: MouseEvent) => {
const target: Partial<HTMLElement> = event.target;
if (target.hasAttribute('data-curtain')) {
closeModal();
}
};
const closeModal = () => {
show = false;
dispatch('close');
};
/**
* Workaround until https://github.com/sveltejs/svelte/issues/3105 is resolved.
*/
$: if (browser) {
if (show) {
document.body.classList.add('u-overflow-hidden');
src/lib/elements/forms/helper.svelte
+15 -11
View File
@@ -1,18 +1,22 @@
<script lang="ts">
export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
let icon = {
info: 'icon-info',
success: 'icon-check-circle',
warning: 'icon-exclamation',
error: 'icon-exclamation-circle',
neutral: 'icon-info'
};
export let type: 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
</script>
<p class={`helper u-${type} u-margin-block-start-12"`}>
<p
class="helper u-margin-block-start-12"
class:u-info={type === 'info'}
class:u-error={type === 'error'}
class:u-success={type === 'success'}
class:u-warning={type === 'warning'}
class:u-neutral={type === 'neutral'}>
{#if type}
<span class={icon[type] ?? ''} aria-hidden="true" />
<span
class:icon-info={type === 'info'}
class:icon-error={type === 'error'}
class:icon-success={type === 'success'}
class:icon-warning={type === 'warning'}
class:icon-neutral={type === 'neutral'}
aria-hidden="true" />
{/if}
<span class="text">
<slot />
src/lib/elements/forms/inputCheckbox.svelte
+12 -14
View File
@@ -7,23 +7,21 @@
export let value = false;
export let required = false;
export let disabled = false;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
let error: string;
const handleInvalid = (event: Event) => {
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
}
event.preventDefault();
showHelper = true;
if (element.validity.valueMissing) {
error = 'This field is required';
return;
}
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -31,15 +29,15 @@
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
bind:this={element}
{id}
{disabled}
{required}
type="checkbox"
bind:checked={value} />
bind:this={element}
bind:checked={value}
on:invalid={handleInvalid} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputCustomId.svelte
+2
View File
@@ -7,9 +7,11 @@
export let placeholder = '';
export let required = false;
export let autofocus = false;
let element: HTMLInputElement;
let unique = true;
let bench = '';
const toggle = async () => {
unique = !unique;
if (unique) {
src/lib/elements/forms/inputEmail.svelte
+12 -13
View File
@@ -11,11 +11,9 @@
export let disabled = false;
export let autofocus = false;
export let autocomplete = false;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
let error: string;
onMount(() => {
if (element && autofocus) {
@@ -25,18 +23,19 @@
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.typeMismatch) {
errorMessage = 'Your email should be formatted as: name@example.com';
error = 'Your email should be formatted as: name@example.com';
return;
}
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -44,18 +43,18 @@
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
{required}
autocomplete={autocomplete ? 'on' : 'off'}
type="email"
class="input-text"
autocomplete={autocomplete ? 'on' : 'off'}
bind:value
bind:this={element} />
bind:this={element}
on:invalid={handleInvalid} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputFile.svelte
+1 -1
View File
@@ -12,6 +12,6 @@
<FormItem>
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input {id} {disabled} {required} bind:files type="file" />
<input {id} {disabled} {required} type="file" bind:files />
</div>
</FormItem>
src/lib/elements/forms/inputNumber.svelte
+9 -11
View File
@@ -12,11 +12,9 @@
export let autofocus = false;
export let maxlength: number = null;
export let minlength: number = null;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
let error: string;
onMount(() => {
if (element && autofocus) {
@@ -27,16 +25,16 @@
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -44,7 +42,6 @@
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -54,9 +51,10 @@
type="number"
class="input-text"
bind:value
bind:this={element} />
bind:this={element}
on:invalid={handleInvalid} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputPassword.svelte
+20 -21
View File
@@ -13,13 +13,11 @@
export let meter = false;
export let autocomplete = false;
export let showPasswordButton = false;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
export let minlength = 8;
export let maxlength: number = null;
let element: HTMLInputElement;
let error: string;
let showInPlainText = false;
onMount(() => {
@@ -30,21 +28,22 @@
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
console.log(element.validity);
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
if (element.validity.tooShort) {
errorMessage = 'Password should contain at least 8 characters';
error = 'Password should contain at least 8 characters';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
}
$: strength = value ? value.length * 10 : 0;
$: if (value) {
error = null;
}
</script>
<FormItem>
@@ -52,32 +51,32 @@
<div class="input-text-wrapper">
{#if showInPlainText}
<input
on:invalid={handleInvalid}
type="text"
{id}
name={id}
{placeholder}
{disabled}
autocomplete={autocomplete ? 'on' : 'off'}
{minlength}
{maxlength}
name={id}
type="text"
class="input-text"
autocomplete={autocomplete ? 'on' : 'off'}
bind:value
bind:this={element} />
bind:this={element}
on:invalid={handleInvalid} />
{:else}
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
{required}
autocomplete={autocomplete ? 'on' : 'off'}
{minlength}
{maxlength}
type="password"
class="input-text"
autocomplete={autocomplete ? 'on' : 'off'}
bind:value
bind:this={element} />
bind:this={element}
on:invalid={handleInvalid} />
{/if}
{#if meter}
@@ -104,7 +103,7 @@
</button>
{/if}
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputPhone.svelte
+20 -13
View File
@@ -12,11 +12,11 @@
export let autofocus = false;
export let autocomplete = false;
export let maxlength: number = null;
export let errorMessage = 'Allowed characters: leading ‘+’ and maximum of 15 digits';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
let element: HTMLInputElement;
let error: string;
onMount(() => {
if (element && autofocus) {
@@ -26,15 +26,21 @@
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
if (element.validity.patternMismatch) {
error = "Allowed characters: leading '+' and maximum of 15 digits";
return;
}
showHelper = true;
if (element.validity.valueMissing) {
error = 'This field is required';
return;
}
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -42,19 +48,20 @@
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
{required}
{maxlength}
{pattern}
type="text"
autocomplete={autocomplete ? 'on' : 'off'}
type="tel"
class="input-text"
bind:value
bind:this={element} />
bind:this={element}
on:invalid={handleInvalid} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputRadio.svelte
+11 -12
View File
@@ -9,41 +9,40 @@
export let name: string;
export let required = false;
export let disabled = false;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
let error: string;
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
<FormItem>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
bind:this={element}
{id}
{name}
{disabled}
{required}
{value}
type="radio"
bind:group />
bind:group
bind:this={element}
on:invalid={handleInvalid} />
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputSearch.svelte
+3 -8
View File
@@ -40,16 +40,11 @@
{required}
type="search"
class="input-text"
on:input={valueChange}
bind:this={element} />
bind:this={element}
on:input={valueChange} />
<span class="icon-search" aria-hidden="true" />
{#if isWithEndButton && value}
<button
class="x-button"
aria-label="Clear search"
on:click={() => {
value = '';
}}>
<button class="x-button" aria-label="Clear search" on:click={() => (value = '')}>
<span class="icon-x" aria-hidden="true" />
</button>
{/if}
src/lib/elements/forms/inputSelect.svelte
+11 -13
View File
@@ -11,24 +11,22 @@
value: string;
label: string;
}[];
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLSelectElement;
let error: string;
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -36,12 +34,12 @@
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="select">
<select
on:invalid={handleInvalid}
bind:this={element}
bind:value
{id}
{required}
{disabled}>
{disabled}
bind:this={element}
bind:value
on:invalid={handleInvalid}>
{#each options as option}
<option value={option.value} selected={option.value === value}>
{option.label}
@@ -50,7 +48,7 @@
</select>
<span class="icon-cheveron-down" aria-hidden="true" />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputSwitch.svelte
+9 -11
View File
@@ -6,24 +6,22 @@
export let value = false;
export let required = false;
export let disabled = false;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
let error: string;
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -31,7 +29,6 @@
<label class="choice-item" for={id}>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{disabled}
{required}
@@ -40,13 +37,14 @@
role="switch"
bind:this={element}
bind:checked={value}
on:change />
on:change
on:invalid={handleInvalid} />
</div>
<div class="choice-item-content">
<div class="choice-item-title">{label}</div>
</div>
</label>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputTags.svelte
+13 -14
View File
@@ -8,12 +8,10 @@
export let tags: string[] = [];
export let placeholder = '';
export let autofocus = false;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let value = '';
let element: HTMLInputElement;
let error: string;
onMount(() => {
if (element && autofocus) {
@@ -53,15 +51,16 @@
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -88,18 +87,18 @@
</ul>
</div>
<input
on:invalid={handleInvalid}
type="text"
class="tags-input-text"
{id}
{placeholder}
type="text"
class="tags-input-text"
bind:value
bind:this={element}
on:keydown={handleInput}
on:blur={addValue}
bind:value
bind:this={element} />
on:invalid={handleInvalid} />
</div>
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputText.svelte
+11 -11
View File
@@ -12,11 +12,9 @@
export let autofocus = false;
export let autocomplete = false;
export let maxlength: number = null;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
let error: string;
onMount(() => {
if (element && autofocus) {
@@ -26,15 +24,17 @@
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -42,7 +42,6 @@
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -52,9 +51,10 @@
type="text"
class="input-text"
bind:value
bind:this={element} />
bind:this={element}
on:invalid={handleInvalid} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputTextarea.svelte
+9 -11
View File
@@ -11,11 +11,9 @@
export let disabled = false;
export let autofocus = false;
export let maxlength: number = null;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLTextAreaElement;
let error: string;
onMount(() => {
if (element && autofocus) {
@@ -25,15 +23,15 @@
const handleInvalid = (event: Event) => {
event.preventDefault();
errorMessage = element.validationMessage;
if (element.validity.valueMissing) {
errorMessage = 'This field is required';
error = 'This field is required';
return;
}
showHelper = true;
error = element.validationMessage;
};
$: if (value) {
showHelper = false;
error = null;
}
</script>
@@ -41,7 +39,6 @@
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<textarea
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -49,9 +46,10 @@
{maxlength}
class="input-text"
bind:value
bind:this={element} />
bind:this={element}
on:invalid={handleInvalid} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
</FormItem>
src/lib/layout/notification.svelte
+12 -16
View File
@@ -6,29 +6,25 @@
export let title: Notification['title'];
export let buttons: Notification['buttons'];
let icon = {
success: 'icon-check-circle',
warning: 'icon-exclamation',
error: 'icon-exclamation-circle',
info: 'icon-info'
};
let typeClass = {
success: 'is-success',
warning: 'is-warning',
error: 'is-danger',
info: 'is-info'
};
const dispatch = createEventDispatcher();
</script>
<li class={`alert-sticky ${type ? typeClass[type] : ''}`}>
<li
class="alert-sticky"
class:is-success={type === 'success'}
class:is-warning={type === 'warning'}
class:is-error={type === 'error'}
class:is-info={type === 'info'}>
<button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
<span class="icon-x" aria-hidden="true" />
</button>
<div class="alert-sticky-image">
<span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
<span
class:icon-check-cirle={type === 'success'}
class:icon-exclamation={type === 'warning'}
class:icon-exclamation-circle={type === 'error'}
class:icon-info={type === 'info'}
aria-hidden="true" />
</div>
<div class="alert-sticky-content">
{#if title}
src/lib/layout/shell.svelte
+5 -5
View File
@@ -68,7 +68,7 @@
class="icon-button is-no-desktop"
aria-label="Open Menu"
on:click={() => (isOpen = !isOpen)}>
<span class={isOpen ? 'icon-x' : 'icon-menu'} aria-hidden="true" />
<span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
</button>
<slot name="header" />
</header>
@@ -88,10 +88,10 @@
</h1>
{#if $copyData?.value}
<Copy value={$copyData.value}>
<Pill button
><span
class="icon-duplicate"
aria-hidden="true" />{$copyData.text}</Pill>
<Pill button>
<span class="icon-duplicate" aria-hidden="true" />
{$copyData.text}
</Pill>
</Copy>
{/if}
</svelte:fragment>
src/routes/console/[project]/storage/_create.svelte
+16 -13
View File
@@ -12,7 +12,7 @@
let name = '';
let id: string = null;
let showDropdown = false;
let modalError: string;
let error: string;
const create = async () => {
try {
@@ -24,8 +24,8 @@
name = null;
showCreate = false;
dispatch('created', bucket);
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
@@ -34,12 +34,12 @@
}
$: if (!showCreate) {
showDropdown = false;
modalError = null;
error = null;
}
</script>
<Form on:submit={create}>
<Modal error={modalError} size="big" bind:show={showCreate}>
<Modal {error} size="big" bind:show={showCreate}>
<svelte:fragment slot="header">Create Bucket</svelte:fragment>
<FormList>
<InputText
@@ -52,15 +52,17 @@
{#if !showDropdown}
<div>
<Pill button on:click={() => (showDropdown = !showDropdown)}
><span class="icon-pencil" aria-hidden="true" /><span class="text">
Bucket ID
</span></Pill>
<Pill button on:click={() => (showDropdown = !showDropdown)}>
<span class="icon-pencil" aria-hidden="true" />
<span class="text"> Bucket ID </span>
</Pill>
</div>
{:else}
<InnerModal bind:show={showDropdown}>
<svelte:fragment slot="title">Bucket ID</svelte:fragment>
<p>Enter a custom bucket ID. Leave blank for a randomly generated one.</p>
<svelte:fragment slot="subtitle">
Enter a custom bucket ID. Leave blank for a randomly generated one.
</svelte:fragment>
<svelte:fragment slot="content">
<div class="form">
<InputText
@@ -75,9 +77,10 @@
<span
class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
aria-hidden="true" />
<span class="text u-line-height-1-5"
>Allowed characters: alphanumeric, hyphen, non-leading
underscore, period</span>
<span class="text u-line-height-1-5">
Allowed characters: alphanumeric, hyphen, non-leading
underscore, period
</span>
</div>
</div>
</svelte:fragment>
src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
+8 -8
View File
@@ -19,8 +19,8 @@
let read: string[] = [];
let write: string[] = [];
let id: string = null;
let error: string;
let showDropdown = false;
let modalError: string;
const create = async () => {
try {
@@ -36,8 +36,8 @@
showDropdown = false;
uploader.addFile(file);
dispatch('created');
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
@@ -68,12 +68,10 @@
}
$: if (!showCreate) {
id = null;
id = files = error = null;
list = new DataTransfer();
files = null;
read = [];
write = [];
modalError = null;
}
$: if (!showDropdown) {
@@ -84,7 +82,7 @@
<input bind:files id="file" type="file" style="display: none" />
<Form on:submit={create}>
<Modal error={modalError} bind:show={showCreate}>
<Modal {error} bind:show={showCreate}>
<svelte:fragment slot="header">Upload File</svelte:fragment>
<FormList>
<div>
@@ -135,7 +133,9 @@
{:else}
<InnerModal bind:show={showDropdown}>
<svelte:fragment slot="title">File ID</svelte:fragment>
<p>Enter a custom file ID. Leave blank for a randomly generated one.</p>
<svelte:fragment slot="subtitle">
Enter a custom file ID. Leave blank for a randomly generated one.
</svelte:fragment>
<svelte:fragment slot="content">
<div class="form">
<InputText
src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
</script>
<Form on:submit={deleteUser}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete Bucket</svelte:fragment>
<p>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
<svelte:fragment slot="footer">
src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
</script>
<Form on:submit={deleteFile}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete File</svelte:fragment>
<p>Are you sure you want to delete <b>{file.name}</b>?</p>
<svelte:fragment slot="footer">
src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
</script>
<Form on:submit={deleteFile}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete File</svelte:fragment>
<p>Are you sure you want to delete <b>{$file.name}</b>?</p>
<svelte:fragment slot="footer">
src/routes/console/[project]/users/_appleOAuth.svelte
+7 -6
View File
@@ -16,7 +16,7 @@
export let provider: Provider;
let { keyID, teamID, p8 } = JSON.parse(provider.secret);
let modalError: string;
let error: string;
const projectId = $page.params.project;
const update = async () => {
@@ -29,21 +29,22 @@
secret
);
showModal = false;
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
</script>
<Form on:submit={update}>
<Modal error={modalError} size="big" bind:show={showModal}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
To use {provider.name} authentication in your application, first fill in this form. For
more info you can
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
>visit the docs.</a>
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
visit the docs.
</a>
</p>
<InputSwitch
id="state"
src/routes/console/[project]/users/_auth0OAuth.svelte
+4 -4
View File
@@ -16,7 +16,7 @@
export let provider: Provider;
let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
let modalError: string;
let error: string;
const projectId = $page.params.project;
const update = async () => {
@@ -29,14 +29,14 @@
secret
);
showModal = false;
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
</script>
<Form on:submit={update}>
<Modal error={modalError} size="big" bind:show={showModal}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
src/routes/console/[project]/users/_createTeam.svelte
+8 -7
View File
@@ -10,9 +10,8 @@
const dispatch = createEventDispatcher();
let name: string, id: string;
let name: string, id: string, error: string;
let showDropdown = false;
let modalError: string;
const create = async () => {
try {
@@ -25,8 +24,8 @@
message: `${team.name} has been created`
});
dispatch('created', team);
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
@@ -35,12 +34,12 @@
}
$: if (!showCreate) {
showDropdown = false;
modalError = null;
error = null;
}
</script>
<Form on:submit={create}>
<Modal error={modalError} size="big" bind:show={showCreate}>
<Modal {error} size="big" bind:show={showCreate}>
<svelte:fragment slot="header">Create Team</svelte:fragment>
<FormList>
<InputText
@@ -59,7 +58,9 @@
{:else}
<InnerModal bind:show={showDropdown}>
<svelte:fragment slot="title">Team ID</svelte:fragment>
Enter a custom team ID. Leave blank for a randomly generated one.
<svelte:fragment slot="subtitle">
Enter a custom team ID. Leave blank for a randomly generated one.
</svelte:fragment>
<svelte:fragment slot="content">
<div class="form">
<InputText
src/routes/console/[project]/users/_createUser.svelte
+16 -12
View File
@@ -19,7 +19,7 @@
let showDropdown = false;
let name: string, mail: string, pass: string, id: string;
let modalError: string;
let error: string;
const create = async () => {
try {
@@ -32,8 +32,8 @@
message: `${user.name} has been created`
});
dispatch('created', user);
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
@@ -42,12 +42,12 @@
}
$: if (!showCreate) {
showDropdown = false;
modalError = null;
error = null;
}
</script>
<Form on:submit={create}>
<Modal error={modalError} size="big" bind:show={showCreate}>
<Modal {error} size="big" bind:show={showCreate}>
<svelte:fragment slot="header">Create User</svelte:fragment>
<FormList>
<InputText
@@ -72,15 +72,18 @@
{#if !showDropdown}
<div>
<Pill button on:click={() => (showDropdown = !showDropdown)}
><span class="icon-pencil" aria-hidden="true" /><span class="text">
<Pill button on:click={() => (showDropdown = !showDropdown)}>
<span class="icon-pencil" aria-hidden="true" /><span class="text">
User ID
</span></Pill>
</span>
</Pill>
</div>
{:else}
<InnerModal bind:show={showDropdown}>
<svelte:fragment slot="title">User ID</svelte:fragment>
Enter a custom user ID. Leave blank for a randomly generated one.
<svelte:fragment slot="subtitle">
Enter a custom user ID. Leave blank for a randomly generated one.
</svelte:fragment>
<svelte:fragment slot="content">
<div class="form">
<InputText
@@ -95,9 +98,10 @@
<span
class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
aria-hidden="true" />
<span class="text u-line-height-1-5"
>Allowed characters: alphanumeric, hyphen, non-leading
underscore, period</span>
<span class="text u-line-height-1-5">
Allowed characters: alphanumeric, hyphen, non-leading
underscore, period
</span>
</div>
</div>
</svelte:fragment>
src/routes/console/[project]/users/_mainOAuth.svelte
+6 -4
View File
@@ -14,8 +14,10 @@
export let showModal = false;
export let provider: Provider;
const projectId = $page.params.project;
let modalError: string;
let error: string;
const update = async () => {
try {
@@ -26,14 +28,14 @@
provider.secret
);
showModal = false;
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
</script>
<Form on:submit={update}>
<Modal error={modalError} size="big" bind:show={showModal}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
src/routes/console/[project]/users/_microsoftOAuth.svelte
+8 -6
View File
@@ -14,8 +14,9 @@
export let showModal = false;
export let provider: Provider;
let { clientSecret, tenantID } = JSON.parse(provider.secret);
let modalError: string;
let error: string;
const projectId = $page.params.project;
@@ -30,21 +31,22 @@
);
showModal = false;
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
</script>
<Form on:submit={update}>
<Modal error={modalError} size="big" bind:show={showModal}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
To use {provider.name} authentication in your application, first fill in this form. For
more info you can
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
>visit the docs.</a>
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
visit the docs.
</a>
</p>
<InputSwitch
id="state"
src/routes/console/[project]/users/_oktaOAuth.svelte
+4 -4
View File
@@ -16,7 +16,7 @@
export let provider: Provider;
let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
let modalError: string;
let error: string;
const projectId = $page.params.project;
@@ -31,14 +31,14 @@
);
showModal = false;
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
</script>
<Form on:submit={update}>
<Modal error={modalError} size="big" bind:show={showModal}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+5 -5
View File
@@ -11,8 +11,8 @@
const dispatch = createEventDispatcher();
let name: string, email: string, roles: [];
let modalError: string;
let name: string, email: string, roles: string[];
let error: string;
const create = async () => {
const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
@@ -33,14 +33,14 @@
roles = [];
showCreate = false;
dispatch('created', user);
} catch (error) {
modalError = error.message;
} catch ({ message }) {
error = message;
}
};
</script>
<Form on:submit={create}>
<Modal error={modalError} size="big" bind:show={showCreate}>
<Modal {error} size="big" bind:show={showCreate}>
<svelte:fragment slot="header">Create Membership</svelte:fragment>
<FormList>
<InputEmail
src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+1 -2
View File
@@ -35,9 +35,8 @@
</script>
<Form on:submit={deleteMembership}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete Member</svelte:fragment>
<p>
Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
</p>
src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
</script>
<Form on:submit={deleteTeam}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete Team</svelte:fragment>
<p>
src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
</script>
<Form on:submit={deleteAllMemberships}>
<Modal warning={true} bind:show={showDeleteAll}>
<Modal bind:show={showDeleteAll} warning>
<svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
<p>
src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
+1 -2
View File
@@ -26,9 +26,8 @@
</script>
<Form on:submit={deleteAllSessions}>
<Modal warning={true} bind:show={showDeleteAll}>
<Modal bind:show={showDeleteAll} warning>
<svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
<p>
Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
</p>
src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+1 -1
View File
@@ -35,7 +35,7 @@
</script>
<Form on:submit={deleteMembership}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete Member</svelte:fragment>
<p>
Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
</script>
<Form on:submit={deleteSession}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete Sessions</svelte:fragment>
<p>Are you sure you want to delete this session?</p>
src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
</script>
<Form on:submit={deleteUser}>
<Modal warning={true} bind:show={showDelete}>
<Modal bind:show={showDelete} warning>
<svelte:fragment slot="header">Delete User</svelte:fragment>
<p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
<svelte:fragment slot="footer">
src/routes/console/[project]/users/user/[user]/index.svelte
+21 -12
View File
@@ -228,7 +228,8 @@
text={$user.status}
secondary={!$user.status}
on:click={() => updateStatus()}
>{$user.status ? 'Block account' : 'Unblock account'}</Button>
>{$user.status ? 'Block account' : 'Unblock account'}
</Button>
{#if $user.status}
{#if $user.phone && $user.email}
<DropList
@@ -244,12 +245,16 @@
{$user.emailVerification ? 'Unverify' : 'Verify'} account
</Button>
<svelte:fragment slot="list">
<DropListItem icon="mail" on:click={() => updateVerificationEmail()}
>{$user.emailVerification ? 'Unverify' : 'Verify'} email</DropListItem>
<DropListItem
icon="mail"
on:click={() => updateVerificationEmail()}>
{$user.emailVerification ? 'Unverify' : 'Verify'} email
</DropListItem>
<DropListItem
icon="phone"
on:click={() => updateVerificationPhone()}>
{$user.phoneVerification ? 'Unverify' : 'Verify'} phone</DropListItem>
{$user.phoneVerification ? 'Unverify' : 'Verify'} phone
</DropListItem>
</svelte:fragment>
</DropList>
{:else if !$user.phone}
@@ -300,8 +305,9 @@
</svelte:fragment>
<svelte:fragment slot="actions">
<Button disabled={userEmail === $user.email || !userEmail} submit
>Update</Button>
<Button disabled={userEmail === $user.email || !userEmail} submit>
Update
</Button>
</svelte:fragment>
</CardGrid>
</Form>
@@ -321,8 +327,9 @@
</svelte:fragment>
<svelte:fragment slot="actions">
<Button disabled={userPhone === $user.phone || !userPhone} submit
>Update</Button>
<Button disabled={userPhone === $user.phone || !userPhone} submit>
Update
</Button>
</svelte:fragment>
</CardGrid>
</Form>
@@ -334,7 +341,7 @@
</div>
<p>
Enter a new password. A password must contain <b> at least 8 characters.</b>
Enter a new password. A password must contain <b>at least 8 characters.</b>
</p>
<svelte:fragment slot="aside">
<ul>
@@ -380,8 +387,9 @@
</div>
</div>
<div class="form-item-part u-stretch">
<label class="label" for={`value-${index}`}
>Value</label>
<label class="label" for={`value-${index}`}>
Value
</label>
<div class="input-text-wrapper">
<input
id={`value-${value}`}
@@ -419,7 +427,8 @@
}
}}>
<span class="icon-plus" aria-hidden="true" />
<span class="text"> Add Preference </span></Button>
<span class="text">Add Preference</span>
</Button>
</form>
</svelte:fragment>
tests/unit/elements/inputPhone.test.ts
-1
View File
@@ -9,7 +9,6 @@ test('shows phone input', () => {
expect(getByText('input')).toBeInTheDocument();
expect(input).toBeInTheDocument();
expect(input).toHaveAttribute('type', 'tel');
});
test('shows phone input - required', () => {
vite.config.js
+1 -1
View File
@@ -19,7 +19,7 @@ const config = {
include: ['tests/**/*.test.ts'],
globals: true,
environment: 'jsdom',
thread: true
threads: true
}
};