fix: cardgrid typography

This commit is contained in:
Torsten Dittmann
2025-02-06 18:41:13 +01:00
parent de783aa29e
commit 3fc7750645
121 changed files with 540 additions and 791 deletions
+2 -2
View File
@@ -21,9 +21,9 @@
"dependencies": {
"@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68",
"@appwrite.io/pink-legacy": "^1.0.0",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
+14 -14
View File
@@ -15,14 +15,14 @@ importers:
specifier: 0.25.0
version: 0.25.0
'@appwrite.io/pink-icons-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68(svelte@4.2.19)
'@appwrite.io/pink-legacy':
specifier: ^1.0.0
version: 1.0.0
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -218,14 +218,14 @@ packages:
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
version: 1.2.1
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -239,8 +239,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.0':
resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -4089,11 +4089,11 @@ snapshots:
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
@@ -4106,9 +4106,9 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111(svelte@4.2.19)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c(svelte@4.2.19)
'@floating-ui/dom': 1.6.13
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
'@melt-ui/svelte': 0.86.2(svelte@4.2.19)
+8 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Divider, Layout, Card } from '@appwrite.io/pink-svelte';
import { Divider, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
export let hideOverflow = false;
export let hideFooter = false;
@@ -8,8 +8,13 @@
<Card.Base>
<Layout.Stack gap="xl" justifyContent="space-around">
<div class="common-section grid-1-2" class:hideOverflow>
<div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
<slot />
<div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-4">
<Typography.Title size="s"><slot name="title" /></Typography.Title>
{#if $$slots.default}
<Typography.Text>
<slot />
</Typography.Text>
{/if}
</div>
<div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
<slot name="aside" />
+13 -12
View File
@@ -1,12 +1,19 @@
<script lang="ts">
import { Button, InputCheckbox } from '$lib/elements/forms';
import { InputCheckbox } from '$lib/elements/forms';
import { page } from '$app/stores';
import type { Writable } from 'svelte/store';
import { preferences } from '$lib/stores/preferences';
import { onMount } from 'svelte';
import { View } from '$lib/helpers/load';
import type { Column } from '$lib/helpers/types';
import { ActionMenu, Icon, Layout, Popover, ToggleButton } from '@appwrite.io/pink-svelte';
import {
ActionMenu,
Icon,
Layout,
Popover,
ToggleButton,
Button
} from '@appwrite.io/pink-svelte';
import { IconViewBoards, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
import { goto } from '$app/navigation';
@@ -16,9 +23,7 @@
export let hideView = false;
export let hideColumns = false;
export let allowNoColumns = false;
export let showColsTextMobile = false;
export let fullWidthMobile = false;
export let hideText = false;
onMount(async () => {
if (isCustomCollection) {
@@ -82,17 +87,13 @@
{#if !hideColumns && view === View.Table}
{#if $columns?.length}
<Popover let:toggle>
<Button
<Button.Button
size="s"
secondary
variant="secondary"
badge={selectedColumnsNumber.toString()}
on:click={toggle}
{fullWidthMobile}>
on:click={toggle}>
<Icon slot="start" icon={IconViewBoards} />
{#if !hideText}
<span class="text {showColsTextMobile ? '' : 'is-only-desktop'}">Columns</span>
{/if}
</Button>
</Button.Button>
<svelte:fragment slot="tooltip">
<ActionMenu.Root>
<Layout.Stack>
+53 -24
View File
@@ -2,7 +2,7 @@
import { isCloud } from '$lib/system';
import { version } from '$routes/(console)/store';
import { IconCloud, IconDiscord, IconGithub } from '@appwrite.io/pink-icons-svelte';
import { Layout, Typography, Link, Icon, Divider } from '@appwrite.io/pink-svelte';
import { Layout, Typography, Link, Icon, Divider, Button } from '@appwrite.io/pink-svelte';
const currentYear = new Date().getFullYear();
</script>
@@ -10,69 +10,95 @@
<footer>
<Divider />
<Layout.Stack direction="row">
<Layout.Stack direction="row">
<Layout.Stack direction="row" alignItems="center" gap="l">
<Typography.Caption variant="400">
ⓒ {currentYear} Appwrite. All rights reserved.
</Typography.Caption>
<Link.Anchor
variant="quiet"
href="https://github.com/appwrite/appwrite"
target="_blank"
rel="noreferrer"
aria-label="Appwrite on Github">
<Icon size="s" icon={IconGithub} />
</Link.Anchor>
<Link.Anchor
variant="quiet"
href="https://appwrite.io/discord"
target="_blank"
rel="noreferrer"
aria-label="Appwrite on Discord">
<Icon size="s" icon={IconDiscord} />
</Link.Anchor>
<span class="divider-wrapper">
<Divider vertical />
</span>
<Layout.Stack direction="row" gap="xxs" inline>
<Button.Anchor
icon
size="xs"
variant="ghost"
href="https://github.com/appwrite/appwrite"
target="_blank"
rel="noreferrer"
aria-label="Appwrite on Github">
<Icon size="s" icon={IconGithub} />
</Button.Anchor>
<Button.Anchor
icon
size="xs"
variant="ghost"
href="https://appwrite.io/discord"
target="_blank"
rel="noreferrer"
aria-label="Appwrite on Discord">
<Icon size="s" icon={IconDiscord} />
</Button.Anchor>
</Layout.Stack>
</Layout.Stack>
<Layout.Stack direction="row" justifyContent="flex-end">
<Layout.Stack direction="row" justifyContent="flex-end" gap="l" alignItems="center">
{#if isCloud}
<Icon size="s" icon={IconCloud} />
{/if}
{#if $version}
<Link.Anchor
size="s"
variant="quiet"
href="https://github.com/appwrite/appwrite/releases"
aria-label="Appwrite releases on Github"
target="_blank"
rel="noreferrer">
<Typography.Caption variant="400">Version {$version}</Typography.Caption>
Version {$version}
</Link.Anchor>
<span class="divider-wrapper">
<Divider vertical />
</span>
{/if}
<Link.Anchor
size="s"
variant="quiet"
href="https://appwrite.io/docs"
target="_blank"
rel="noreferrer">
<Typography.Caption variant="400">Docs</Typography.Caption>
Docs
</Link.Anchor>
<span class="divider-wrapper">
<Divider vertical />
</span>
<Link.Anchor
size="s"
variant="quiet"
href="https://appwrite.io/terms"
target="_blank"
rel="noreferrer">
<Typography.Caption variant="400">Terms</Typography.Caption>
Terms
</Link.Anchor>
<span class="divider-wrapper">
<Divider vertical />
</span>
<Link.Anchor
size="s"
variant="quiet"
href="https://appwrite.io/privacy"
target="_blank"
rel="noreferrer">
<Typography.Caption variant="400">Privacy</Typography.Caption>
Privacy
</Link.Anchor>
{#if isCloud}
<span class="divider-wrapper">
<Divider vertical />
</span>
<Link.Anchor
size="s"
variant="quiet"
href="https://appwrite.io/cookies"
target="_blank"
rel="noreferrer">
<Typography.Caption variant="400">Cookies</Typography.Caption>
Cookies
</Link.Anchor>
{/if}
</Layout.Stack>
@@ -80,6 +106,9 @@
</footer>
<style lang="scss">
.divider-wrapper {
height: 18px;
}
footer {
margin-block-start: auto;
margin-inline: 2rem;
@@ -1,5 +1,5 @@
<script lang="ts">
import { AvatarInitials, BoxAvatar, CardGrid, Heading } from '$lib/components';
import { AvatarInitials, BoxAvatar, CardGrid } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { user } from '$lib/stores/user';
import Delete from './delete.svelte';
@@ -7,14 +7,10 @@
let showDelete = false;
</script>
<CardGrid danger>
<div>
<Heading tag="h2" size="7">Delete account</Heading>
</div>
<p>
Your account will be permanently deleted and access will be lost to any of your teams and
data. This action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete account</svelte:fragment>
Your account will be permanently deleted and access will be lost to any of your teams and data. This
action is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="image">
@@ -1,6 +1,6 @@
<script lang="ts">
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { CardGrid, Heading } from '$lib/components';
import { CardGrid } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
@@ -33,10 +33,8 @@
</script>
<CardGrid>
<Heading tag="h2" size="7">Identities</Heading>
<p class="text">
Identities are your connected GitHub accounts. You can sign in using these accounts.
</p>
<svelte:fragment slot="title">Identities</svelte:fragment>
Identities are your connected GitHub accounts. You can sign in using these accounts.
<svelte:fragment slot="aside">
{#if $identities.length === 0}
@@ -1,5 +1,5 @@
<script lang="ts">
import { CardGrid, DropList, DropListItem, Empty, Heading } from '$lib/components';
import { CardGrid, DropList, DropListItem, Empty } from '$lib/components';
import { Button } from '$lib/elements/forms';
import {
Table,
@@ -40,12 +40,8 @@
</script>
<CardGrid>
<Heading tag="h2" size="6">Billing Address</Heading>
<p class="text">
View or update your billing address. This address will be included in your invoices from
Appwrite.
</p>
<svelte:fragment slot="title">Billing Address</svelte:fragment>
View or update your billing address. This address will be included in your invoices from Appwrite.
<svelte:fragment slot="aside">
{#if $addressList.total && countryList?.total}
<Table noMargin noStyles transparent>
@@ -1,12 +1,5 @@
<script lang="ts">
import {
CardGrid,
CreditCardInfo,
DropList,
DropListItem,
Empty,
Heading
} from '$lib/components';
import { CardGrid, CreditCardInfo, DropList, DropListItem, Empty } from '$lib/components';
import { Pill } from '$lib/elements';
import { Button } from '$lib/elements/forms';
import {
@@ -45,12 +38,8 @@
</script>
<CardGrid>
<Heading tag="h2" size="6">Payment Methods</Heading>
<p class="text">
View or update your payment methods. These can be applied to any organizations you have
created.
</p>
<svelte:fragment slot="title">Payment Methods</svelte:fragment>
View or update your payment methods. These can be applied to any organizations you have created.
<svelte:fragment slot="aside">
{#if $paymentMethods?.total && filteredMethods?.length > 0}
<Table noMargin noStyles transparent>
@@ -1,7 +1,7 @@
<script lang="ts">
import { invalidate } from '$app/navigation';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { CardGrid, Heading } from '$lib/components';
import { CardGrid } from '$lib/components';
import { Dependencies } from '$lib/constants';
import { Button, Form, FormList, InputPassword, InputText } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
@@ -37,8 +37,7 @@
<Form onSubmit={updateEmail}>
<CardGrid>
<Heading tag="h2" size="7">Email</Heading>
<svelte:fragment slot="title">Email</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
<InputText id="email" label="Email" placeholder="Enter email" bind:value={email} />
@@ -136,7 +136,7 @@
</script>
<CardGrid>
<Heading tag="h2" size="7">Multi-factor authentication</Heading>
<svelte:fragment slot="title">Multi-factor authentication</svelte:fragment>
<svelte:fragment slot="aside">
<div class="u-flex u-flex-vertical u-gap-32">
@@ -36,7 +36,7 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h2" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
@@ -30,10 +30,8 @@
<Form onSubmit={updatePassword}>
<CardGrid>
<Heading tag="h2" size="7">Password</Heading>
<p class="text">
Forgot your password? <a class="link" href={`${base}/recover`}>Recover your password</a>
</p>
<svelte:fragment slot="title">Password</svelte:fragment>
Forgot your password? <a class="link" href={`${base}/recover`}>Recover your password</a>
<svelte:fragment slot="aside">
<FormList>
@@ -41,7 +39,6 @@
id="oldPassword"
label="Old password"
placeholder="Enter password"
showPasswordButton={true}
bind:value={oldPassword} />
<InputPassword
id="newPassword"
@@ -91,11 +91,10 @@
</script>
<CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>
<Heading tag="h2" size="6">
<svelte:fragment slot="title">
{$organization?.billingPlan === BillingPlan.FREE ? 'Credits' : 'Available credit'}
</Heading>
<p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
</svelte:fragment>
Appwrite credit will automatically be applied to your next invoice.
<svelte:fragment slot="aside">
{#if $organization?.billingPlan === BillingPlan.FREE}
<Alert type="info">
@@ -51,12 +51,8 @@
</script>
<CardGrid>
<Heading tag="h2" size="6">Billing address</Heading>
<p class="text">
View or update your billing address. This address will be included in your invoices from
Appwrite.
</p>
<svelte:fragment slot="title">Billing address</svelte:fragment>
View or update your billing address. This address will be included in your invoices from Appwrite.
<svelte:fragment slot="aside">
{#if $organization?.billingAddressId && billingAddress}
<div class="box">
@@ -81,18 +81,15 @@
<Form onSubmit={updateBudget}>
<CardGrid>
<Heading tag="h2" size="6">Billing alerts</Heading>
<p class="text">
{#if !$currentPlan.budgeting}
Get notified by email when your organization meets a percentage of your budget cap. <b
>{tierToPlan($organization.billingPlan).name} organizations will receive one notification
at 75% resource usage.</b>
{:else}
Get notified by email when your organization meets or exceeds a percentage of your
specified billing alert(s).
{/if}
</p>
<svelte:fragment slot="title">Billing alerts</svelte:fragment>
{#if !$currentPlan.budgeting}
Get notified by email when your organization meets a percentage of your budget cap. <b
>{tierToPlan($organization.billingPlan).name} organizations will receive one notification
at 75% resource usage.</b>
{:else}
Get notified by email when your organization meets or exceeds a percentage of your
specified billing alert(s).
{/if}
<svelte:fragment slot="aside">
{#if !$currentPlan.budgeting}
<Alert type="info">
@@ -50,12 +50,9 @@
<Form onSubmit={updateBudget}>
<CardGrid>
<Heading tag="h2" size="6">Budget cap</Heading>
<p class="text">
Restrict your resource usage by setting a budget cap. Cap usage is reset at the
beginning of each billing cycle.
</p>
<svelte:fragment slot="title">Budget Cap</svelte:fragment>
Restrict your resource usage by setting a budget cap. Cap usage is reset at the beginning of
each billing cycle.
<svelte:fragment slot="aside">
{#if !$currentPlan.budgeting}
<Alert type="info">
@@ -68,12 +68,8 @@
</script>
<CardGrid>
<Heading tag="h2" size="6">Payment history</Heading>
<p class="text">
Transaction history for this organization. Download invoices for more details about your
payments.
</p>
<svelte:fragment slot="title">Payment History</svelte:fragment>
Transaction history for this organization. Download invoices for more details about your payments.
<svelte:fragment slot="aside">
{#if invoiceList.total > 0}
<TableScroll noMargin transparent noStyles>
@@ -95,9 +95,8 @@
</script>
<CardGrid>
<Heading tag="h2" size="6" id="paymentMethod">Payment methods</Heading>
<p class="text">View or update your organization payment methods here.</p>
<svelte:fragment slot="title">Payment Methods</svelte:fragment>
View or update your organization payment methods here.
<svelte:fragment slot="aside">
<div class="u-flex u-flex-vertical u-gap-8">
{#if $organization?.paymentMethodId}
@@ -31,12 +31,9 @@
{#if $organization}
<CardGrid>
<Heading tag="h2" size="6">Payment estimates</Heading>
<p class="text">
A breakdown of your estimated upcoming payment for the current billing period. Totals
displayed exclude accumulated credits and applicable taxes.
</p>
<svelte:fragment slot="title">Payment Estimates</svelte:fragment>
A breakdown of your estimated upcoming payment for the current billing period. Totals displayed
exclude accumulated credits and applicable taxes.
<svelte:fragment slot="aside">
<p class="text u-bold">
Billing period: {toLocaleDate($organization?.billingCurrentInvoiceDate)} - {toLocaleDate(
@@ -36,7 +36,7 @@
<Form onSubmit={updateTaxId}>
<CardGrid>
<Heading tag="h2" size="6">Tax ID</Heading>
<svelte:fragment slot="title">Tax ID</svelte:fragment>
Add a tax identification number to your organization.
<svelte:fragment slot="aside">
<FormList>
@@ -2,27 +2,15 @@
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { page } from '$app/stores';
import { AvatarGroup, Heading, Tab, Tabs } from '$lib/components';
import { AvatarGroup, Tab, Tabs } from '$lib/components';
import { BillingPlan } from '$lib/constants';
import { Pill } from '$lib/elements';
import { Button } from '$lib/elements/forms';
import { toLocaleDate } from '$lib/helpers/date';
import { isTabSelected } from '$lib/helpers/load';
import { Cover } from '$lib/layout';
import {
daysLeftInTrial,
getServiceLimit,
plansInfo,
readOnly,
tierToPlan
} from '$lib/stores/billing';
import {
members,
newMemberModal,
newOrgModal,
organization,
organizationList
} from '$lib/stores/organization';
import { daysLeftInTrial, getServiceLimit, plansInfo, readOnly } from '$lib/stores/billing';
import { members, newMemberModal, newOrgModal, organization } from '$lib/stores/organization';
import {
canSeeBilling,
canSeeProjects,
@@ -32,7 +20,7 @@
} from '$lib/stores/roles';
import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
import { Icon, Tooltip, Typography, Layout } from '@appwrite.io/pink-svelte';
let areMembersLimited: boolean;
$: organization.subscribe(() => {
@@ -120,24 +108,24 @@
{/if}
</span>
<div class="u-margin-inline-start-auto">
<div class="u-flex u-gap-16 u-cross-center">
<a href={`${path}/members`} class="is-not-mobile">
<AvatarGroup size="s" {avatars} total={$members?.total ?? 0} />
</a>
<Layout.Stack direction="row" alignItems="center" gap="xl">
{#if $members.total > 1}
<a href={`${path}/members`} class="is-not-mobile">
<AvatarGroup size="xs" {avatars} total={$members?.total ?? 0} />
</a>
{/if}
<div>
{#if $isOwner}
<Button
secondary
size="s"
on:click={() => newMemberModal.set(true)}
disabled={areMembersLimited}>
<Icon icon={IconPlus} size="s" slot="start" />
Invite
</Button>
{/if}
</div>
</div>
{#if $isOwner}
<Button
secondary
size="s"
on:click={() => newMemberModal.set(true)}
disabled={areMembersLimited}>
<Icon icon={IconPlus} size="s" slot="start" />
Invite
</Button>
{/if}
</Layout.Stack>
</div>
</svelte:fragment>
<Tabs>
@@ -51,8 +51,7 @@
{#if $organization}
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<ul>
<InputText
@@ -76,14 +75,10 @@
<Soc2 />
{/if}
<CardGrid danger>
<div>
<Heading tag="h6" size="7">Delete organization</Heading>
</div>
<p>
The organization will be permanently deleted, including all projects and data
associated with this organization. This action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete Organization</svelte:fragment>
The organization will be permanently deleted, including all projects and data associated
with this organization. This action is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="image">
@@ -7,10 +7,8 @@
</script>
<CardGrid>
<div>
<Heading tag="h6" size="7">BAA</Heading>
</div>
<p class="text">After requesting a BAA, we will contact you via email for the next steps.</p>
<svelte:fragment slot="title">BAA</svelte:fragment>
After requesting a BAA, we will contact you via email for the next steps.
<svelte:fragment slot="aside">
<Box>
<h6>
@@ -1,5 +1,5 @@
<script lang="ts">
import { Box, CardGrid, Heading } from '$lib/components';
import { Box, CardGrid } from '$lib/components';
import { Button } from '$lib/elements/forms';
import Soc2Modal from './Soc2Modal.svelte';
@@ -7,10 +7,8 @@
</script>
<CardGrid>
<div>
<Heading tag="h6" size="7">SOC-2</Heading>
</div>
<p class="text">After requesting SOC-2, we will contact you via email for the next steps.</p>
<svelte:fragment slot="title">SOC-2</svelte:fragment>
After requesting SOC-2, we will contact you via email for the next steps.
<svelte:fragment slot="aside">
<Box>
<h6>
@@ -15,16 +15,10 @@
</script>
<CardGrid>
<div>
<Heading tag="h6" size="7">DPA</Heading>
</div>
<p class="text">
After downloading, have the DPA signed by your organization's compliance authority, such as
your CEO or Compliance Manager, and submit it to <a
class="link"
href="mailto:privacy@appwrite.io">privacy@appwrite.io</a
>.
</p>
<svelte:fragment slot="title">DPA</svelte:fragment>
After downloading, have the DPA signed by your organization's compliance authority, such as your
CEO or Compliance Manager, and submit it to
<a class="link" href="mailto:privacy@appwrite.io">privacy@appwrite.io</a>.
<svelte:fragment slot="aside">
<Box>
<h6>
@@ -80,12 +80,9 @@
</div>
<CardGrid>
<Heading tag="h6" size="7">Bandwidth</Heading>
<p class="text">
Calculated for all bandwidth used across all projects in your organization. Resets at
the start of each billing cycle.
</p>
<svelte:fragment slot="title">Bandwidth</svelte:fragment>
Calculated for all bandwidth used across all projects in your organization. Resets at the start
of each billing cycle.
<svelte:fragment slot="aside">
{#if data.organizationUsage.bandwidth}
@@ -147,9 +144,8 @@
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Users</Heading>
<p class="text">The total number of users across all projects in your organization.</p>
<svelte:fragment slot="title">Users</svelte:fragment>
The total number of users across all projects in your organization.
<svelte:fragment slot="aside">
{#if data.organizationUsage.users}
{@const current = data.organizationUsage.usersTotal}
@@ -199,11 +195,8 @@
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Database reads and writes</Heading>
<p class="text">
The total number of database reads and writes across all projects in your organization.
</p>
<svelte:fragment slot="title">Database reads and writes</svelte:fragment>
The total number of database reads and writes across all projects in your organization.
<svelte:fragment slot="aside">
{#if data.organizationUsage.databasesReads || data.organizationUsage.databasesWrites}
<div style:margin-top="-1.5em" style:margin-bottom="-1em">
@@ -260,11 +253,8 @@
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Executions</Heading>
<p class="text">
Calculated for all functions that are executed in all projects in your organization.
</p>
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in all projects in your organization.
<svelte:fragment slot="aside">
{#if data.organizationUsage.executionsTotal}
@@ -317,11 +307,8 @@
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Storage</Heading>
<p class="text">
Calculated for all your files, deployments, builds, databases and backups.
</p>
<svelte:fragment slot="title">Storage</svelte:fragment>
Calculated for all your files, deployments, builds, databases and backups.
<svelte:fragment slot="aside">
{#if data.organizationUsage.storageTotal}
@@ -388,12 +375,9 @@
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">GB hours</Heading>
<p class="text">
GB hours represent the memory usage (in gigabytes) of your function executions and
builds, multiplied by the total execution time (in hours).
</p>
<svelte:fragment slot="title">GB hours</svelte:fragment>
GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied
by the total execution time (in hours).
<svelte:fragment slot="aside">
{#if data.organizationUsage.storageTotal}
@@ -449,15 +433,12 @@
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Phone OTP</Heading>
<p class="text">
OTPs are billed per SMS message, with rates varying by recipient country. For a detailed
cost breakdown, see the <a
href="https://appwrite.io/docs/advanced/platform/phone-otp"
class="link">pricing page</a
>.
</p>
<p>You will not be charged for Phone OTPs before February 10th.</p>
<svelte:fragment slot="title">Phone OTP</svelte:fragment>
OTPs are billed per SMS message, with rates varying by recipient country. For a detailed cost
breakdown, see the
<a href="https://appwrite.io/docs/advanced/platform/phone-otp" class="link">pricing page</a
>.<br />
You will not be charged for Phone OTPs before February 10th.
<svelte:fragment slot="aside">
{#if data.organizationUsage.authPhoneTotal}
<div class="u-flex u-main-space-between">
@@ -27,9 +27,8 @@
</script>
<CardGrid>
<Heading tag="h6" size="7">Members</Heading>
<p class="text">The number of members in your organization.</p>
<svelte:fragment slot="title">Members</svelte:fragment>
The number of members in your organization.
<svelte:fragment slot="aside">
{#if $organization.billingPlan !== BillingPlan.FREE}
<div class="u-flex u-flex-vertical">
@@ -53,7 +53,7 @@
<SearchQuery search={data.search} placeholder="Search by name, email, phone, or ID" />
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector view={View.Table} {columns} hideView allowNoColumns showColsTextMobile />
<ViewSelector view={View.Table} {columns} hideView allowNoColumns />
<Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
<Icon size="s" icon={IconPlus} slot="start" />
<span class="text">Create user</span>
@@ -124,12 +124,12 @@
type={success ? 'success' : undefined}
content={user.emailVerification &&
user.phoneVerification
? 'verified'
? 'Verified'
: user.emailVerification
? 'verified email'
? 'Verified email'
: user.phoneVerification
? 'verified phone'
: 'unverified'} />
? 'Verified phone'
: 'Unverified'} />
{:else}
<Badge
size="xs"
@@ -40,10 +40,8 @@
<Form onSubmit={updateMembershipsPrivacy}>
<CardGrid>
<Heading tag="h2" size="7" id="personal-data">Memberships privacy</Heading>
<Typography.Text>
Set privacy preferences to manage which details team members can view about one another.
</Typography.Text>
<svelte:fragment slot="title">Memberships Privacy</svelte:fragment>
Set privacy preferences to manage which details team members can view about one another.
<svelte:fragment slot="aside">
<Selector.Checkbox
id="membershipsUserName"
@@ -82,17 +82,15 @@
<Form onSubmit={updateMockNumbers}>
<CardGrid hideFooter={isComponentDisabled}>
<Heading tag="h6" size="7" id="variables">Mock phone numbers</Heading>
<p>
Generate <b>fictional</b> numbers to simulate phone verification when testing demo
accounts for submitting your application to the App Store or Google Play.
<a
href="https://appwrite.io/docs/products/auth/security#mock-phone-numbers"
target="_blank"
class="u-underline"
rel="noopener noreferrer">
Learn more</a>
</p>
<svelte:fragment slot="title">Mock Phone Numbers</svelte:fragment>
Generate <b>fictional</b> numbers to simulate phone verification when testing demo accounts
for submitting your application to the App Store or Google Play.
<a
href="https://appwrite.io/docs/products/auth/security#mock-phone-numbers"
target="_blank"
class="u-underline"
rel="noopener noreferrer">
Learn more</a>
<svelte:fragment slot="aside">
{#if isComponentDisabled}
<EmptyCardImageCloud source="email_signature_card" noAspectRatio>
@@ -35,7 +35,7 @@
<Form onSubmit={updatePasswordDictionary}>
<CardGrid>
<Heading tag="h2" size="7" id="password-dictionary">Password dictionary</Heading>
<svelte:fragment slot="title">Password Dictionary</svelte:fragment>
<svelte:fragment slot="aside">
<InputSwitch
bind:value={passwordDictionary}
@@ -38,7 +38,7 @@
<Form onSubmit={updatePasswordHistoryLimit}>
<CardGrid>
<Heading tag="h2" size="7" id="password-history">Password history</Heading>
<svelte:fragment slot="title">Password History</svelte:fragment>
<svelte:fragment slot="aside">
<InputSwitch
bind:value={passwordHistoryEnabled}
@@ -35,7 +35,7 @@
<Form onSubmit={updatePersonalDataCheck}>
<CardGrid>
<Heading tag="h2" size="7" id="personal-data">Personal data</Heading>
<svelte:fragment slot="title">Personal Data</svelte:fragment>
<svelte:fragment slot="aside">
<InputSwitch
bind:value={authPersonalDataCheck}
@@ -32,7 +32,7 @@
<Form onSubmit={updateSessionAlerts}>
<CardGrid>
<Heading tag="h2" size="7" id="personal-data">Session alerts</Heading>
<svelte:fragment slot="title">Session Alerts</svelte:fragment>
<svelte:fragment slot="aside">
<InputSwitch
bind:value={authSessionAlerts}
@@ -34,11 +34,8 @@
</script>
<CardGrid>
<Heading tag="h2" size="7" id="session-length">Session length</Heading>
<p>
If you reduce the limit, users who are currently logged in will be logged out of the
application.
</p>
<svelte:fragment slot="title">Session Length</svelte:fragment>
If you reduce the limit, users who are currently logged in will be logged out of the application.
<svelte:fragment slot="aside">
<Layout.Stack direction="row">
<InputNumber id="length" label="Length" bind:value={$value} min={0} />
@@ -33,7 +33,7 @@
<Form onSubmit={updateSessionsLimit}>
<CardGrid>
<Heading tag="h2" size="7" id="sessions-limit">Sessions limit</Heading>
<svelte:fragment slot="title">Sessions limit</svelte:fragment>
<Typography.Text>
<p>Maximum number of active sessions allowed per user.</p>
</Typography.Text>
@@ -55,12 +55,9 @@
</script>
<CardGrid>
<Heading tag="h2" size="7" id="users-limit">Users limit</Heading>
<Typography.Text>
Limit new users from signing up for your project, regardless of authentication method. You
can still create users and team memberships from your Appwrite console.
</Typography.Text>
<svelte:fragment slot="title">Users Limit</svelte:fragment>
Limit new users from signing up for your project, regardless of authentication method. You can still
create users and team memberships from your Appwrite console.
<svelte:fragment slot="aside">
<Layout.Stack>
<Layout.Stack direction="row" alignItems="center">
@@ -47,8 +47,8 @@
{#if $authMethods && $project}
<Container>
<CardGrid>
<Heading tag="h2" size="7">Auth methods</Heading>
<Typography.Text>Enable the authentication methods you wish to use.</Typography.Text>
<svelte:fragment slot="title">Auth Methods</svelte:fragment>
Enable the authentication methods you wish to use.
<svelte:fragment slot="aside">
<Layout.Stack gap="l" direction="row" wrap="wrap">
{#each $authMethods.list as box}
@@ -7,15 +7,10 @@
let showDelete = false;
</script>
<CardGrid danger>
<div>
<Heading tag="h6" size="7">Delete team</Heading>
</div>
<p>
The team will be permanently deleted, including all data associated with this team. This
action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete Team</svelte:fragment>
The team will be permanently deleted, including all data associated with this team. This action is
irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="image">
@@ -37,8 +37,7 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<ul>
<InputText
@@ -58,11 +58,9 @@
<Form onSubmit={updatePrefs}>
<CardGrid>
<Heading tag="h6" size="7">Preferences</Heading>
<p>
You can update your team's preferences by storing shared information on the teams's
objects so they can easily be shared across members.
</p>
<svelte:fragment slot="title">Preferences</svelte:fragment>
You can update your team's preferences by storing shared information on the teams's objects so
they can easily be shared across members.
<svelte:fragment slot="aside">
{#if prefs}
{#each prefs as [key, value], index}
@@ -124,14 +124,11 @@
{/if}
<CardGrid>
<Heading size="7" tag="h3">Email templates</Heading>
<p class="text">
Use templates to send and process account management emails. <a
href="https://appwrite.io/docs/advanced/platform/message-templates"
class="link">
Learn more about email templates.
</a>
</p>
<svelte:fragment slot="title">Email Templates</svelte:fragment>
Use templates to send and process account management emails.
<a href="https://appwrite.io/docs/advanced/platform/message-templates" class="link">
Learn more about email templates.
</a>
<svelte:fragment slot="aside">
<Collapsible>
@@ -11,8 +11,8 @@
</script>
<CardGrid>
<Heading size="7" tag="h3">Email signature</Heading>
<p class="text">Enable or disable Appwrite branding in your email template signature.</p>
<svelte:fragment slot="title">Email Signature</svelte:fragment>
Enable or disable Appwrite branding in your email template signature.
<svelte:fragment slot="aside">
<EmptyCardImageCloud source="email_signature_card" let:nextTier noAspectRatio>
@@ -22,14 +22,10 @@
$: accessedAt = ($user as unknown as { accessedAt: string }).accessedAt;
</script>
<CardGrid danger>
<div>
<Heading tag="h6" size="7">Delete user</Heading>
</div>
<p>
The user will be permanently deleted, including all data associated with this user. This
action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete User</svelte:fragment>
The user will be permanently deleted, including all data associated with this user. This action is
irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="image">
@@ -35,12 +35,9 @@
<Form onSubmit={updateEmail}>
<CardGrid>
<Heading tag="h6" size="7">Email</Heading>
<p>
Update user's email. An Email should be formatted as: <span class="inline-code"
>name@example.com</span
>.
</p>
<svelte:fragment slot="title">Email</svelte:fragment>
Update user's email. An Email should be formatted as:
<span class="inline-code">name@example.com</span>.
<svelte:fragment slot="aside">
<ul>
<InputEmail
@@ -63,11 +63,9 @@
<Form onSubmit={updateLabels}>
<CardGrid>
<Heading tag="h6" size="7">Labels</Heading>
<p class="text">
Categorize and manage your users based on specific criteria by assigning them
customizable labels. New label-based roles will be assigned.
</p>
<svelte:fragment slot="title">Labels</svelte:fragment>
Categorize and manage your users based on specific criteria by assigning them customizable labels.
New label-based roles will be assigned.
<svelte:fragment slot="aside">
<ul class="common-section">
<InputTags
@@ -51,8 +51,8 @@
<Form onSubmit={updateMfa}>
<CardGrid>
<Heading tag="h6" size="7">Multi-factor authentication</Heading>
<p class="text">MFA allows users to enhance the security of their accounts in your app.</p>
<svelte:fragment slot="title">Multi-factor Authentication</svelte:fragment>
MFA allows users to enhance the security of their accounts in your app.
<svelte:fragment slot="aside">
<FormList>
<InputChoice
@@ -35,8 +35,7 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<ul data-private>
<InputText
@@ -29,11 +29,8 @@
<Form onSubmit={updatePassword}>
<CardGrid>
<div>
<Heading tag="h6" size="7">Password</Heading>
</div>
<p>Enter a new password. A password must contain at least 8 characters.</p>
<svelte:fragment slot="title">Password</svelte:fragment>
Enter a new password. A password must contain at least 8 characters.
<svelte:fragment slot="aside">
<ul>
<InputPassword
@@ -35,11 +35,9 @@
<Form onSubmit={updatePhone}>
<CardGrid>
<Heading tag="h6" size="7">Phone</Heading>
<p>
Update user's phone. Phone number must start with '+' and maximum of 15 digits, for
example: +14155552671.
</p>
<svelte:fragment slot="title">Phone</svelte:fragment>
Update user's phone. Phone number must start with '+' and maximum of 15 digits, for example:
+14155552671.
<svelte:fragment slot="aside">
<ul>
<InputPhone
@@ -54,8 +54,8 @@
<Form onSubmit={updatePrefs}>
<CardGrid>
<Heading tag="h6" size="7">Preferences</Heading>
<p>Add custom user preferences to share them across devices and sessions.</p>
<svelte:fragment slot="title">Preferences</svelte:fragment>
Add custom user preferences to share them across devices and sessions.
<svelte:fragment slot="aside">
{#if prefs}
{#each prefs as [key, value], index}
@@ -57,7 +57,7 @@
<Container>
<CardGrid>
<Heading tag="h2" size="7">Metadata</Heading>
<svelte:fragment slot="title">Metadata</svelte:fragment>
<svelte:fragment slot="aside">
<div>
<p>Created: {toLocaleDateTime($doc.$createdAt)}</p>
@@ -66,19 +66,16 @@
</svelte:fragment>
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Permissions</Heading>
<p>
A user requires appropriate permissions at either the <b>collection level</b> or
<b>document level</b> to access a document. If no permissions are configured, no user
can access the document
<a
href="https://appwrite.io/docs/products/databases/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more about database permissions</a
>.
</p>
<svelte:fragment slot="title">Permissions</svelte:fragment>
A user requires appropriate permissions at either the <b>collection level</b> or
<b>document level</b> to access a document. If no permissions are configured, no user can
access the document
<a
href="https://appwrite.io/docs/products/databases/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more about database permissions</a
>.
<svelte:fragment slot="aside">
{#if $collection.documentSecurity}
{#if showPermissionAlert}
@@ -115,12 +112,9 @@
</svelte:fragment>
</CardGrid>
<CardGrid danger>
<Heading tag="h6" size="7">Delete document</Heading>
<p>
The document will be permanently deleted, including all the data within it. This action
is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete Document</svelte:fragment>
The document will be permanently deleted, including all the data within it. This action is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="title">
@@ -119,7 +119,7 @@
{#each $collection.attributes as attribute}
{@const label = attribute.key}
<CardGrid>
<Heading tag="h6" size="7">{label}</Heading>
<svelte:fragment slot="title">{label}</svelte:fragment>
<svelte:fragment slot="aside">
<AttributeItem {attribute} bind:formValues={$work} {label} {editing} />
</svelte:fragment>
@@ -79,8 +79,8 @@
</script>
<CardGrid>
<Heading tag="h6" size="7">Data</Heading>
<p>Update document data based on the attributes created earlier.</p>
<svelte:fragment slot="title">Data</svelte:fragment>
Update document data based on the attributes created earlier.
<svelte:fragment slot="aside">
<AttributeForm attributes={$collection.attributes} bind:formValues={$work} gap="16" />
</svelte:fragment>
@@ -8,12 +8,10 @@
let showDelete = false;
</script>
<CardGrid danger>
<Heading tag="h6" size="7">Delete collection</Heading>
<p>
The collection will be permanently deleted, including all the documents within it. This
action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete Collection</svelte:fragment>
The collection will be permanently deleted, including all the documents within it. This action is
irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="title">
@@ -57,12 +57,10 @@
<Form onSubmit={updateDisplayName}>
<CardGrid>
<Heading tag="h6" size="7" id="display-name">Display name</Heading>
<p class="text">
Select string attributes as display names for your documents. The selected names will be
used as short forms to identify documents in the Appwrite console, like when creating
database relationships. You can specify up to 5 names.
</p>
<svelte:fragment slot="title">Display Name</svelte:fragment>
Select string attributes as display names for your documents. The selected names will be used
as short forms to identify documents in the Appwrite console, like when creating database relationships.
You can specify up to 5 names.
<svelte:fragment slot="aside">
<div class="u-flex u-flex-vertical u-gap-4">
@@ -46,8 +46,7 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<ul>
<InputText
@@ -56,16 +56,15 @@
</script>
<CardGrid>
<Heading tag="h6" size="7" id="permissions">Permissions</Heading>
<p class="text">
Choose who can access your collection and documents. For more about <a
href="https://appwrite.io/docs/products/databases/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">
Permissions
</a>.
</p>
<svelte:fragment slot="title">Permissions</svelte:fragment>
Choose who can access your collection and documents. For more about
<a
href="https://appwrite.io/docs/products/databases/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">
Permissions
</a>.
<svelte:fragment slot="aside">
{#if collectionPermissions}
<Permissions bind:permissions={collectionPermissions} withCreate />
@@ -45,7 +45,7 @@
</script>
<CardGrid>
<Heading tag="h6" size="7" id="document-security">Document security</Heading>
<svelte:fragment slot="title">Document Security</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
<InputSwitch
@@ -46,8 +46,7 @@
</script>
<CardGrid>
<Heading tag="h2" size="7">{$collection.name}</Heading>
<svelte:fragment slot="title">{$collection.name}</svelte:fragment>
<svelte:fragment slot="aside">
<ul>
<InputSwitch
@@ -71,8 +71,7 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<ul>
<InputText
@@ -96,15 +95,10 @@
</CardGrid>
</Form>
<CardGrid danger>
<div>
<Heading tag="h6" size="7">Delete database</Heading>
</div>
<p>
The database will be permanently deleted, including all collections within it. This
action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete Database</svelte:fragment>
The database will be permanently deleted, including all collections within it. This action
is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="title">
@@ -136,12 +136,10 @@
</div>
{#if !data.activeDeployment}
<CardGrid danger>
<Heading tag="h6" size="7">Delete deployment</Heading>
<p>
The deployment will be permanently deleted, including all data associated with it.
This action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete Deployment</svelte:fragment>
The deployment will be permanently deleted, including all data associated with it. This action
is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<p>Last updated: {toLocaleDateTime($func.$updatedAt)}</p>
@@ -1,6 +1,5 @@
<script lang="ts">
import { BoxAvatar, CardGrid } from '$lib/components';
import Heading from '$lib/components/heading.svelte';
import { Button } from '$lib/elements/forms';
import { toLocaleDateTime } from '$lib/helpers/date';
import Delete from './deleteModal.svelte';
@@ -10,12 +9,10 @@
let showDelete = false;
</script>
<CardGrid danger>
<Heading tag="h6" size="7">Delete function</Heading>
<p>
The function will be permanently deleted, including all deployments associated with it. This
action is irreversible.
</p>
<CardGrid>
<svelte:fragment slot="title">Delete Function</svelte:fragment>
The function will be permanently deleted, including all deployments associated with it. This action
is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="title">
@@ -168,16 +168,13 @@
<Form onSubmit={updateConfiguration}>
<CardGrid>
<Heading tag="h6" size="7">Configuration</Heading>
<p class="text">
Connect a Git repository for automatic deployments, or set install and build commands
for your function.
</p>
<svelte:fragment slot="title">Configuration</svelte:fragment>
Connect a Git repository for automatic deployments, or set install and build commands for your
function.
<svelte:fragment slot="aside">
<FormList>
<InputText
required
hideRequired
label="Entrypoint"
id="Entrypoint"
placeholder="Enter an entrypoint (e.g. 'index.js')"
@@ -95,8 +95,8 @@
<Form onSubmit={updateEvents}>
<CardGrid>
<Heading tag="h6" size="7" id="events">Events</Heading>
<p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
<svelte:fragment slot="title">Events</svelte:fragment>
Set the events that will trigger your function. Maximum 100 events allowed.
<svelte:fragment slot="aside">
{#if $eventSet.size}
<TableList>
@@ -67,11 +67,8 @@
<Form onSubmit={updateLogging}>
<CardGrid>
<Heading tag="h6" size="7">Execution logs</Heading>
<p>
Enable or disable execution logs. We recommend disabling them for better performance in
production.
</p>
<svelte:fragment slot="title">Execution Logs</svelte:fragment>
Enable or disable execution logs. We recommend disabling them for better performance in production.
<svelte:fragment slot="aside">
<FormList>
<InputSwitch label="Logs" id="logging" bind:value={functionLogging}>
@@ -61,8 +61,7 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<ul>
<InputText
@@ -71,16 +71,15 @@
<Form onSubmit={updatePermissions}>
<CardGrid>
<Heading tag="h6" size="7" id="permissions">Execute access</Heading>
<p>
Choose who can execute this function using the client API. Learn more about <a
href="https://appwrite.io/docs/advanced/platform/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">
Permissions
</a>.
</p>
<svelte:fragment slot="title">Execute Access</svelte:fragment>
Choose who can execute this function using the client API. Learn more about
<a
href="https://appwrite.io/docs/advanced/platform/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">
Permissions
</a>.
<svelte:fragment slot="aside">
<Roles bind:roles={permissions} />
</svelte:fragment>
@@ -90,8 +90,7 @@
<Form onSubmit={updateRuntime}>
<CardGrid>
<Heading tag="h6" size="7">Runtime</Heading>
<svelte:fragment slot="title">Runtime</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
<InputSelect
@@ -61,16 +61,15 @@
<Form onSubmit={updateSchedule}>
<CardGrid>
<Heading tag="h6" size="7" id="schedule">Schedule</Heading>
<p>
Set a Cron schedule to trigger your function. Leave blank for no schedule. <a
href="https://appwrite.io/docs/products/functions/execution#schedule"
target="_blank"
rel="noopener noreferrer"
class="link">
More details on Cron syntax here</a
>.
</p>
<svelte:fragment slot="title">Schedule</svelte:fragment>
Set a Cron schedule to trigger your function. Leave blank for no schedule.
<a
href="https://appwrite.io/docs/products/functions/execution#schedule"
target="_blank"
rel="noopener noreferrer"
class="link">
More details on Cron syntax here</a
>.
<svelte:fragment slot="aside">
<FormList>
<InputCron
@@ -65,16 +65,15 @@
<Form onSubmit={updateScopes}>
<CardGrid>
<Heading tag="h6" size="7">Scopes</Heading>
<p class="text">
Select scopes to grant the dynamic key generated temporarily for your function. It is
best practice to allow only necessary permissions. <a
href="https://appwrite.io/docs/advanced/platform/api-keys#scopes"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
<svelte:fragment slot="title">Scopes</svelte:fragment>
Select scopes to grant the dynamic key generated temporarily for your function. It is best practice
to allow only necessary permissions.
<a
href="https://appwrite.io/docs/advanced/platform/api-keys#scopes"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
<svelte:fragment slot="aside">
{#if functionScopes !== null}
<Scopes bind:scopes={functionScopes} />
@@ -61,8 +61,8 @@
<Form onSubmit={updateTimeout}>
<CardGrid>
<Heading tag="h6" size="7" id="timeout">Timeout</Heading>
<p>Limit the execution time of your function. Maximum value is 900 seconds (15 minutes).</p>
<svelte:fragment slot="title">Timeout</svelte:fragment>
Limit the execution time of your function. Maximum value is 900 seconds (15 minutes).
<svelte:fragment slot="aside">
<FormList>
<InputNumber
@@ -11,12 +11,10 @@
</script>
<CardGrid>
<Heading tag="h6" size="7">Delete message</Heading>
<p>
The message will be permanently deleted{message.status === 'scheduled'
? ', and its delivery will be canceled'
: ''}. This action is irreversible.
</p>
<svelte:fragment slot="title">Delete Message</svelte:fragment>
The message will be permanently deleted{message.status === 'scheduled'
? ', and its delivery will be canceled'
: ''}. This action is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="title">
@@ -66,9 +66,7 @@
<Form onSubmit={update}>
<CardGrid hideFooter={!isDraft}>
<div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
<Heading tag="h6" size="7">Message</Heading>
</div>
<svelte:fragment slot="title">Message</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
<InputText id="subject" label="Subject" disabled={!isDraft} bind:value={subject}
@@ -21,11 +21,9 @@
import { base } from '$app/paths';
</script>
<CardGrid danger>
<div>
<Heading tag="h6" size="7">Delete provider</Heading>
</div>
<p>The provider's instance will be permanently deleted. This action is irreversible.</p>
<CardGrid>
<svelte:fragment slot="title">Delete Provider</svelte:fragment>
The provider's instance will be permanently deleted. This action is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="title">
@@ -101,8 +101,7 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<ul data-private>
<InputText
@@ -218,18 +218,14 @@
<Form onSubmit={update}>
<CardGrid>
<div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
<Heading tag="h6" size="7">Settings</Heading>
</div>
<p>
Configure the settings to <Button
link
href={`https://appwrite.io/docs/products/messaging/${provider}`}
external>enable {displayName}</Button> to send {message}, or <Button
link
on:click={() => (newMemberModal = true)}>invite a team member</Button> to complete the
provider settings.
</p>
<svelte:fragment slot="title">Settings</svelte:fragment>
Configure the settings to <Button
link
href={`https://appwrite.io/docs/products/messaging/${provider}`}
external>enable {displayName}</Button> to send {message}, or <Button
link
on:click={() => (newMemberModal = true)}>invite a team member</Button> to complete the provider
settings.
<svelte:fragment slot="aside">
<!-- Must wait until ready or else the files input won't be set properly -->
{#if ready}
@@ -85,9 +85,7 @@
<Container>
{@const accessedAt = $key.accessedAt ? toLocaleDate($key.accessedAt) : 'never'}
<CardGrid>
<div data-private>
<Heading tag="h6" size="7">{$key.name}</Heading>
</div>
<svelte:fragment slot="title">{$key.name}</svelte:fragment>
<svelte:fragment slot="aside">
<p>
Last accessed: {accessedAt}<br />
@@ -97,7 +95,7 @@
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">API key secret</Heading>
<svelte:fragment slot="title">API Key Secret</svelte:fragment>
<svelte:fragment slot="aside">
<Secret copyEvent="key" bind:value={secret} />
</svelte:fragment>
@@ -105,8 +103,8 @@
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<p class="text">Choose any name that will help you distinguish between API keys.</p>
<svelte:fragment slot="title">Name</svelte:fragment>
Choose any name that will help you distinguish between API keys.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -125,11 +123,9 @@
</Form>
<Form onSubmit={updateScopes}>
<CardGrid>
<Heading tag="h6" size="7">Scopes</Heading>
<p class="text">
You can choose which permission scope to grant your application. It is a best
practice to allow only the permissions you need to meet your project goals.
</p>
<svelte:fragment slot="title">Scopes</svelte:fragment>
You can choose which permission scope to grant your application. It is a best practice to
allow only the permissions you need to meet your project goals.
<svelte:fragment slot="aside">
{#if scopes !== null}
<Scopes bind:scopes />
@@ -148,11 +144,9 @@
<UpdateExpirationDate />
<CardGrid danger>
<div>
<Heading tag="h6" size="7">Delete API key</Heading>
</div>
<p>The API key will be permanently deleted. This action is irreversible.</p>
<CardGrid>
<svelte:fragment slot="title">Delete API Key</svelte:fragment>
The API key will be permanently deleted. This action is irreversible.
<svelte:fragment slot="aside">
<Box>
<div class="u-flex u-gap-16">
@@ -45,8 +45,8 @@
<Form onSubmit={updateExpire}>
<CardGrid>
<Heading tag="h6" size="7">Expiration date</Heading>
<p class="text">Set a date after which your API key will expire.</p>
<svelte:fragment slot="title">Expiration Date</svelte:fragment>
Set a date after which your API key will expire.
<svelte:fragment slot="aside">
{#if isExpired}
<Alert type="error" dismissible on:dismiss={() => (alertsDismissed = true)}>
@@ -71,8 +71,8 @@
<Container>
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<p class="text">Choose any name that will help you distinguish between platforms.</p>
<svelte:fragment slot="title">Name</svelte:fragment>
Choose any name that will help you distinguish between platforms.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -92,11 +92,9 @@
<svelte:component this={types[$platform.type]} />
<CardGrid danger>
<div>
<Heading tag="h6" size="7">Delete platform</Heading>
</div>
<p>The Platform will be permanently deleted. This action is irreversible.</p>
<CardGrid>
<svelte:fragment slot="title">Delete Platform</svelte:fragment>
The Platform will be permanently deleted. This action is irreversible.
<svelte:fragment slot="aside">
<Box>
<div class="u-flex u-gap-16">
@@ -46,10 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Package name</Heading>
<p class="text">
Your package name is generally the applicationId in your app-level build.gradle file.
</p>
<svelte:fragment slot="title">Package Name</svelte:fragment>
Your package name is generally the applicationId in your app-level build.gradle file.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,11 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Bundle ID</Heading>
<p class="text">
You can find your Bundle Identifier in the General tab for your app's primary target in
Xcode.
</p>
<svelte:fragment slot="title">Bundle ID</svelte:fragment>
You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,11 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Bundle ID</Heading>
<p class="text">
You can find your Bundle Identifier in the General tab for your app's primary target in
Xcode.
</p>
<svelte:fragment slot="title">Bundle ID</svelte:fragment>
You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,11 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Bundle ID</Heading>
<p class="text">
You can find your Bundle Identifier in the General tab for your app's primary target in
Xcode.
</p>
<svelte:fragment slot="title">Bundle ID</svelte:fragment>
You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,11 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Bundle ID</Heading>
<p class="text">
You can find your Bundle Identifier in the General tab for your app's primary target in
Xcode.
</p>
<svelte:fragment slot="title">Bundle ID</svelte:fragment>
You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,10 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Package name</Heading>
<p class="text">
Your package name is generally the applicationId in your app-level build.gradle file.
</p>
<svelte:fragment slot="title">Package Name</svelte:fragment>
Your package name is generally the applicationId in your app-level build.gradle file.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,11 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Bundle ID</Heading>
<p class="text">
You can find your Bundle Identifier in the General tab for your app's primary target in
Xcode.
</p>
<svelte:fragment slot="title">Bundle ID</svelte:fragment>
You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,8 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Package name</Heading>
<p class="text">Your application name.</p>
<svelte:fragment slot="title">Package Name</svelte:fragment>
Your application name.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,11 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Bundle ID</Heading>
<p class="text">
You can find your Bundle Identifier in the General tab for your app's primary target in
Xcode.
</p>
<svelte:fragment slot="title">Bundle ID</svelte:fragment>
You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -46,8 +46,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Package name</Heading>
<p class="text">Your application name.</p>
<svelte:fragment slot="title">Package Name</svelte:fragment>
Your application name.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -41,8 +41,8 @@
<Form onSubmit={updateHostname}>
<CardGrid>
<Heading tag="h6" size="7">Hostname</Heading>
<p class="text">You can use * to allow wildcard hostnames or subdomains.</p>
<svelte:fragment slot="title">Hostname</svelte:fragment>
You can use * to allow wildcard hostnames or subdomains.
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -87,9 +87,8 @@
isGlobal={true}
variableList={data.variables} />
<CardGrid>
<Heading tag="h6" size="7">Transfer project</Heading>
<p class="text">Transfer your project to another organization that you own.</p>
<svelte:fragment slot="title">Transfer Project</svelte:fragment>
Transfer your project to another organization that you own.
<svelte:fragment slot="aside">
<FormList>
<InputSelect
@@ -43,13 +43,9 @@
</script>
<CardGrid>
<div>
<Heading tag="h6" size="7">Delete project</Heading>
</div>
<p>
The project will be permanently deleted, including all the metadata, resources and stats
within it. This action is irreversible.
</p>
<svelte:fragment slot="title">Delete Project</svelte:fragment>
The project will be permanently deleted, including all the metadata, resources and stats within it.
This action is irreversible.
<svelte:fragment slot="aside">
<BoxAvatar>
<svelte:fragment slot="title">
@@ -134,16 +134,15 @@
<Container>
<CardGrid>
<Heading tag="h3" size="7">Import project data</Heading>
<p class="text">
Import data from another platform or from a different Appwrite instance. <a
class="link"
href="https://appwrite.io/docs/advanced/migrations"
target="_blank"
rel="noopener noreferrer">
Learn about which platforms are supported</a
>.
</p>
<svelte:fragment slot="title">Import Project Data</svelte:fragment>
Import data from another platform or from a different Appwrite instance.
<a
class="link"
href="https://appwrite.io/docs/advanced/migrations"
target="_blank"
rel="noopener noreferrer">
Learn about which platforms are supported</a
>.
<svelte:fragment slot="aside">
{#if data.migrations.length}
<div class="u-flex">
@@ -230,15 +229,14 @@
</CardGrid>
{#if isSelfHosted}
<CardGrid>
<Heading tag="h3" size="7">Deploy to Cloud</Heading>
<p class="text">
Export data from your project to Appwrite Cloud. <a
class="link"
href="https://appwrite.io/docs/advanced/migrations/self-hosted"
target="_blank"
rel="noopener noreferrer">
Learn more in our documentation.</a>
</p>
<svelte:fragment slot="title">Deploy To Cloud</svelte:fragment>
Export data from your project to Appwrite Cloud.
<a
class="link"
href="https://appwrite.io/docs/advanced/migrations/self-hosted"
target="_blank"
rel="noopener noreferrer">
Learn more in our documentation.</a>
<svelte:fragment slot="aside">
<div class="import-box">
<div class="u-flex u-cross-center u-gap-8">
@@ -258,15 +256,14 @@
</CardGrid>
{:else}
<CardGrid>
<Heading tag="h3" size="7">Export to self-hosted instance</Heading>
<p class="text">
Export data from your project to a self-hosted instance. <a
class="link"
href="https://appwrite.io/docs/advanced/migrations/self-hosted"
target="_blank"
rel="noopener noreferrer">
Learn more in our documentation.</a>
</p>
<svelte:fragment slot="title">Export To Self-hosted Instance</svelte:fragment>
Export data from your project to a self-hosted instance.
<a
class="link"
href="https://appwrite.io/docs/advanced/migrations/self-hosted"
target="_blank"
rel="noopener noreferrer">
Learn more in our documentation.</a>
<svelte:fragment slot="aside">
<div class="import-box">
<div class="u-flex u-cross-center u-gap-8">
@@ -124,13 +124,9 @@
<Container>
<Form onSubmit={updateSmtp}>
<CardGrid>
<Heading tag="h6" size="7">SMTP server</Heading>
<p class="text">
You can customize the email service by providing your own SMTP server. View your
email templates <a
href={`${base}/project-${$project.$id}/auth/templates`}
class="link">here</a>
</p>
<svelte:fragment slot="title">SMTP Server</svelte:fragment>
You can customize the email service by providing your own SMTP server. View your email templates
<a href={`${base}/project-${$project.$id}/auth/templates`} class="link">here</a>
<svelte:fragment slot="aside">
{#if $organization.billingPlan === BillingPlan.FREE}
<Alert type="info">
@@ -90,11 +90,8 @@
</script>
<CardGrid>
<Heading tag="h6" size="7">Git configuration</Heading>
<p class="text">
Add a Git installation to your project. You can connect a repository in your function
settings.
</p>
<svelte:fragment slot="title">Git Configuration</svelte:fragment>
Add a Git installation to your project. You can connect a repository in your function settings.
<svelte:fragment slot="aside">
{#if total > 0}
<div>
@@ -41,11 +41,11 @@
</script>
<CardGrid>
<Heading tag="h6" size="7">API credentials</Heading>
<p class="text">Access Appwrite services using this project's API Endpoint and Project ID.</p>
<svelte:fragment slot="title">API Credentials</svelte:fragment>
Access Appwrite services using this project's API Endpoint and Project ID.
<svelte:fragment slot="aside">
<CopyInput label="Project ID" showLabel={true} value={$project.$id} />
<CopyInput label="API Endpoint" showLabel={true} value={endpoint} />
<CopyInput label="Project ID" value={$project.$id} />
<CopyInput label="API Endpoint" value={endpoint} />
</svelte:fragment>
<svelte:fragment slot="actions">
<Button
@@ -59,8 +59,7 @@
{#if $canWriteProjects}
<Form onSubmit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="title">Name</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
<InputText
@@ -81,11 +81,9 @@
</script>
<CardGrid>
<Heading tag="h6" size="7">Services</Heading>
<p class="text">
Choose services you wish to enable or disable for the client API. When disabled, the
services are not accessible to client SDKs but remain accessible to server SDKs.
</p>
<svelte:fragment slot="title">Services</svelte:fragment>
Choose services you wish to enable or disable for the client API. When disabled, the services are
not accessible to client SDKs but remain accessible to server SDKs.
<svelte:fragment slot="aside">
<Layout.Stack>
<Layout.Stack direction="row" justifyContent="flex-end">
@@ -111,11 +111,8 @@
</div>-->
</div>
<CardGrid>
<Heading tag="h4" size="7">Bandwidth</Heading>
<p class="text">
Calculated for all bandwidth used across your project. Resets at the start of each
billing cycle.
</p>
<svelte:fragment slot="title">Bandwidth</svelte:fragment>
Calculated for all bandwidth used across your project. Resets at the start of each billing cycle.
<svelte:fragment slot="aside">
{#if network}
{@const humanized = humanFileSize(total(network))}
@@ -160,10 +157,8 @@
</svelte:fragment>
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Users</Heading>
<p class="text">Total user in your project.</p>
<svelte:fragment slot="title">Users</svelte:fragment>
Total user in your project.
<svelte:fragment slot="aside">
{#if users}
{@const current = formatNum(usersTotal)}
@@ -203,10 +198,8 @@
</svelte:fragment>
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Database reads and writes</Heading>
<p class="text">Total database reads and writes in your project.</p>
<svelte:fragment slot="title">Database Reads And Writes</svelte:fragment>
Total database reads and writes in your project.
<svelte:fragment slot="aside">
{#if dbReads || dbWrites}
<div style:margin-top="-1.5em" style:margin-bottom="-1em">
@@ -245,12 +238,8 @@
</svelte:fragment>
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Executions</Heading>
<p class="text">
Calculated for all functions that are executed in all projects in your project.
</p>
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in all projects in your project.
<svelte:fragment slot="aside">
{#if executions}
{@const current = formatNum(executionsTotal)}
@@ -315,12 +304,8 @@
</svelte:fragment>
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Storage</Heading>
<p class="text">
Calculated for all your files, deployments, builds, databases and backups.
</p>
<svelte:fragment slot="title">Storage</svelte:fragment>
Calculated for all your files, deployments, builds, databases and backups.
<svelte:fragment slot="aside">
{#if storage}
{@const humanized = humanFileSize(storage)}
@@ -376,12 +361,9 @@
</svelte:fragment>
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">GB hours</Heading>
<p class="text">
GB hours represent the memory usage (in gigabytes) of your function executions and
builds, multiplied by the total execution time (in hours).
</p>
<svelte:fragment slot="title">GB Hours</svelte:fragment>
GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied
by the total execution time (in hours).
<svelte:fragment slot="aside">
{#if data.usage.executionsMbSecondsTotal}
{@const totalGbHours = mbSecondsToGBHours(
@@ -434,12 +416,9 @@
</svelte:fragment>
</CardGrid>
<CardGrid>
<Heading tag="h6" size="7">Phone OTP</Heading>
<p class="text">
Calculated for all Phone OTP sent across your project. Resets at the start of each
billing cycle.
</p>
<p>You will not be charged for Phone OTPs before February 10th.</p>
<svelte:fragment slot="title">Phone OTP</svelte:fragment>
Calculated for all Phone OTP sent across your project. Resets at the start of each billing cycle.<br />
You will not be charged for Phone OTPs before February 10th.
<svelte:fragment slot="aside">
{#if data.usage.authPhoneTotal}
<div class="u-flex u-main-space-between">

Some files were not shown because too many files have changed in this diff Show More