initial v0.8 pre-release
This commit is contained in:
Gani Georgiev
@@ -0,0 +1,155 @@
|
||||
<script>
|
||||
import { slide } from "svelte/transition";
|
||||
import { Collection, Record } from "pocketbase";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import { confirm } from "@/stores/confirmation";
|
||||
import { removeError } from "@/stores/errors";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
export let collection = new Collection();
|
||||
export let record = new Record();
|
||||
|
||||
let originalUsername = record.username || null;
|
||||
|
||||
let changePasswordToggle = false;
|
||||
|
||||
$: if (!record.username && record.username !== null) {
|
||||
record.username = null;
|
||||
}
|
||||
|
||||
$: if (!changePasswordToggle) {
|
||||
record.password = null;
|
||||
record.passwordConfirm = null;
|
||||
removeError("password");
|
||||
removeError("passwordConfirm");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="grid m-b-base">
|
||||
<div class="col-lg-6">
|
||||
<Field class="form-field {!record.isNew ? 'required' : ''}" name="username" let:uniqueId>
|
||||
<label for={uniqueId}>
|
||||
<i class={CommonHelper.getFieldTypeIcon("user")} />
|
||||
<span class="txt">Username</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
requried={!record.isNew}
|
||||
placeholder={record.isNew ? "Leave empty to auto generate..." : originalUsername}
|
||||
id={uniqueId}
|
||||
bind:value={record.username}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<Field
|
||||
class="form-field {collection.options?.requireEmail ? 'required' : ''}"
|
||||
name="email"
|
||||
let:uniqueId
|
||||
>
|
||||
<label for={uniqueId}>
|
||||
<i class={CommonHelper.getFieldTypeIcon("email")} />
|
||||
<span class="txt">Email</span>
|
||||
</label>
|
||||
<div class="form-field-addon email-visibility-addon">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary {record.emailVisibility ? 'btn-success' : 'btn-hint'}"
|
||||
use:tooltip={{
|
||||
text: "Make email public or private",
|
||||
position: "top-right",
|
||||
}}
|
||||
on:click={() => (record.emailVisibility = !record.emailVisibility)}
|
||||
>
|
||||
<span class="txt">Public: {record.emailVisibility ? "On" : "Off"}</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
type="email"
|
||||
autofocus={record.isNew}
|
||||
autocomplete="off"
|
||||
id={uniqueId}
|
||||
required={collection.options?.requireEmail}
|
||||
bind:value={record.email}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
{#if !record.isNew}
|
||||
<Field class="form-field form-field-toggle" name="verified" let:uniqueId>
|
||||
<input type="checkbox" id={uniqueId} bind:checked={changePasswordToggle} />
|
||||
<label for={uniqueId}>Change password</label>
|
||||
</Field>
|
||||
{/if}
|
||||
|
||||
{#if record.isNew || changePasswordToggle}
|
||||
<div class="block" transition:slide|local={{ duration: 150 }}>
|
||||
<div class="grid" class:p-t-xs={changePasswordToggle}>
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field required" name="password" let:uniqueId>
|
||||
<label for={uniqueId}>
|
||||
<i class="ri-lock-line" />
|
||||
<span class="txt">Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
id={uniqueId}
|
||||
required
|
||||
bind:value={record.password}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field required" name="passwordConfirm" let:uniqueId>
|
||||
<label for={uniqueId}>
|
||||
<i class="ri-lock-line" />
|
||||
<span class="txt">Password confirm</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
id={uniqueId}
|
||||
required
|
||||
bind:value={record.passwordConfirm}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<Field class="form-field form-field-toggle" name="verified" let:uniqueId>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={uniqueId}
|
||||
bind:checked={record.verified}
|
||||
on:change|preventDefault={(e) => {
|
||||
if (record.isNew) {
|
||||
return; // no confirmation required
|
||||
}
|
||||
confirm(
|
||||
`Do you really want to manually change the verified account state?`,
|
||||
() => {},
|
||||
() => {
|
||||
record.verified = !e.target.checked;
|
||||
}
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<label for={uniqueId}>Verified</label>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.email-visibility-addon ~ input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -6,6 +6,13 @@
|
||||
|
||||
export let field = new SchemaField();
|
||||
export let value = undefined;
|
||||
|
||||
// strip ms and zone for backwards compatibility with the older format
|
||||
// and because flatpickr currently doesn't have integrated
|
||||
// zones support and requires manual parsing and formatting
|
||||
$: if (value && value.length > 19) {
|
||||
value = value.substring(0, 19);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field class="form-field {field.required ? 'required' : ''}" name={field.name} let:uniqueId>
|
||||
|
||||
@@ -83,12 +83,12 @@
|
||||
<RecordFilePreview {record} {filename} />
|
||||
</figure>
|
||||
<a
|
||||
href={ApiClient.records.getFileUrl(record, filename)}
|
||||
href={ApiClient.getFileUrl(record, filename)}
|
||||
class="filename link-hint"
|
||||
class:txt-strikethrough={deletedFileIndexes.includes(i)}
|
||||
use:tooltip={{ position: "right", text: "Download" }}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{filename}
|
||||
</a>
|
||||
|
||||
@@ -7,9 +7,14 @@
|
||||
export let field = new SchemaField();
|
||||
export let value = undefined;
|
||||
|
||||
$: isMultiple = field.options?.maxSelect > 1;
|
||||
$: isMultiple = field.options?.maxSelect != 1;
|
||||
|
||||
$: if (isMultiple && Array.isArray(value) && value.length > field.options.maxSelect) {
|
||||
$: if (
|
||||
isMultiple &&
|
||||
Array.isArray(value) &&
|
||||
field.options?.maxSelect &&
|
||||
value.length > field.options.maxSelect
|
||||
) {
|
||||
value = value.slice(field.options.maxSelect - 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
<script>
|
||||
import { SchemaField } from "pocketbase";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import UserSelect from "@/components/users/UserSelect.svelte";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
export let field = new SchemaField();
|
||||
export let value = undefined;
|
||||
|
||||
// to prevent accidental changes, disable editing system user field values from the UI
|
||||
$: isDisabled = !CommonHelper.isEmpty(value) && field.system;
|
||||
|
||||
$: isMultiple = field.options?.maxSelect > 1;
|
||||
|
||||
$: if (isMultiple && Array.isArray(value) && value.length > field.options.maxSelect) {
|
||||
value = value.slice(field.options.maxSelect - 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field
|
||||
class="form-field {field.required ? 'required' : ''} {isDisabled ? 'disabled' : ''}"
|
||||
name={field.name}
|
||||
let:uniqueId
|
||||
>
|
||||
<label for={uniqueId}>
|
||||
<i class={CommonHelper.getFieldTypeIcon(field.type)} />
|
||||
<span class="txt">{field.name}</span>
|
||||
</label>
|
||||
<UserSelect toggle id={uniqueId} multiple={isMultiple} disabled={isDisabled} bind:keyOfSelected={value} />
|
||||
{#if field.options?.maxSelect > 1}
|
||||
<div class="help-block">Select up to {field.options.maxSelect} users.</div>
|
||||
{/if}
|
||||
</Field>
|
||||
Reference in New Issue
Block a user