netdisco/share/views/index.tt

<div class="container">
  <div class="row nd_hero-row">
    <div class="span8 offset2">
      [% IF params.login_failed %]
      <div class="alert alert-error fade in">
        <a class="close" data-dismiss="alert">×</a>
        Incorrect username or password, please try again.
      </div>
      [% END %]
      [% IF params.logout %]
      <div class="alert fade in">
        <a class="close" data-dismiss="alert">×</a>
        You are now logged out.
      </div>
      [% END %]
      [% IF params.nosuchdevice %]
      <div class="alert fade in">
        <a class="close" data-dismiss="alert">×</a>
        Sorry, no such device is known.
      </div>
      [% END %]
      [% IF vars.notfound %]
      <div class="alert fade in">
        <a class="close" data-dismiss="alert">×</a>
        Sorry, page not found.&nbsp;
          <a href="https://github.com/netdisco/netdisco/issues/new" target="_blank"><i class="icon-bug"></i>&nbsp;Report a Bug?</a>
      </div>
      [% END %]
      [% IF settings.suggest_guest AND NOT session.logged_in_user %]
      <div class="alert alert-info fade in">
        <a class="close" data-dismiss="alert">×</a>
        Guest access is available by entering username &quot;guest&quot; and password &quot;guest&quot;.
      </div>
      [% END %]
      <div class="hero-unit">
        <h2>Welcome to Netdisco</h2>
        <small>Netdisco is an Open Source management tool designed for network administrators.</small>
        [% IF NOT session.logged_in_user %]
        <form class="nd_login-form" method="post" action="[% uri_for('/login') | none %]">
          <div class="form-horizontal">
            <input id='loginuser' placeholder="Username" class="span2" name="username" type="text" required="required"/>
            <input placeholder="Password" class="span2" name="password" type="password" required="required"/>
            <button type="submit" class="btn btn-info">Log In</button>
            [% IF settings.login_logo %]
            <img src="[% settings.login_logo | none %]" alt="Login Logo" />
            [% END %]
          </div>
          [% IF params.return_url %]
          <input type="hidden" name="return_url" value="[% params.return_url | html_entity %]"/>
          [% END %]
        </form>
        [% ELSE %]
          <p></p> <p></p>
          <form class="" method="get" action="[% uri_for('/search') | none %]">
            <div class="form-horizontal">
              <input placeholder="Find Anything" class="span4" id="nqbody" name="q" type="search" autocomplete="off"/>
              <input name="firstsearch" type="hidden" value="on">
              <div class="btn-group">
                <button type="submit" class="btn btn-primary">Search</button>
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="caret"></span>&nbsp;
                </button>
                <ul class="dropdown-menu">
                  <li><a class="nd_navsearchgo-specific" href="" data-tab="device">Search Devices</a></li>
                  <li><a class="nd_navsearchgo-specific" href="" data-tab="node">Search Nodes</a></li>
                  <li><a class="nd_navsearchgo-specific" href="" data-tab="vlan">Search VLANs</a></li>
                  <li><a class="nd_navsearchgo-specific" href="" data-tab="port">Search Ports</a></li>
                </ul>
              </div>
            </div>
          </form>
          [% IF user_has_role('admin') %]
          <form class="nd_login-form" method="post" action="[% uri_for('/admin/discover') | none %]">
            <div class="form-horizontal">
              <input placeholder="Device hostname or IP" class="span4" name="device" value="[% params.device | html_entity %]" type="text"/>
              <input type="hidden" name="extra" value="with-nodes"/>
              <button type="submit" class="btn btn-info">Discover</button>
            </div>
          </form>
          [% END %]
        [% END %]
      </div>
    </div>
  </div>
  [% IF session.logged_in_user %]
  <div class="accordion" id="accordion-statistics">
    <div class="accordion-group">
      <div class="accordion-heading nd_sysinfo-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse-stats" href="#">
            <i class="icon-chevron-up nd_chevron"></i> System Information
          </a>
      </div>
      <div id="collapse-stats" class="accordion-body collapse">
        <div class="accordion-inner">
          <div id="nd_stats">
            <div id="nd_stats_status" class="span2 offset4 alert">
              <i class="icon-spinner icon-spin"></i> Compiling statistics...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  [% END %]
</div> <!-- /container -->

[% IF session.logged_in_user %]
<script type="text/javascript">
  var stats_loaded = 0;
  $('#nqbody').focus(); // set focus to main search
  $('#loginuser').focus(); // set focus to login, if it's there

  $('.collapse').on('show', function() {
    $('.nd_chevron').toggleClass('icon-chevron-up icon-chevron-down');

    if (! stats_loaded) {
      fetch( "[% uri_for('/ajax/content/statistics') | none %]",
        { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then( response => {
          if (! response.ok) {
            $('#nd_stats_status').addClass('alert-error')
              .html('<i class="icon-warning-sign"></i> Failed to retrieve system information (server error).');
            return;
            // throw new Error('Network response was not ok');
          }
          return response.text();
        })
        .then( content => {
          $('#nd_stats').html(content);
        })
        .catch( error => {
          $('#nd_stats_status').addClass('alert-error')
            .html('<i class="icon-warning-sign"></i> Failed to retrieve system information (network error: ' + error + ').');
          console.error('There has been a problem with your fetch operation:', error);
        });
      stats_loaded = 1;
    }
  });

  $('.collapse').on('hide', function() {
    $('.nd_chevron').toggleClass('icon-chevron-up icon-chevron-down');
  });
</script>
[% END %]