Rotimi Best
c7854efae3
* feat: new components, deploy storybook * refactor: simplify component field definitions and enhance button loading state - Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook. - Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props. - Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback. - Minor CSS adjustments for better layout and styling consistency. * chore: add field, card, password components * feat: improve page component & update AuthUI path * chore: update bits-ui to version 2.14.4 and all org related UI's - Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4. - Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory. - Removed unused Course components and related files to clean up the codebase. - Enhanced various components to improve consistency and maintainability. * chore: move all setting buttons to the top and update auth ui styles * chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner - Removed all instances of svelte-loading-spinners from the project. - Updated components to use the new Spinner from @cio/ui/base/spinner. - Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners. - Added new CSS animations for rocket launch effects in app.css. - Enhanced email change flow with updated verification messages in translations. * chore: remove supabase file upload from dashboard and move to r2 * chore: update organization API and UI components - Added new API methods for organization plan operations and team management. - Introduced middleware for API key authentication and organization admin checks. - Refactored organization-related components to utilize the new API structure. - Updated various UI components to improve consistency and maintainability. - Enhanced error handling and validation for organization-related actions. - Removed deprecated services and streamlined the codebase.
81 lines
2.4 KiB
Svelte
81 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import * as InputGroup from '../../base/input-group';
|
|
import * as Tooltip from '../../base/tooltip';
|
|
import LockIcon from '@lucide/svelte/icons/lock';
|
|
import EyeIcon from '@lucide/svelte/icons/eye';
|
|
import EyeOffIcon from '@lucide/svelte/icons/eye-off';
|
|
import type { ComponentProps } from 'svelte';
|
|
import { cn } from '../../tools';
|
|
|
|
interface Props {
|
|
placeholder?: string;
|
|
value?: string;
|
|
class?: string;
|
|
disabled?: boolean;
|
|
'aria-invalid'?: 'true' | 'false' | undefined;
|
|
autocomplete?: string;
|
|
showPasswordTooltip?: string;
|
|
hidePasswordTooltip?: string;
|
|
showPasswordAriaLabel?: string;
|
|
hidePasswordAriaLabel?: string;
|
|
}
|
|
|
|
let {
|
|
placeholder = '************',
|
|
value = $bindable(''),
|
|
class: className = '',
|
|
disabled = false,
|
|
'aria-invalid': ariaInvalid,
|
|
autocomplete,
|
|
showPasswordTooltip = 'Show password',
|
|
hidePasswordTooltip = 'Hide password',
|
|
showPasswordAriaLabel = 'Show password',
|
|
hidePasswordAriaLabel = 'Hide password',
|
|
...restProps
|
|
}: Props & Omit<ComponentProps<typeof InputGroup.Root>, 'class' | 'children'> = $props();
|
|
|
|
let showPassword = $state(false);
|
|
|
|
const tooltipText = $derived(showPassword ? hidePasswordTooltip : showPasswordTooltip);
|
|
const ariaLabel = $derived(showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel);
|
|
</script>
|
|
|
|
<InputGroup.Root class={cn('w-full', className)} data-slot="password">
|
|
<InputGroup.Addon align="inline-start">
|
|
<LockIcon />
|
|
</InputGroup.Addon>
|
|
<InputGroup.Input
|
|
type={showPassword ? 'text' : 'password'}
|
|
{placeholder}
|
|
bind:value
|
|
{disabled}
|
|
aria-invalid={ariaInvalid}
|
|
autocomplete={autocomplete}
|
|
{...restProps}
|
|
/>
|
|
<InputGroup.Addon align="inline-end">
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger>
|
|
{#snippet child({ props })}
|
|
<InputGroup.Button
|
|
{...props}
|
|
onclick={() => (showPassword = !showPassword)}
|
|
aria-label={ariaLabel}
|
|
{disabled}
|
|
>
|
|
{#if showPassword}
|
|
<EyeOffIcon />
|
|
{:else}
|
|
<EyeIcon />
|
|
{/if}
|
|
</InputGroup.Button>
|
|
{/snippet}
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content>{tooltipText}</Tooltip.Content>
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|
|
</InputGroup.Addon>
|
|
</InputGroup.Root>
|
|
|