Auth Package

🛠️ Component Overview

Welcome to the Component Overview page! This section provides an in-depth look at the various Auth components included in our package. Each component is designed to enhance your application's user experience by offering consistent and reusable building blocks for authentication flows.

# Available Components

Our package features five primary types of components that facilitate the development of Unauthorized routes:

• Layout Components: Versatile layouts for displaying Unauthorized routes, allowing for different visual arrangements.
• Form Components: Pre-built forms for login, registration, and password recovery, simplifying the authentication process.
• Card Components: Attractive card styles that can be integrated into Unauthorized routes to improve visual appeal.
• Profile Components: Styled components that are easy to configure for displaying user information effectively.

Additionally, each component is equipped with multiple slots, making it straightforward to customize and adapt the components to your specific application needs.

These components are directly connected to the auth.yml file, allowing you to configure various settings, including layout options and component behavior.

# Layout Components

# AuthLayout

The <AuthLayout> component serves as a foundational wrapper for your Unauthorized routes, reshaping the layout to enhance user interaction without cluttering the screen with additional elements. It should be implemented in the +layout.svelte file of your (unauthorized) route group.

# Configuration Options

The AuthLayout component can be configured to display in two distinct styles:

• Single Column Layout: A streamlined view that centers all components in the middle of the screen.
• Two Column Layout: A dynamic layout that positions components in two vertical columns, with the primary content displayed on the right side.

Configuration options for the layout are defined in the auth.yml file. Adjust the ui.layout.mode value to either 1-columns or 2-columns to set your desired layout.

# Component Placement

As mentioned earlier, the AuthLayout component reshapes the screen but does not add additional components itself. It is your responsibility to include the necessary components within the AuthLayout.

• In the Single Column Layout, all pages/components will be displayed centrally.
• In the Two Column Layout, components will be positioned in the right column.

# Customization

You can further customize the layout by rearranging background colors, images, and adding extra styles or components to specific parts of the layout. This is achieved by utilizing the available slots in the AuthLayout component.

# One Column Layout

# Two Column Layout

# AuthLayout Slots and Slot Components

In this section, you'll find an overview of the available slots in the AuthLayout component, along with built-in components that can enhance your design implementation. These slots offer flexibility and ease when integrating various design features.

# AuthClipPath

The AuthClipPath component can be utilized in the clip-path slot of the AuthLayout component. As the name suggests, it implements a CSS clip path in the center of the screen, facilitating a smooth transition between the two sections of the AuthLayout.

• Visibility: The AuthClipPath component and its corresponding slot are only visible when the AuthLayout is set to the one-column layout.

# AuthFeatureImage

The AuthFeatureImage component is designed for use in the auth-feature slot of the AuthLayout component. It replaces the left side of the layout with a background image or color, along with an overlay image. If you prefer not to display an image, you can place any other content in the auth-feature slot.

• Visibility: The AuthFeatureImage component and its slot are only visible when the AuthLayout is set to the two-column layout.

# AuthFooter Slot

The auth-footer slot is ideal for displaying content at the bottom of the AuthLayout screen, such as informational text or links.

        <div slot="auth-footer" class="absolute bottom-0 w-full bg-transparent">
	<div class="h-2 w-full bg-primary mb-2" />
	<div class="h-2 w-full bg-primary mb-2" />
	<div class="h-2 w-full bg-primary" />
</div>

      

# AuthHeader Slot

Similar to the footer, the auth-header slot allows you to display content at the top of the AuthLayout screen.

        <div
	slot="auth-header"
	class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/5 h-[10%] w-full object-cover bg-transparent"
>
	<div class="h-2 w-full bg-white mb-2" />
	<div class="h-2 w-full bg-white mb-2" />
	<div class="h-2 w-full bg-white" />
</div>

      

# AuthCopyright Slot

The auth-copyright slot is positioned just below the main content of the layout. While you can use it for any content, it's particularly well-suited for copyright notices.

        <div slot="auth-copyright" class={'absolute bottom-24 inline-block w-full flex justify-center'}>
	<small>Copyright &copy; - Your Company Name</small>
</div>

      

# Card Components

# AuthCard

The AuthCard component is designed for use in the +page.svelte files under the (unauthorized) group route. It provides a straightforward way to display a card interface using Flowbite-Svelte, complete with customizable styles and properties for quick implementation.

# Key Features:

• Wrapper Component: The AuthCard acts as a container for your content, allowing you to easily include login forms, registration forms, or any other relevant information as its slot content.

# Form Components

The form components in the Auth package are designed to be simple, user-friendly, and easy to implement in your application. While they maintain a straightforward design, they are also flexible, allowing you to customize their appearance and functionality through props and slots.

These components are recommended for use as slots within the AuthCard component.

# LoginForm

The LoginForm component provides a basic login form that includes an email field, a password field, and a login button by default.

# Customization Options:

You can enhance the LoginForm by utilizing the following slots and props:

• Slots:
  • extra_inputs_top: Add any fields or components you want to display above the input fields.
  • extra_inputs_bottom: Include additional fields or components below the input fields.
  • secondary_links: Replace the default secondary links (like "Create an account" and "Forgot password?") configured in the auth.yml file with your custom content.
  • loadingIcon: Override the default loading icon with your own.

# Event Dispatches:

The LoginForm also dispatches two events that you can listen to:

• on:error: Triggered when a login attempt fails.
• on:success: Triggered upon a successful login.

These events allow you to handle login results effectively. When the user clicks the login button, the function provided in the onLogin prop is executed, and based on the outcome, either on:error or on:success is dispatched.

# RegisterForm

The RegisterForm component provides a comprehensive registration form that includes fields for first name, last name, email, two password entries, and a register button by default.

# Customization Options

You can enhance the RegisterForm by utilizing the following slots and props:

• Slots:
  • extra_inputs_top: Add any fields or components you want to display above the input fields.
  • extra_inputs_bottom: Include additional fields or components below the input fields.
  • secondary_links: Replace the default secondary links (such as "Back to login") configured in the auth.yml file with your custom content.
  • loadingIcon: Override the default loading icon with your own.

# Event Dispatches

The RegisterForm dispatches two events that you can listen to:

• on:error: Triggered when a registration attempt fails.
• on:registration: Triggered upon a successful registration.

These events allow you to handle registration results effectively. When the user clicks the register button, the function provided in the onRegister prop is executed, and based on the outcome, either on:error or on:registration is dispatched.

# ForgotPassword

The ForgotPassword component provides a straightforward form for users to request a password reset. By default, it includes an email field and a submit button.

# Customization Options

You can enhance the ForgotPassword component by utilizing the following slots and props:

• Slots:
  • extra_inputs_top: Add any fields or components you want to display above the input fields.
  • extra_inputs_bottom: Include additional fields or components below the input fields.
  • secondary_links: Replace the default secondary links (such as "Back to login") configured in the auth.yml file with your custom content.
  • loadingIcon: Override the default loading icon with your own.

# Event Dispatches

The ForgotPassword component dispatches two events that you can listen to:

• on:error: Triggered when a forgot password request attempt fails.
• on:success: Triggered upon a successful forgot password request.

These events allow you to handle the results of the forgot password request effectively. When the user clicks the submit button, the function provided in the onForgotPassword prop is executed. Depending on the outcome, either on:error or on:success is dispatched.

# Profile Components

These profile components are simple yet customizable components designed to display user information.

# ProfileCard

The ProfileCard component is a comprehensive profile card that displays the user's name, email, and other relevant information. It also includes a "Change Password" button and an "Edit" button that modify the URL's search parameters.

The ProfileCard component also supports an avatar upload feature, allowing users to update their profile picture. This is handled through the profileAvatarUpdate function prop.

# ProfileCard Slots

• card-lead
• profile-info-header-lead
• profile-info-lead
• profile-info-trail
• tabs-lead
• tabs-trail
• card-trail

The ProfileUserInfoLine component is a simple line component intended to be used as a slot within the ProfileCard component. It displays a piece of user information with an optional icon.