-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from upperdo/develop
feat: FunctionService & Settings route
- Loading branch information
Showing
19 changed files
with
589 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| export { BrowserRedirectTo } from "./redirect"; | ||
| export { CheckIfUserIsLoggedIn } from "./checkIfUserIsLoggedIn"; | ||
| export { languageSwitcherFunc } from "./languageSwitcherFunc"; | ||
| export { cn, flyAndScale } from "./shadcn-utility"; | ||
| export { cn, flyAndScale } from "./shadcn-utility"; | ||
| export { parseEnumValue } from "./parseEnumValue"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /** | ||
| * @name parseEnumValue | ||
| * @param enumType | ||
| * @param value | ||
| * | ||
| * @description Function that parse the value of a given enum type | ||
| * @returns value of the enumType | ||
| */ | ||
| export const parseEnumValue = (enumType: any, value: any): any | null =>{ | ||
| if(value){ | ||
| for (const key in enumType){ | ||
| if(enumType[key] === value) { | ||
| return value; | ||
| } | ||
| } | ||
| } | ||
| return null; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <script lang="ts"> | ||
| import { cn } from "$lib/common/utils"; | ||
| import { page } from "$app/stores"; | ||
| import Button from "$lib/ui/components/button/button.svelte"; | ||
| let className: string | undefined | null = undefined; | ||
| export let items: { href: string; title: string }[]; | ||
| export { className as class }; | ||
| </script> | ||
|
|
||
| <nav | ||
| class={cn( | ||
| "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", | ||
| className | ||
| )} | ||
| > | ||
| {#each items as item} | ||
| <Button | ||
| href={item.href} | ||
| variant="ghost" | ||
| class={cn( | ||
| $page.url.pathname === item.href | ||
| ? "bg-muted hover:bg-muted" | ||
| : "hover:bg-transparent hover:underline", | ||
| "justify-start" | ||
| )} | ||
| > | ||
| {item.title} | ||
| </Button> | ||
| {/each} | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 102 additions & 0 deletions
102
src/lib/features/settings/widgets/forms/account-form.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <script lang="ts" context="module"> | ||
| import { z } from "zod"; | ||
| const languages = { | ||
| en: "English", | ||
| fr: "French", | ||
| de: "German", | ||
| es: "Spanish", | ||
| pt: "Portuguese", | ||
| ru: "Russian", | ||
| ja: "Japanese", | ||
| ko: "Korean", | ||
| zh: "Chinese" | ||
| } as const; | ||
| type Language = keyof typeof languages; | ||
| export const accountFormSchema = z.object({ | ||
| name: z | ||
| .string({ | ||
| required_error: "Required." | ||
| }) | ||
| .min(2, "Name must be at least 2 characters.") | ||
| .max(30, "Name must not be longer than 30 characters"), | ||
| email: z | ||
| .string({ | ||
| required_error: "Required." | ||
| }) | ||
| .email() | ||
| .min(2, "Email must be at least 2 characters.") | ||
| .max(30, "Email must not be longer than 30 characters"), | ||
| // Hack: https://github.com/colinhacks/zod/issues/2280 | ||
| language: z.enum(Object.keys(languages) as [Language, ...Language[]]) | ||
| }); | ||
| export type AccountFormSchema = typeof accountFormSchema; | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import * as Form from "$lib/ui/components/form"; | ||
| import type { SuperValidated } from "sveltekit-superforms"; | ||
| import { cn } from "$lib/common/utils"; | ||
| export let data: SuperValidated<AccountFormSchema>; | ||
| </script> | ||
|
|
||
| <Form.Root | ||
| method="POST" | ||
| class="space-y-8" | ||
| let:config | ||
| schema={accountFormSchema} | ||
| form={data} | ||
| debug={true} | ||
| > | ||
| <Form.Item> | ||
| <Form.Field name="name" {config}> | ||
| <Form.Label>Name</Form.Label> | ||
| <Form.Input placeholder="Your name" /> | ||
| <Form.Description> | ||
| This is the name that will be displayed on your profile and in | ||
| emails. | ||
| </Form.Description> | ||
| <Form.Validation /> | ||
| </Form.Field> | ||
| <Form.Field name="email" {config}> | ||
| <Form.Label>Email</Form.Label> | ||
| <Form.Input placeholder="example@example.com" /> | ||
| <Form.Description> | ||
| This is the name that will be displayed on your profile and in | ||
| emails. | ||
| </Form.Description> | ||
| <Form.Validation /> | ||
| </Form.Field> | ||
| </Form.Item> | ||
| <Form.Item> | ||
| <Form.Field {config} name="language" let:attrs> | ||
| {@const { value } = attrs.input} | ||
| <Form.Label>Language</Form.Label> | ||
| <Form.Select selected={{ value, label: languages[value] }}> | ||
| <Form.SelectTrigger | ||
| placeholder="Select language" | ||
| class={cn( | ||
| "w-[200px] justify-between", | ||
| !attrs.input.value && "text-muted-foreground" | ||
| )} | ||
| /> | ||
| <Form.SelectContent class="h-52 overflow-y-auto"> | ||
| {#each Object.entries(languages) as [value, lang]} | ||
| <Form.SelectItem {value}> | ||
| {lang} | ||
| </Form.SelectItem> | ||
| {/each} | ||
| </Form.SelectContent> | ||
| </Form.Select> | ||
| <Form.Description> | ||
| This is the language that will be used in the dashboard. | ||
| </Form.Description> | ||
| <Form.Validation /> | ||
| </Form.Field> | ||
| </Form.Item> | ||
| <Form.Button>Update account</Form.Button> | ||
| </Form.Root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <script lang="ts" context="module"> | ||
| import { z } from "zod"; | ||
| export const profileFormSchema = z.object({ | ||
| username: z | ||
| .string() | ||
| .min(2, "Username must be at least 2 characters.") | ||
| .max(30, "Username must not be longer than 30 characters"), | ||
| email: z | ||
| .string({ required_error: "Please select an email to display" }) | ||
| .email(), | ||
| bio: z.string().min(4).max(160).default("I own a computer."), | ||
| website: z | ||
| .string() | ||
| .url({ message: "Please enter a valid URL." }) | ||
| .default("https://shadcn-svelte.com") | ||
| }); | ||
| export type ProfileFormSchema = typeof profileFormSchema; | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import * as Form from "$lib/ui/components/form"; | ||
| import type { SuperValidated } from "sveltekit-superforms"; | ||
| export let data: SuperValidated<ProfileFormSchema>; | ||
| </script> | ||
|
|
||
| <Form.Root | ||
| form={data} | ||
| schema={profileFormSchema} | ||
| let:config | ||
| method="POST" | ||
| class="space-y-8" | ||
| debug={true} | ||
| > | ||
| <Form.Item> | ||
| <Form.Field {config} name="username"> | ||
| <Form.Label>Username</Form.Label> | ||
| <Form.Input placeholder="@shadcn" /> | ||
| <Form.Description> | ||
| This is your public display name. It can be your real name or a | ||
| pseudonym. You can only change this once every 30 days. | ||
| </Form.Description> | ||
| <Form.Validation /> | ||
| </Form.Field> | ||
| </Form.Item> | ||
| <Form.Item> | ||
| <Form.Field {config} name="email"> | ||
| <Form.Label>Email</Form.Label> | ||
| <Form.Select> | ||
| <Form.SelectTrigger | ||
| placeholder="Select a verified email to display" | ||
| /> | ||
| <Form.SelectContent> | ||
| <Form.SelectItem value="m@example.com" label="m@example.com" | ||
| >m@example.com | ||
| </Form.SelectItem> | ||
| <Form.SelectItem value="m@google.com" label="m@google.com" | ||
| >m@google.com | ||
| </Form.SelectItem> | ||
| <Form.SelectItem value="m@support.com" label="m@support.com" | ||
| >m@support.com | ||
| </Form.SelectItem> | ||
| </Form.SelectContent> | ||
| </Form.Select> | ||
| <Form.Description> | ||
| You can manage verified email addresses in your <a | ||
| href="/examples/forms">email settings</a | ||
| >. | ||
| </Form.Description> | ||
| <Form.Validation /> | ||
| </Form.Field> | ||
| </Form.Item> | ||
| <Form.Item> | ||
| <Form.Field {config} name="bio"> | ||
| <Form.Label>Bio</Form.Label> | ||
| <Form.Textarea | ||
| placeholder="Tell us a little bit about yourself" | ||
| class="resize-none" | ||
| /> | ||
| <Form.Description> | ||
| You can <span>@mention</span> other users and organizations to link | ||
| to them. | ||
| </Form.Description> | ||
| <Form.Validation /> | ||
| </Form.Field> | ||
| </Form.Item> | ||
| <Form.Item> | ||
| <Form.Field {config} name="website"> | ||
| <Form.Label>Website</Form.Label> | ||
| <Form.Input /> | ||
| <Form.Description> | ||
| Your personal website, blog, or portfolio. | ||
| </Form.Description> | ||
| <Form.Validation /> | ||
| </Form.Field> | ||
| </Form.Item> | ||
| <Form.Button>Update profile</Form.Button> | ||
| </Form.Root> |
Oops, something went wrong.