templates/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Ipsilon</title>
   5     <meta charset="utf-8" />
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <link href="{{ basepath }}/ui/css/patternfly.css" rel="stylesheet" media="screen, print">
   8     <link href="{{ basepath }}/ui/css/styles.css" rel="stylesheet" media="screen, print">
   9   </head>
  10
  11   <body class="cards-pf">
  12     <nav class="navbar navbar-default navbar-pf navbar-pf-lg" role="navigation">
  13       <div class="navbar-header">
  14         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
  15           <span class="sr-only">Toggle navigation</span>
  16           <span class="icon-bar"></span>
  17           <span class="icon-bar"></span>
  18           <span class="icon-bar"></span>
  19         </button>
  20         <a class="navbar-brand" href="{{ basepath }}/">
  21           <img type="image/svg+xml" src="{{ basepath }}/ui/img/brand.png" alt="Ipsilon" width="auto" height="10px" />
  22         </a>
  23       </div>
  24       <div class="collapse navbar-collapse navbar-collapse-1">
  25         {% if user.name %}
  26         <ul class="nav navbar-nav navbar-utility">
  27           <li class="dropdown">
  28               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  29                 <span class="pficon pficon-user"></span>
  30                 {{ user.fullname }}<b class="caret"></b>
  31               </a>
  32             <ul class="dropdown-menu">
  33               <li>
  34                 <a href="{{ basepath }}/logout" id="logout">Log Out</a>
  35               </li>
  36             </ul>
  37           </li>
  38         </ul>
  39         {% endif %}
  40       </div>
  41     </nav>
  42
  43 <div class="col-sm-12">
  44   <p></p>
  45   <div id="welcome">
  46     {% if user.name %}
  47       <p>Welcome {{ user.fullname }}!</p>
  48       <p>Select a Service Provider
  49       {% if user.is_admin %}
  50           or go to the
  51           <a href="{{ basepath }}/admin" id="admin">Administration Console</a>
  52       {% endif %}
  53       .</p>
  54     {% endif %}
  55   </div>
  56   <div id="content">
  57     {% if not user.name %}
  58       <p>Please <a href="{{ basepath }}/login">Log In</a>
  59     {% elif user.sites %}
  60       <p>Registered application shortcuts:</p>
  61         {% for site in user.sites %}
  62           <p><a href="{{ site.link }}">{{ site.name }}</a></p>
  63         {% endfor %}
  64     {% endif %}
  65   </div>
  66   <div id="authenticated">
  67     {% if user.name %}
  68     <div class="container-fluid">
  69
  70       <div class="header">
  71
  72         <form role="form" class="search-pf has-button">
  73           <div class="form-group has-clear">
  74             <div class="search-pf-input-group">
  75               <label for="search1" class="sr-only">Search</label>
  76               <input id="search1" type="search" class="form-control div-filter" placeholder="Search" providers="providers">
  77               <button type="button" class="clear" aria-hidden="true"><span class
  78 ="pficon pficon-close"></span></button>
  79             </div>
  80           </div>
  81           <div class="form-group">
  82             <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
  83           </div>
  84         </form>
  85       </div><!-- header -->
  86
  87       <div class="row thumbnails providers" id="providers">
  88       {% for p in providers %}
  89         {% if (p.visible == '1') or (p.visible == 'True') %}
  90         <div class="col-sm-4 col-md-3 provider">
  91           <a
  92              {% if p.splink or 0 %}
  93                href="{{ basepath }}/saml2/SSO/Redirect?SPIdentifier={{ p.provider_id }}&RelayState={{ p.splink }}"
  94              {% else %}
  95                href="#"
  96              {% endif %}
  97              class="thumbnail" data-toggle="tooltip" data-placement="top" title="{{ p.description }}" name="{{ p.name }}">
  98             {% if p.imageurl or 0 %}
  99               <img src="{{ p.imageurl }}" height=100 width=200>
 100             {% else %}
 101               <span class="name">
 102                 <span class="name-icon">{{ p.name[0] }}</span>
 103                 {{ p.name }}
 104               </span>
 105             {% endif %}
 106           </a>
 107         </div>
 108         {% endif %}
 109       {% endfor %}
 110
 111       </div><!-- row -->
 112
 113
 114     </div><!-- /container -->
 115
 116     {% endif %}
 117   </div>
 118 </div>
 119
 120     <!-- JS -->
 121     <script src="{{ basepath }}/ui/js/jquery.js"></script>
 122     <script src="{{ basepath }}/ui/js/bootstrap.js"></script>
 123     <script src="{{ basepath }}/ui/js/patternfly.js"></script>
 124     <script src="{{ basepath }}/ui/js/divfilter.js"></script>
 125
 126     <script>
 127       (function($) {
 128         $(document).ready(function() {
 129           // Hide the clear button if the search input is empty
 130           $(".search-pf .has-clear .clear").each(function() {
 131             if (!$(this).prev('.form-control').val()) {
 132               $(this).hide();
 133             }
 134           });
 135           // Show the clear button upon entering text in the search input
 136           $(".search-pf .has-clear .form-control").keyup(function () {
 137             var t = $(this);
 138             t.next('button').toggle(Boolean(t.val()));
 139           });
 140           // Upon clicking the clear button, empty the entered text and hide the clear button
 141           $(".search-pf .has-clear .clear").click(function () {
 142             $(this).prev('.form-control').val('').focus();
 143             $(this).hide();
 144           });
 145         });
 146
 147         $(function () {
 148       $('[data-toggle="tooltip"]').tooltip()
 149     })
 150
 151       })(jQuery);
 152     </script>
 153
 154   </body>
 155 </html>