mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: finish screen
This commit is contained in:
Arman
+1
-1
@@ -23,7 +23,7 @@
|
||||
"@appwrite.io/pink-icons": "0.25.0",
|
||||
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@513bf8e",
|
||||
"@appwrite.io/pink-legacy": "^1.0.0",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@sentry/sveltekit": "^8.38.0",
|
||||
"@stripe/stripe-js": "^3.5.0",
|
||||
|
||||
Generated
+9
-9
@@ -21,8 +21,8 @@ importers:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
'@appwrite.io/pink-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.8
|
||||
version: 2.11.8
|
||||
@@ -221,8 +221,8 @@ packages:
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
@@ -236,8 +236,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@f4dce2b':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b}
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c}
|
||||
version: 1.0.0-next.85
|
||||
peerDependencies:
|
||||
react-dom: ^18.0.0
|
||||
@@ -4090,7 +4090,7 @@ snapshots:
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c(svelte@4.2.19)':
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
@@ -4103,9 +4103,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@f4dce2b(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@ab7b49c(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@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c(svelte@4.2.19)
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c(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)
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import { protocol } from '$routes/(console)/store';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
import { IconExternalLink } from '@appwrite.io/pink-icons-svelte';
|
||||
import { ActionMenu, Icon, Layout, Popover, Tag } from '@appwrite.io/pink-svelte';
|
||||
import { ActionMenu, Icon, Layout, Popover, Tag, Typography } from '@appwrite.io/pink-svelte';
|
||||
|
||||
export let domains: Models.ProxyRuleList;
|
||||
</script>
|
||||
@@ -13,7 +13,9 @@
|
||||
<Link external href={`${$protocol}${domains.rules[0].domain}`} variant="muted">
|
||||
<Layout.Stack gap="xxs" direction="row" alignItems="center">
|
||||
<Trim alternativeTrim>
|
||||
{domains.rules[0].domain}
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
|
||||
{domains.rules[0].domain}
|
||||
</Typography.Text>
|
||||
</Trim>
|
||||
<Icon icon={IconExternalLink} size="s" />
|
||||
</Layout.Stack>
|
||||
|
||||
+4
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
+4
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
@@ -2,7 +2,7 @@
|
||||
import { Card, Trim } from '$lib/components/index.js';
|
||||
import Link from '$lib/elements/link.svelte';
|
||||
import { humanFileSize } from '$lib/helpers/sizeConvertion';
|
||||
import { calculateTime } from '$lib/helpers/timeConversion';
|
||||
import { formatTimeDetailed } from '$lib/helpers/timeConversion';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
import { Divider, Icon, Image, Layout, Status, Typography } from '@appwrite.io/pink-svelte';
|
||||
import DeploymentSource from './deploymentSource.svelte';
|
||||
@@ -12,9 +12,13 @@
|
||||
import OpenOnMobileModal from './openOnMobileModal.svelte';
|
||||
import DeploymentDomains from './deploymentDomains.svelte';
|
||||
import { protocol } from '$routes/(console)/store';
|
||||
import { app } from '$lib/stores/app';
|
||||
import PlaceholderLight from './screenshot-placeholder-light.svg';
|
||||
import PlaceholderDark from './screenshot-placeholder-dark.svg';
|
||||
|
||||
export let deployment: Models.Deployment;
|
||||
export let proxyRuleList: Models.ProxyRuleList = { total: 0, rules: [] };
|
||||
export let hideQRCode = false;
|
||||
|
||||
let show = false;
|
||||
const siteUrl =
|
||||
@@ -23,63 +27,91 @@
|
||||
$: totalSize = humanFileSize((deployment?.buildSize ?? 0) + (deployment?.size ?? 0));
|
||||
</script>
|
||||
|
||||
<Card padding="xs">
|
||||
<Layout.Stack>
|
||||
<Layout.Stack gap="m" direction="row">
|
||||
<Image
|
||||
width={445}
|
||||
height={280}
|
||||
src={`https://placehold.co/600x400/111/bbb?text=Screenshot+coming+soon&font=inter`}
|
||||
alt="Screenshot" />
|
||||
<Layout.Stack>
|
||||
<Card padding="s" radius="m">
|
||||
<Layout.Stack gap="l">
|
||||
<Layout.Stack gap="xl" direction="row" alignItems="center">
|
||||
{#if deployment?.preview}
|
||||
<Image
|
||||
border
|
||||
radius="s"
|
||||
width={445}
|
||||
height={280}
|
||||
src={deployment?.preview}
|
||||
alt="Screenshot" />
|
||||
{:else if $app.themeInUse === 'dark'}
|
||||
<Image
|
||||
border
|
||||
radius="s"
|
||||
width={400}
|
||||
height={280}
|
||||
src={PlaceholderDark}
|
||||
alt="Screenshot" />
|
||||
{:else}
|
||||
<Image
|
||||
border
|
||||
radius="s"
|
||||
width={400}
|
||||
height={280}
|
||||
src={PlaceholderDark}
|
||||
alt="Screenshot" />
|
||||
{/if}
|
||||
<Layout.Stack gap="xl">
|
||||
<Layout.Stack direction="row" alignItems="flex-start">
|
||||
<Layout.Stack direction="row" gap="xl">
|
||||
{#if deployment.status === 'failed'}
|
||||
<Layout.Stack gap="xs" inline>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Status
|
||||
</Typography.Text>
|
||||
<Typography.Text variant="m-400">
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
<Status status={deployment.status} label={deployment.status} />
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
{:else}
|
||||
<Layout.Stack gap="xs" inline>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Deployed
|
||||
</Typography.Text>
|
||||
<Typography.Text variant="m-400">
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
<DeploymentCreatedBy {deployment} />
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
{#if siteUrl}
|
||||
<Button icon text on:click={() => (show = true)}>
|
||||
{#if siteUrl && !hideQRCode}
|
||||
<Button icon secondary on:click={() => (show = true)}>
|
||||
<Icon icon={IconQrcode} />
|
||||
</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
{#if proxyRuleList?.total}
|
||||
<Layout.Stack gap="xs">
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
Domains
|
||||
</Typography.Text>
|
||||
<DeploymentDomains domains={proxyRuleList} />
|
||||
</Layout.Stack>
|
||||
{:else if deployment.domain}
|
||||
<Layout.Stack gap="xs">
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
Domains
|
||||
</Typography.Text>
|
||||
<Link external href={`${$protocol}${deployment.domain}`} variant="muted">
|
||||
<Layout.Stack gap="xxs" direction="row" alignItems="center">
|
||||
<Trim alternativeTrim>
|
||||
{deployment.domain}
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
{deployment.domain}
|
||||
</Typography.Text>
|
||||
</Trim>
|
||||
<Icon icon={IconExternalLink} size="s" />
|
||||
</Layout.Stack>
|
||||
@@ -88,31 +120,33 @@
|
||||
{/if}
|
||||
<Layout.Stack gap="xl" direction="row">
|
||||
{#if deployment?.buildTime}
|
||||
<Layout.Stack gap="xs" inline>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Build time
|
||||
</Typography.Text>
|
||||
<Typography.Text variant="m-400">
|
||||
{calculateTime(deployment.buildTime)}
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
{formatTimeDetailed(deployment.buildTime)}
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
<Layout.Stack gap="xs" inline>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
Total size
|
||||
</Typography.Text>
|
||||
<Typography.Text variant="m-400">
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
|
||||
{totalSize.value}{totalSize.unit}
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
<Layout.Stack gap="xs">
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
Source
|
||||
</Typography.Text>
|
||||
<Typography.Text variant="m-400">
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
|
||||
<DeploymentSource {deployment} />
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
@@ -121,7 +155,7 @@
|
||||
|
||||
{#if $$slots.footer}
|
||||
<span
|
||||
style="margin-left: calc(-1* var(--space-6));margin-right: calc(-1* var(--space-6));width:auto;">
|
||||
style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;">
|
||||
<Divider />
|
||||
</span>
|
||||
<Layout.Stack direction="row-reverse">
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
import ConnectRepoModal from '../../(components)/connectRepoModal.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
|
||||
import { protocol } from '$routes/(console)/store';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@@ -34,104 +35,131 @@
|
||||
<!-- Creating a new stack -->
|
||||
<div style:position="relative" style="z-index: 1;">
|
||||
<Layout.Stack gap="xxl">
|
||||
<Layout.Stack gap="xxxl">
|
||||
<!-- TODO: switch to xxxl -->
|
||||
<Layout.Stack gap="xxl">
|
||||
<Layout.Stack gap="l" direction="column" alignItems="center">
|
||||
<Check />
|
||||
<Layout.Stack gap="s" direction="column" alignItems="center">
|
||||
<Layout.Stack gap="xs" direction="column" alignItems="center">
|
||||
<Typography.Title size="l">Congratulations!</Typography.Title>
|
||||
<Typography.Text variant="m-400">
|
||||
You deployed your Site successfully.
|
||||
<Typography.Text variant="l-400">
|
||||
You deployed your Site successfully
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
<Lights style="top: -100px; height:200px; width: 50%" />
|
||||
<SiteCard deployment={data.deployment} />
|
||||
<SiteCard deployment={data.deployment} hideQRCode>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button href={`${$protocol}${data.deployment.domain}`} external>
|
||||
Visit site
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
</SiteCard>
|
||||
</Layout.Stack>
|
||||
|
||||
<Step.List>
|
||||
<Step.Item state="current" shortLine={true}>
|
||||
{#if !data.deployment.providerCommitHash}
|
||||
<Layout.Stack direction="row">
|
||||
{#if !data.site.installationId && !data.site.providerRepositoryId}
|
||||
<div style="margin-block-start: var(--gap-xxl);">
|
||||
<Step.List>
|
||||
<Step.Item state="current" shortLine={true}>
|
||||
{#if !data.deployment.providerCommitHash}
|
||||
<Layout.Stack direction="row" gap="l">
|
||||
{#if !data.site.installationId && !data.site.providerRepositoryId}
|
||||
<Card
|
||||
isTile
|
||||
radius="s"
|
||||
padding="s"
|
||||
isButton
|
||||
on:click={() => (showConnectRepositry = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s">
|
||||
Connect to repository
|
||||
</Typography.Title>
|
||||
<Icon
|
||||
icon={IconArrowSmRight}
|
||||
size="l"
|
||||
color="--color-fgcolor-neutral-weak" />
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Connect to a new repository or an existing one.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
<Card
|
||||
isTile
|
||||
radius="s"
|
||||
padding="s"
|
||||
href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}/domains`}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s">Add domain</Typography.Title>
|
||||
<Icon
|
||||
icon={IconArrowSmRight}
|
||||
size="l"
|
||||
color="--color-fgcolor-neutral-weak" />
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Connect to an existing domain or purchase a new one.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
<Card
|
||||
isTile
|
||||
radius="s"
|
||||
isButton
|
||||
on:click={() => (showConnectRepositry = true)}>
|
||||
padding="s"
|
||||
on:click={() => (showInviteCollaborator = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s"
|
||||
>Connect to repository</Typography.Title>
|
||||
<Icon icon={IconArrowSmRight} />
|
||||
>Add collaborators</Typography.Title>
|
||||
<Icon
|
||||
icon={IconArrowSmRight}
|
||||
size="l"
|
||||
color="--color-fgcolor-neutral-weak" />
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Connect to a new repository or an existing one.
|
||||
Share your progress and start collaborating with your
|
||||
team.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
<Card
|
||||
isTile
|
||||
radius="s"
|
||||
href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}/domains`}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s">Add domain</Typography.Title>
|
||||
<Icon icon={IconArrowSmRight} />
|
||||
<Card
|
||||
isTile
|
||||
radius="s"
|
||||
isButton
|
||||
padding="s"
|
||||
on:click={() => (showOpenOnMobile = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s"
|
||||
>Open on mobile</Typography.Title>
|
||||
<Icon
|
||||
icon={IconArrowSmRight}
|
||||
size="l"
|
||||
color="--color-fgcolor-neutral-weak" />
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Open the preview of your site on any mobile or tablet
|
||||
device.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Connect to an existing domain or purchase a new one.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
<Card
|
||||
isTile
|
||||
radius="s"
|
||||
isButton
|
||||
on:click={() => (showInviteCollaborator = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s"
|
||||
>Add collaborators</Typography.Title>
|
||||
<Icon icon={IconArrowSmRight} />
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Share your progress and start collaborating with your team.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
<Card
|
||||
isTile
|
||||
radius="s"
|
||||
isButton
|
||||
on:click={() => (showOpenOnMobile = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Title size="s">Open on mobile</Typography.Title>
|
||||
<Icon icon={IconArrowSmRight} />
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-400">
|
||||
Open the preview of your site on any mobile or tablet
|
||||
device.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
</Step.Item>
|
||||
</Step.List>
|
||||
</Card>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
</Step.Item>
|
||||
</Step.List>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user