Users

The person using the app: signing in and out, their photo, preferences, pages they can't open and acting as someone else. For people as page content, such as bios and teams, see People.

Sign In and Sign Out

Your 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.

For a page that does little until you sign in, add a Sign In box at the top of the sidebar too; see Sidebars 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="#nav" aria-label="Menu for Jane Doe"
   onclick="document.querySelector('.roof .menu-btn').click(); return false;">Jane Doe</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 right cmu-account-menu">
  <a class="cmu-account-name">Jane Doe</a>
  <a href="/preferences">Preferences</a>
  <a href="/logout">Sign Out</a>
</li>

Signed in, the menu starts with your name, then Preferences if the app has any, then Sign Out.

With a Photo

When the app knows your photo, put it before your name, round: small in the roof, larger at the top of the menu, as Workday does. Add cmu-avatar to the image, with empty alt text, since your 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="#nav" aria-label="Menu for Jane Doe" …><img class="cmu-avatar" src="/photos/jdoe.jpg" alt="">Jane Doe</a>

<li class="secondary right cmu-account-menu">
  <a class="cmu-account-name"><img class="cmu-avatar" src="/photos/jdoe.jpg" alt="">Jane Doe</a>
  <a href="/preferences">Preferences</a>
  <a href="/logout">Sign Out</a>
</li>

Preferences

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 a page that says so plainly, instead of an error code or an empty page. Say who the page is for, how to get access if they should have it and where to go instead. Send it with HTTP status 403. Someone who isn't signed in yet should get the Sign In box instead, since signing in may be all they need.

• Don't say more than they need: name who the page is for, not what's on it.
• Keep the header and menu, signed in as usual, so they can go anywhere else.

Acting as Another User

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. Like Canvas's Act As, 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 you to your 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