Creating CMS pages

Divide the Login Page into two sections

The page itself currently consists of a single section with the login form centered. Let's modify the layout to include two sections side by side.

export async function LoginPage() {
  const t = useTranslations('LoginPage');
  const messages = useMessages();
    
  return (
    <div className="pb-10 md:pb-6">
      <div className="grid gap-10 md:grid-cols-2">        <section>          {/* Login Form, it remains unchanged */}
        </section>        <section>          {/* CMS Content will go here */}        </section>      </div>    </div>
  );
}

Fetch data from the CMS

Our login page will have just one slot for CMS content named components. To connect the page with the CMS, we need to wrap it with the connectCmsPage higher-order component. connectCmsPage requires a CMS page path, which will be just /login in our case. It will handle the CMS data fetching and pass it as a page prop into the LoginPage component.

// Make sure to replace `<name>` with the actual name of your CMS module
import connectCmsPage, { PropsWithCmsPage } from '@sf-modules/cms-<name>/components/connect-cms-page';

interface LoginPage {
  components: any;
}

type LoginPageProps = PropsWithCmsPage<LoginPage>;

export async function LoginPage() { async function LoginPage({ page }: LoginPageProps) {   const t = useTranslations('LoginPage');
  const messages = useMessages();

  return (
    <div className="pb-10 md:pb-6">
      {/* ... */}
    </div>
  );
}

export default connectCmsPage(LoginPage, {    getCmsPagePath: () => '/login',  });  

So far we didn't create the Login page in the CMS, so the page prop will be null. We'll create the page in the CMS in the next steps.

Add RenderCmsContent component

To render the CMS content, we need to pass it to the RenderCmsContent component, which will render the corresponding frontend components. Let's add it to the LoginPage component.

// Make sure to replace `<name>` with the actual name of your CMS module
import RenderCmsContent from '@sf-modules/cms-<name>/components/render-cms-content'; 
async function LoginPage({ page }: LoginPageProps) {

  return {
    ...
    <section>
      {/* CMS Content will go here */}      {page?.components && <RenderCmsContent item={page.components} />}    </section>
    ...
  );
}

Expand the Auth Layout container

The default Auth Layout container is too narrow to accommodate two sections side by side. Let's adjust the layout to make it wider.

import type { PropsWithChildren } from 'react';

import Footer from '@/components/navigations/footer';
import NavbarTop from '@/components/navigations/navbar-top';

interface AuthLayoutProps extends PropsWithChildren {}

export default async function AuthLayout({ children }: AuthLayoutProps) {
  return (
    <>
      <NavbarTop />
      <main>
        <div className="mx-auto max-w-[630px] px-4 pb-10 pt-4 md:px-0 md:pb-14 md:pt-9">        <div className="mx-auto max-w-screen-3-extra-large px-6 pb-10 pt-4 md:px-10 md:pb-14 md:pt-9">          {children}
        </div>
      </main>
      <Footer className="mb-[58px] md:mb-0" />
    </>
  );
}

This change will affect all pages using the Auth Layout. Make sure to test other pages to ensure they still look as expected.

Create a new Content Type

From to the Development dropdown choose Content Type schemas. Once a popup appears on the screen, choose "code from scratch". Set https://www.vuestorefront.io/login-page.json as schema id and set Content Type as the validation level. Hit the Create schema button to confirm.

Complete the schema

Next step is to add the required fields to the Content Type schema. The schema will be similar to the schemas for the other page types. This time we need just a components field, which will be a reference to the components we want to use on the Login Page - in our case Grid and Picture components.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://www.vuestorefront.io/login-page.json",
  "title": "Login Page",
  "description": "Content for Login Page",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type": "object",
  "properties": {
    "components": {
      "type": "array",
      "title": "Components",
      "description": "Components rendered in right section of the Login Page",
      "items": {
        "allOf": [
          {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
          },
          {
            "properties": {
              "contentType": {
                "enum": [
                  "https://www.vuestorefront.io/grid.json",
                  "https://www.vuestorefront.io/picture.json"
                ]
              }
            }
          }
        ]
      }
    }
  },
  "propertyOrder": []
}

Register the Content Type

Once the schema is ready, you can choose from the Save dropdown Save and register as content type option.

In the following screen set the Content type label to Login Page and set associated repository to Content. Optionally you can also add the icon and card for better recognition of the Content Type for final users.

Now we have to adjust the config on the middleware side to match the /login path with the login_page Content Type.

Add Visualization

To be able to preview the Picture Content Type, go to the Visualizations tab and create a new visualization. The Visualization URL should point to the /login page and include all the tokens in search parameters. For example: http://localhost:3000/login?hubName={{hub.name}}&contentItemId={{content.sys.id}}&deliveryKey={{delivery.key}}&snapshotId={{snapshot.id}}&vseDomain={{vse.domain}}&locales={{locales}}.

Once done, click the Save button to confirm.

async function getAuthRedirectPath(request: NextRequest) {
  const sdk = getSdk();
  const checkIsLoggedIn = () => sdk.unified.getCustomer().then(({ customer }) => !!customer);   const checkIsLoggedIn = () =>
    sdk.unified
      .getCustomer()
      .then(({ customer }) => !!customer)
      .catch(() => false);

  //...
}

Add a main Picture component

First we'll create a caption for our main Picture component. Navigate to the Content page and click the Create content button in the top right corner. Choose Editorial from the list. Then fill the content and click Save. Additionally, you can add a margin top to the caption to make it look better. To do this, add a group entry in the Styles field.

Then create a new Picture entry. Upload an image and choose the previously created Caption entry in the Caption field. Once done, save the entry.

Add an icon

Below the main Picture, there is a grid of icons. To create a first icon, create a new Editorial entry for caption, and then a new Picture entry for the icon. Upload the icon image and choose the caption entry in the Caption field.

Publish the icon entry and repeat the process for the remaining icons.

Place the icons in a grid

To display the icons in a grid, create a new Grid entry. To be able to add a Picture component into the Grid, you need to add a Picture Content Type as allowed in Grid schema. Go to Content type schemas page and find https://www.vuestorefront.io/grid.json schema. Then update the items property and choose Save and sync content type from the Save dropdown.

{
  "properties": {
    "items": {
      "type": "array",
      "items": {
        "type": "object",
        "allOf": [
          {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
          },
          {
            "properties": {
              "contentType": {
                "enum": [
                  "https://www.vuestorefront.io/banner.json",
                  "https://www.vuestorefront.io/hero.json",
                  "https://www.vuestorefront.io/card.json",
                  "https://www.vuestorefront.io/category-card.json",
                  "https://www.vuestorefront.io/product-card.json",
                  "https://www.vuestorefront.io/editorial.json",
                  "https://www.vuestorefront.io/scrollable.json",
                  "https://www.vuestorefront.io/newsletter-box.json",
                  "https://www.vuestorefront.io/accordion.json",
                  "https://www.vuestorefront.io/gallery.json",
                  "https://www.vuestorefront.io/picture.json"                ]
              }
            }
          }
        ]
      }
    }
  }
}

After that, you can create a new Grid entry on the Content page. Add the icons to the grid by in the Items field.

In Styles field, add two styles. One for the mobile, to display the icons in a column. For mobile set:

And for desktop set:

You can also add Margin -> Margin top to make some space between the main Picture and the icons grid. After that, save the grid entry and it should look like this:

Create a Login Page entry

Finally, create a new Login Page entry. Add the main Picture and the grid of icons to the Components field, and save the entry.