Adding the Sign In Page

Users can currently log into Clarity by clicking Sign In in the user menu in the header.

Log out. On any page, click the user icon and choose Sign Out from the drop-down menu. Currently the custom fragment controlling the logout link uses the default Liferay logout URL: /c/portal/logout.
Test the Sign In page. On any page, click the user icon and Sign In link. Currently the custom fragment controlling the sign-in link uses the default Liferay login URL: /c/portal/login. This activates the default Sign In widget on any page where it’s invoked. However, it’s currently ugly with the Clarity master page applied to it:

Clarity needs a better sign in experience. Next you’ll add a custom sign in page.

Add the Sign In page using the Blank template. Click Add, and the content page editor is loaded.
Open the Options menu () in the administrative bar at the top of the page and click Configure.
On the General page setting screen, once again enable Hidden from Menu Display to prevent the sign in page from appearing in the Menu Display widget’s navigation menu. Note the friendly URL, /sign-in, and click Save.
Click the Design link from the menu and look at the Theme options. These are currently being set for all pages by the configuration in page administration (similarly accessed via the Options menu ().
Override the inherited theme options by clicking Define a Custom Theme for this Page. Uncheck these settings: Show Footer and Show Header. You do not want the search bar present, so you can also uncheck Show Header Search, but hiding the header entirely accomplishes that as well.
Scroll down and save the configuration.
Use the back arrow at the top of the page to go back to the content page editor; then add the imported fragment called Sign In.
Publish the page.
Now edit the custom user navigation fragment to point to the new sign-in page instead of /c/portal/login. Go to Site Menu () → Design → Fragments.
Open the J2B6 User Navigation Dropdown fragment. In the HTML pane, find the line setting the login URL:
```
<a class="user-sign-in" href="/c/portal/login">
```

Replace the line so it points at the Sign In page’s friendly URL, sign-in:

<a class="user-sign-in" href="${publicFriendlyURL}/sign-in">

That publicFriendlyURL variable is set in the first line of the HTML using FreeMarker syntax:

[#assign publicFriendlyURL = themeDisplay.getPathFriendlyURLPublic() +
   themeDisplay.getSiteGroup().getFriendlyURL() /]

Click Publish.
Propagate the new fragment code to fragments that are in use on a page or master page. Open the fragment’s Actions () menu and click View Usages.
Select all the listed usages, then click Propagate (). See Propagating Fragment Changes to learn more.
From any page, log out, then click Sign In. You’re sent to the new page, where you can sign in.

Don’t be concerned with the gray background for now. Hard coding the color to fix it isn’t a good solution, so leave it gray for now, and the design team can take care of it when they get to styling the site.