# Pages

# What are the default pages in the account area?

<table border="1" id="bkmrk-class-route-descript" style="border-collapse: collapse; width: 100%; height: 588.922px;"><colgroup><col style="width: 33.3731%;"></col><col style="width: 33.3731%;"></col><col style="width: 33.3731%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">**Class**  
</td><td style="height: 29.7969px;">**Route**  
</td><td style="height: 29.7969px;">**Description**  
</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">`AccountLoginPage`</td><td style="height: 29.7969px;">`login`</td><td style="height: 29.7969px;">A page where users can log in.</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">`AccountRegisterPage`</td><td style="height: 29.7969px;">`register`</td><td style="height: 29.7969px;">A page where guests can register.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountPasswordForgotPage`</td><td style="height: 46.5938px;">`password.forgot`</td><td style="height: 46.5938px;">A page where users can send a password reset email to their email.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountPasswordResetPage`</td><td style="height: 46.5938px;">`password.reset`</td><td style="height: 46.5938px;">A page where users can reset their password.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountOrdersPage`</td><td style="height: 46.5938px;">`account.orders`</td><td style="height: 46.5938px;">A page that lists all of a user's orders and lets them filter/search.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountOrderViewPage`</td><td style="height: 46.5938px;">`account.view-order`</td><td style="height: 46.5938px;">A page that shows more information about an order.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountAddressesPage`</td><td style="height: 46.5938px;">`account.addresses`</td><td style="height: 46.5938px;">A page that lists all of the users addresses.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountAddressNewPage`</td><td style="height: 46.5938px;">`account.new-address`</td><td style="height: 46.5938px;">A page where users can create a new address,</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountAddressEditPage`</td><td style="height: 46.5938px;">`account.edit-address`</td><td style="height: 46.5938px;">A page where users can edit one of their addresses.</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">`AccountDetailsPage`</td><td style="height: 63.3906px;">`account.details`</td><td style="height: 63.3906px;">A page where users can update their account details and change their password.</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`AccountInvoicePage`</td><td style="height: 46.5938px;">`account.view-invoice`</td><td style="height: 46.5938px;">A simple invoice for an order - currently not linked to from anywhere.</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">`AccountOverviewPage`</td><td style="height: 63.3906px;">`account`</td><td style="height: 63.3906px;">The first page a user sees after they log in - currently redirects to the orders page.</td></tr></tbody></table>

<p class="callout info">The above classes reside in the `Aero\AccountArea\Http\Responses` namespace.</p>

# How do I create a custom page in the account area?

To create and register a custom account area page you need to use the `Aero\AccountArea\AccountArea::registerPage()` helper method.

This method expects you to pass a class that extends `Aero\AccountArea\AccountAreaPage`:

```php
\Aero\AccountArea\AccountArea\AccountArea::registerPage(\Aerocargo\Acme\CustomPage::class);
```

Your account area page class must implement the `title()`, `route()`, and `routeName()` methods that all should return a string.

It’s common practice to use [Laravel Localization](https://laravel.com/docs/6.x/localization) for the title and route so that they can change depending on the language used. You should not use this for the `routeName` as the `routeName` is used in code to refer to the route and therefore should never change.

You should also define a protected static steps and middleware array and a protected sections array:

- The static steps array can be used to define any extra response steps required for your page.
- The middleware array can be used to define any middleware required for your page (the most useful being ‘account’ which means users need to be logged in to view your page).
- The sections array defines the views that make up your page.

For example, here's how [`aerocargo/wishlists`](https://agora.aerocommerce.com/packages/aerocargo/wishlist) defines its page:

```php
class WishlistPage extends \Aero\AccountArea\AccountAreaPage
{
    use \Aero\AccountArea\Traits\HasAccountAreaLink;

    protected static $steps = [
        Steps\AttachWishlist::class,
    ];

    protected static $middleware = [
        'account',
    ];

    protected $sections = [
        'navbar' => 'account-area::sections.navbar',
        'page-header' => 'account-area::partials.page-header',
        'wishlist' => 'wishlist::account-area-wishlist',
    ];

    static function title(): string
    {
        return __('My Wishlist');
    }

    static function route(): string
    {
        return __('wishlist');
    }

    static function routeName(): string
    {
        return 'account.wishlist';
    }

    public static function toLink(): array
    {
        return [
            'icon' => 'wishlist::icons.heart',
            'text' => 'Your Wishlist',
        ];
    }
}
```

You can add your page to the navbar using the `addLink()` method:

```php
\Aero\AccountArea\AccountAreaPage::extend(function (\Aero\AccountArea\AccountAreaPage $page, \Closure $next) {
    $page->addLink(\Aerocargo\Wishlist\Http\Responses\WishlistPage::class);

    return $next($page);
});
```

<p class="callout info">For `addLink` to work, your page needs to use the `\Aero\AccountArea\Traits\HasAccountAreaLink` trait and implement the `toLink()` method (see the wishlist example above)</p>

# How do I add a section to an existing account area page?

You can use the `addSection()` method(s) to add a section to an existing form:

```php
\Aero\AccountArea\Http\Responses\AccountLoginPage::extend(function (\Aero\AccountArea\Http\Responses\AccountLoginPage $page, \Closure $next) {
    // Add it as the first section
    $page->addSection('acme', 'acme::section');

    // Add it after a specific section
    $page->addSectionAfter('acme', 'acme::custom', 'login-form');
  
    // Add it before a specific section
    $page->addSectionBefore('acme', 'acme::custom', 'login-form');
  
    return $next($page);
});
```

If you need to see the keys of the existing columns in order to position your new column appropriately, you can dump them out:

```php
\Aero\AccountArea\Http\Responses\AccountLoginPage::extend(function (\Aero\AccountArea\Http\Responses\AccountLoginPage $page, \Closure $next) {
    dd($page->getSections()->keys()->toArray());
  
    return $next($page);
});
```