Adding latest updates to the auth page

Author: tnylea

content/docs/config/email.md

@@ -1,12 +1,13 @@
 ---
 title: Email Template
 description: Learn how to edit the email template to add your own logo and style
-slug: 'email'
 nextTitle: 'Config Files'
-nextURL: '/config/files'
-nextSlug: 'config/files'
+nextURL: '/docs/config/files'
+nextSlug: 'files'
+slug: 'email'
 prevTitle: 'Two-Factor Auth'
-prevURL: '/config/two-factor-auth'
+prevURL: '/docs/config/two-factor-auth'
+prevSlug: 'two-factor-auth'
 ---
 
 # Email Template Design

content/docs/config/files.md

@@ -1,6 +1,13 @@
 ---
 title: Config Files
 description: Learn about how DevDojo Auth uses configuration files to change and customize the authentication functionality
+prevTitle: 'Email Template'
+prevURL: '/docs/config/email'
+prevSlug: 'email'
+slug: 'files'
+nextTitle: 'Github Action'
+nextURL: '/docs/config/github-action'
+nextSlug: 'github-action'
 ---
 
 

content/docs/config/github-action.md

@@ -1,6 +1,13 @@
 ---
 title: Github Action Workflow
 description: DevDojo Auth ships with a Github action that can help gaurantee that your authentication is fully functional.
+nextTitle: 'Authentication Events'
+nextURL: '/docs/extend/events'
+nextSlug: 'events'
+slug: 'github-action'
+prevTitle: 'Config Files'
+prevURL: '/docs/config/files'
+prevSlug: 'files'
 ---
 
 

content/docs/config/social-providers.md

@@ -1,6 +1,13 @@
 ---
 title: Social Providers
 description: Allow users to authenticate with many Social Providers
+prevTitle: 'Setup & Customizations'
+prevURL: '/docs/setup-customizations'
+prevSlug: 'setup-customizations'
+slug: 'social-providers'
+nextTitle: 'Two Factor Auth'
+nextURL: '/docs/config/two-factor-auth'
+nextSlug: 'two-factor-auth'
 ---
 
 

content/docs/config/two-factor-auth.md

@@ -1,6 +1,15 @@
 ---
 title: Two-Factor Authentication
 description: Learn about Two-Factor Auth and how to enable it for your application.
+prevTitle: 'Social Providers'
+prevURL: '/docs/config/social-providers'
+prevSlug: 'social-providers'
+slug: 'two-factor-auth'
+nextTitle: 'Email Template'
+nextURL: '/docs/config/email'
+nextSlug: 'email'
+
+
 ---
 
 # Using Two-Factor Authentication (2FA)

content/docs/contributing.md

@@ -1,3 +1,17 @@
+---
+title: Contributing
+description: Want to make some contributions. Learn more here.
+prevTitle: 'Custom Components'
+prevURL: '/docs/extend/components'
+prevSlug: 'components'
+slug: 'troubleshooting'
+nextTitle: 'Troubleshooting'
+nextURL: '/docs/troubleshooting'
+nextSlug: 'troubleshooting'
+---
+
+# Contributing
+
 We welcome all new contributions to this project. If you would like to contribute to this package it will probably be helpful to learn how to setup a local version for working on the DevDojo Auth package.
 
 ## Local Dev Version

content/docs/extend/components.md

@@ -1,47 +1,38 @@
 ---
 title: Custom Components
 description: Learn how to override the authentication page components to take full control of how your authentication pages feel and function.
+nextTitle: 'Contributing'
+nextURL: '/docs/contributing'
+nextSlug: 'contributing'
+slug: 'github-action'
+prevTitle: 'Authentication Events'
+prevURL: '/docs/extend/events'
+prevSlug: 'events'
 ---
 
 # Custom Components
 
 ## Introduction
 
-The DevDojo Auth package allows you to customize its components by providing your own versions. This gives you the flexibility to tailor the authentication experience to fit your application's design and requirements. By adding your own Blade components, you can override the default components provided by the package.
+You can include additional customizations by adding your own Blade components, you can override the default components provided by the package.
 
 ## Creating Custom Components
 
 ### Step 1: Publish the Default Components
 
-To start with the current components from the Auth package, you can publish them to your application's `resources/views/components/auth` directory.
+To start with the current components from the Auth package, you can publish them to your application's `resources/views/components/auth/elements` directory.
 
 ```bash
 php artisan vendor:publish --tag=auth:components
 ```
 
-This command will publish the default components to `resources/views/components/app/elements`.
+This command will publish the default components to `resources/views/components/app/elements`. Any components in this folder can be used as opposed to the default components. This gives you ultimate flexibility on how your authentication will look and feel.
 
-### Step 2: Create the Custom Component
+Next, you need to specify which component you want to override.
 
-Create a Blade file for your custom component in the `resources/views/components/app/elements` directory. For example, to customize the button component, create the following file:
+## Step 2: Override Component
 
-```
-resources/views/components/app/elements/button.blade.php
-```
-
-### Example Custom Button Component
-
-```blade
-<button {{ $attributes->merge(['class' => 'custom-button-class']) }}>
-    {{ $slot }}
-</button>
-```
-
-### Step 3: Register the Custom Component
-
-To make sure your custom components are used instead of the default ones, you need to register the custom components in your `AppServiceProvider`.
-
-#### Example `AppServiceProvider`:
+To use your custom component instead of the default one, you need to register it in your `AppServiceProvider`.
 
 ```php
 namespace App\Providers;
@@ -58,62 +49,30 @@ class AppServiceProvider extends ServiceProvider
 
     public function boot()
     {
-        Blade::component('components.app.elements.button', 'auth::elements.button');
+        Blade::component('components.auth.elements.button', 'auth::elements.button');
         // Add more components as needed
     }
 }
 ```
 
-### Step 4: Use the Custom Component
-
-In your Blade views, use the custom component as follows:
-
-```blade
-<x-auth::elements.button>
-    Click Me
-</x-auth::elements.button>
-```
+For instance, the above code will now use the `button` component from your local `resources/views/components/auth/elements` folder.
 
-This will render the custom button component you created.
+### Step 3: Customize the component
 
-## Additional Information
+You can now customize the Blade component as much as you would like. We are utilizing <a href="https://tailwindcss.com" target="_blank">Tailwind CSS</a> and <a href="https://alpinejs.dev" target="_blank">AlpineJS</a> within these components, so that is how you can customize styles or functionality.
 
-### Customizing Other Components
+## Step 4: Update the Assets
 
-You can follow the same process to customize other components provided by the DevDojo Auth package. Simply publish the components, create your custom versions, and register them in your `AppServiceProvider`.
+You may have added some additional Tailwind classes in your custom component that are not included by the default components. To do this, you can run the following command:
 
-### Example: Custom Input Component
-
-1. **Publish the default input component:**
-
-   ```bash
-   php artisan vendor:publish --tag=auth:components
-   ```
-
-2. **Create a custom input component:**
-
-   ```
-   resources/views/components/app/elements/input.blade.php
-   ```
-
-3. **Example custom input component:**
-
-   ```blade
-   <input {{ $attributes->merge(['class' => 'custom-input-class']) }}>
-   ```
-
-4. **Register the custom input component in `AppServiceProvider`:**
-
-   ```php
-   Blade::component('components.app.elements.input', 'auth::elements.input');
-   ```
+```bash
+npx tailwindcss -c ./packages/devdojo/auth/tailwind.config.js -o ./public/auth/build/assets/styles.css
+```
 
-5. **Use the custom input component:**
+You will now see your updated styles within your authentication pages. 
 
-   ```blade
-   <x-auth::elements.input type="text" name="username">
-   ```
+> Tip: if you are trying to override styles that are set by Auth itself, for instance the background color, you may have to use !important (ex: !bg-pink-500), although the best process for this would be just to use the `button color` settings in the authentication setup pages.
 
-## Conclusion
+## Testing
 
-By following these steps, you can easily customize the components of the DevDojo Auth package to fit your application's needs. This flexibility allows you to maintain a consistent design and user experience across your application.
+It's probably best to have your CI setup to run through the authentication functionality whenever you make a new PR. This way if you broke something when adding your own custom component, you will be aware.