Accounts

The person using an app: their name in the header, signing in, their preferences, pages they can't open and acting as someone else.

Account Status App

The signed-in user's name (or Sign In) in the template's roof, the strip across the top, beside the menu button, and again in the menu. The roof's copy hides when the menu opens and below 768px, where the menu has it instead. Signed out, it looks like the template's header links. Signed in, add cmu-account-open: it's plain text that opens the menu. If the bar also has the template's search, put the Sign In link (or your name) after the search form; the kit places it between the search and the menu button.

A home page can also offer sign-in at the top of its sidebar, as a large button or a red box; see Sign In below for when to use which.

cmu-account, cmu-account-open, cmu-account-menu, cmu-account-name

<!-- In .roof, after the wordmark. Signed out: -->
<a class="cmu-account" href="/login">Sign In</a>
<!-- Signed in: -->
<a class="cmu-account cmu-account-open" href="accounts.html#nav" aria-label="Menu for Andrew Carnegie"
   onclick="document.querySelector('.roof .menu-btn').click(); return false;">Andrew Carnegie</a>

<!-- First item in nav#nav > ul. The template shows li.secondary only in the menu.
     An <a> without href gets the menu's spacing but isn't a link. -->
<li class="secondary cmu-account-menu">
  <a class="cmu-account-name">Andrew Carnegie</a>
  <a href="/preferences">Preferences</a>
  <a href="/logout">Sign Out</a>
</li>

Signed in, the menu starts with the user's name, with Preferences (if the app has any) and Sign Out on a line under it, and a rule between them and the rest of the menu.

Profile Picture App

The signed-in user's photo, also called an avatar or account photo. When the app has it, put it before their name, round: small in the roof, and larger on the right of the menu's account block. Add cmu-avatar to the image, with empty alt text, since their name is right beside it. With no photo, leave the image out rather than showing a blank one. Try it on this site's header.

cmu-avatar

<a class="cmu-account cmu-account-open" href="accounts.html#nav" aria-label="Menu for Andrew Carnegie" …><img class="cmu-avatar" src="/photos/ac00.jpg" alt="">Andrew Carnegie</a>

<li class="secondary cmu-account-menu">
  <a class="cmu-account-name"><img class="cmu-avatar" src="/photos/ac00.jpg" alt="">Andrew Carnegie</a>
  <a href="/preferences">Preferences</a>
  <a href="/logout">Sign Out</a>
</li>

Sign In Template

Every page has the Sign In link in the header, beside the menu button. A home page can also offer sign-in at the top of its sidebar, in one of two ways, depending on how much the page does for people who aren't signed in.

A Sign In Button

For a page that's useful signed out, where signing in adds more, such as a search anyone can use that shows more once the user signs in. One large outline button at the top of the sidebar, beside the page's lead. It's the template's simple sidebar box, with btn ghost wide in an <h1>.

sidebar, simple, btn ghost wide

A Sign In Box

For a page that does little until the user signs in. A red box says what signing in lets them do, with one wide outline Sign In button, and a note under it about who can sign in. It's the template's sidebar box with red invert, and btn ghost wide in an <h4>.

sidebar, red invert, btn ghost wide, left-rule

If signing in has to be a form's button, such as one that posts, use <button class="btn ghost wide"> in the same place. With cmu-app.css, it matches the link.

Button, Box or Header Link?

• The button is for a page people can use without signing in. The page's own content comes first, and the button is there for the extras.
• The box is for a page with little to show until the user signs in. Say what signing in lets them do, not just that they must.
• The header link alone is enough past the home page, and on pages where signing in adds nothing.
• A link that needs sign-in keeps its place in the text with " [login required]" after it.

Preferences App

Settings that belong to one person, such as which emails they get, on a page of their own reached from Preferences under their name in the menu. It's an ordinary form: group related choices under a legend, save them with one button and confirm with a flash message ("Preferences saved."). Don't put account settings such as passwords here: Andrew accounts are managed by Computing Services.

No Access

When someone who's signed in opens a page that isn't for them, show the 403 page in Error Pages. Someone who isn't signed in yet should get the Sign In box instead, since signing in may be all they need.

Acting as Another User App

When an administrator uses the app as someone else, to see what they see or to help them, the whole window should look different, so nobody forgets whose account they're in. The kit puts a thick teal frame around the window and a teal bar along the bottom of the window that stays in view as you scroll, saying who you're acting as, with a way to stop. Teal appears nowhere else in the kit, so it can't be mistaken for a flash or an announcement.

• Add cmu-acting-as to <body>, and put the bar anywhere inside it; the kit pins it to the bottom of the window and leaves room for it under the page.
• Name the person and their Andrew ID, and make Stop a button that ends the session and returns the administrator to their own account.
• Don't use the template's red alert bar (#campusAlert) for this: it's for campus emergencies.

cmu-acting-as, cmu-acting-bar

Show the Frame on This Page Try It With the Rest of the Header