templates/kubeconfig.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate">
    <meta http-equiv="Content-Language" content="en">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Kubernetes Configuration</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ .Web_Path_Prefix }}static/main.css" rel="stylesheet" type="text/css">
    <link href="{{ .Web_Path_Prefix }}static/styles.css" rel="stylesheet" type="text/css">
    <link href="{{ .Web_Path_Prefix }}static/tabs.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="{{ .Web_Path_Prefix }}static/favicon.png">
  </head>

<body class="theme-body">
  <div class="theme-navbar">
    {{ if .LogoURI }}
    <div class="theme-navbar__logo-wrap">
        <img class="theme-navbar__logo" src="{{ .LogoURI }}"/>
    </div>
    {{ end }}
  </div>

  <div class="dex-kubeconfig-container">
    <div class="theme-panel">
      <div style="float:right">
        <a href="{{ .Web_Path_Prefix }}">Login Again</a>
      </div>
      <h2 class="theme-heading">Generated Kubernetes Token - {{ .ShortDescription }}</h2>

      <div>

        <p>Please check that you have been assigned to the expected Groups, then follow the instructions
          based on your OS.
        </p>

        <div class="groups">
        <pre><code>{{ .Claims }}</code></pre>
        </div>

        <div class="tab">
          <button class="tablinks active" onclick="openTab(event, 'Linux')">Linux</button>
          <button class="tablinks" onclick="openTab(event, 'MacOS')">MacOS</button>
          <button class="tablinks" onclick="openTab(event, 'Windows')">Windows</button>
          <button class="tablinks" onclick="openTab(event, 'IDToken')">ID Token</button>
        </div>

        <div id="Linux" class="tabcontent" style="display: block">
          {{ template "linux-tab-content" . }}
        </div>
          
        <div id="MacOS" class="tabcontent">
          {{ template "mac-tab-content" . }}
        </div>
        
        <div id="Windows" class="tabcontent">
          {{ template "windows-tab-content" . }}
        </div>

        <div id="IDToken" class="tabcontent">
          {{ template "id-token-content" . }}
        </div>

    </div>
  </div>

  <script src="{{ .Web_Path_Prefix }}static/highlight.pack.min.js"></script>
  <script src="{{ .Web_Path_Prefix }}static/clipboard.min.js"></script>
  <script src="{{ .Web_Path_Prefix }}static/snippets.js"></script>
  <script src="{{ .Web_Path_Prefix }}static/tooltips.js"></script>
  <script>
      var clipboard = new ClipboardJS('.btn');
      clipboard.on('success', function(e) {
          console.log(e);
      });
      clipboard.on('error', function(e) {
          console.log(e);
      });
  </script>

  <script>
      function openTab(evt, tabName) {
          var i, tabcontent, tablinks;
          tabcontent = document.getElementsByClassName("tabcontent");
          for (i = 0; i < tabcontent.length; i++) {
              tabcontent[i].style.display = "none";
          }
          tablinks = document.getElementsByClassName("tablinks");
          for (i = 0; i < tablinks.length; i++) {
              tablinks[i].className = tablinks[i].className.replace(" active", "");
          }
          document.getElementById(tabName).style.display = "block";
          evt.currentTarget.className += " active";
      }
  </script>

</body>
</html>