app/views/home/index.html.erb
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<div class="py1 bg-maroon white fs-12p line-height-1 center">
TEST SITE - Do not use real personal information (demo purposes only) - TEST SITE
</div>
<div class="py1 bg-navy white fs-12p line-height-1 center">
<img class="mr1 align-bottom" src="<%= image_path('us-flag.png') %>" alt="U.S. flag" width="18" height="12">
A DEMO website of the United States government
</div>
<%- unless notice.nil? %><div class="center px2 py1 h5 bg-green white"><%= notice %></div><%- end %>
<%- unless alert.nil? %><div class="center px2 py1 h5 bg-red white"><%= alert %></div><%- end %>
<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended" role="banner">
<div class="usa-navbar">
<div class="usa-logo" id="extended-logo">
<em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">SAML Rails Example</a></em>
</div>
<button class="usa-menu-btn">Menu</button>
</div>
<nav role="navigation" class="usa-nav">
<div class="usa-nav__inner">
<button class="usa-nav__close"><img src="<%= image_path('close.svg') %>" alt="close"></button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="extended-nav-section-one"><span>Our process</span></button>
<ul id="extended-nav-section-one" class="usa-nav__submenu">
<li class="usa-nav__submenu-item">
<a href="#">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">Navigation link</a>
</li>
</ul>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="javascript:void(0)"><span>Explore</span></a>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="javascript:void(0)"><span>News</span></a>
</li>
</ul>
<div class="usa-nav__secondary">
<% if current_user %>
<div class="sign-in-wrap">
<div class="center p1"><%= current_user.email %></div>
<div>
<form action="/auth/saml/logout" method="POST" class="center">
<button type="submit" class="btn p0">Log out</button>
</form>
</div>
</div>
<% else %>
<ul class="usa-nav__secondary-links sign-in-type-wrap">
<li class="usa-nav__secondary-item">
<a href="?ial=1"><span class="<%= 'text-underline' unless params[:ial] == '2' %>">IAL1</span></a>
</li>
<li class="usa-nav__secondary-item">
<a href="?ial=2"><span class="<%= 'text-underline' if params[:ial] == '2' %>">IAL2</span></a>
</li>
</ul>
<div class="sign-in-wrap">
<%= form_tag('auth/saml', method: :get) do %>
<%= hidden_field_tag 'ial', params[:ial] %>
<button type="submit" class="usa-button usa-button--outline sign-in-bttn" style="float:right">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"></path>
</svg>
Sign in
</button>
<% end %>
</div>
<% end %>
</div>
</div>
</nav>
</header>
<main id="main-content">
<section class="usa-hero">
<div class="grid-container">
<div class="usa-hero__callout">
<% if current_user %>
<h1 class="usa-hero__heading">
<span class="usa-hero__heading--alt">
Welcome back!
</span>
You are logged in
</h1>
<p>When finished, use the previous 'Log out' link to sign out.</p>
<% else %>
<h1 class="usa-hero__heading">
<span class="usa-hero__heading--alt">
Let's get started!
</span>
It's easy to make an account
</h1>
<p>Setting it up takes just a few, short steps.</p>
<%= form_tag('auth/saml', method: :get) do %>
<%= hidden_field_tag 'ial', params[:ial] %>
<button type="submit" class="usa-button">
Create an account
</button>
<% end %>
<% end %>
</div>
</div>
</section>
<section class="grid-container usa-section">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-4">
<h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">We are with you every step of the way</h2>
</div>
<div class="tablet:grid-col-8 usa-prose">
<p>We hope your visit will help you understand the opportunities and potential rewards that are available to you. We created this website to help you gain a better understanding of these concepts. Most importantly, we hope you see the value of working with us to pursue your goals. We're here to help educate you about the basic concepts, to help you learn more about who we are, and to give you fast, easy access to opportunities.</p>
</div>
</div>
</section>
<section class="usa-graphic-list usa-section usa-section--dark">
<div class="grid-container">
<div class="usa-graphic-list__row grid-row grid-gap">
<div class="usa-media-block tablet:grid-col">
<div class="usa-media-block__body">
<h3 class="usa-graphic-list__heading">Create a plan for success</h3>
<p>We offer educational articles that outline key concepts and highlight services designed to fill the gaps in your planning.</p>
</div>
</div>
<div class="usa-media-block tablet:grid-col">
<div class="usa-media-block__body">
<h3 class="usa-graphic-list__heading">Evaluate your current and future needs</h3>
<p>On our website, you'll find valuable information for evaluating your current situation and progress toward your goals.</p>
</div>
</div>
</div>
</div>
</section>
<section class="usa-section">
<div class="grid-container">
<h2 class="font-heading-xl margin-y-0">Come back often</h2>
<p class="usa-intro">We hope you take advantage of this resource and visit us often. Be sure to add our site to your list of "favorites" in your Internet browser. We frequently update our information, and we wouldn't want you to miss any developments.</p>
<a class="usa-button usa-button--big" href="#">New developments</a>
</div>
</section>
</main>
<footer class="usa-footer" role="contentinfo">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
<div class="usa-footer__primary-section">
<nav class="usa-footer__nav">
<ul class="add-list-reset grid-row grid-gap">
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Our process</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Explore</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">News</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Get help</a>
</li>
</ul>
</nav>
</div>
<div class="usa-footer__secondary-section">
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
<div class="mobile-lg:grid-col-auto">
<h3 class="usa-footer__logo-heading">SAML Rails Example</h3>
<a class="usa-footer__primary-link source-code-link" href="https://github.com/18F/identity-saml-rails">
<div>
<%= image_tag 'GitHub-Mark-120px-plus.png', alt: 'GitHub Logo', title: 'GitHub Logo', width: 60 %>
<span>Get the Source Code</span>
</div>
</a>
</div>
</div>
<div class="usa-footer__contact-links mobile-lg:grid-col-6">
<div class="usa-footer__social-links grid-row grid-gap-1">
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);">
<span>Facebook</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
<span>Twitter</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
<span>YouTube</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
<span>RSS</span>
</a>
</div>
</div>
<h3 class="usa-footer__contact-heading">Agency Contact Center</h3>
<address class="usa-footer__address">
<div class="usa-footer__contact-info grid-row grid-gap">
<div class="grid-col-auto">
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
</div>
<div class="grid-col-auto">
<a href="mailto:info@agency.gov">info@agency.gov</a>
</div>
</div>
</address>
</div>
</div>
</div>
</div>
</footer>