add elements to home page that can be used with login

internal/server/handlers.go

@@ -13,10 +13,9 @@ import (
 )
 
 func handleIndex(ctx *fiber.Ctx) error {
-	binding := map[string]interface{}{
-		templating.MustacheKeyLoggedIn:       false,
-		templating.MustacheKeyCookieLifetime: cookies.CookieLifetime,
-	}
+	binding := homeBindingData()
+	binding[templating.MustacheKeyLoggedIn] = false
+	binding[templating.MustacheKeyCookieLifetime] = cookies.CookieLifetime
 	providers := []map[string]string{}
 	for _, p := range config.Get().Providers {
 		pp := make(map[string]string, 2)
@@ -25,11 +24,11 @@ func handleIndex(ctx *fiber.Ctx) error {
 		providers = append(providers, pp)
 	}
 	binding["providers"] = providers
-	return ctx.Render("sites/index", binding, templating.LayoutMain)
+	return ctx.Render("sites/home", binding, templating.LayoutMain)
 }
 
-func handleHome(ctx *fiber.Ctx) error {
-	binding := map[string]interface{}{
+func homeBindingData() map[string]interface{} {
+	return map[string]interface{}{
 		templating.MustacheKeyLoggedIn:             true,
 		templating.MustacheKeyRestrictionsGUI:      true,
 		templating.MustacheKeyHome:                 true,
@@ -46,7 +45,10 @@ func handleHome(ctx *fiber.Ctx) error {
 			templating.MustacheKeyPrefix: "createMT-",
 		},
 	}
-	return ctx.Render("sites/home", binding, templating.LayoutMain)
+}
+
+func handleHome(ctx *fiber.Ctx) error {
+	return ctx.Render("sites/home", homeBindingData(), templating.LayoutMain)
 }
 
 func handleSettings(ctx *fiber.Ctx) error {

internal/server/web/partials/scripts.mustache

+<script src="{{instance-url}}/static/js/lib/clipboard.min.js"></script>
 <script src="{{instance-url}}/static/js/utils.js"></script>
 <script src="{{instance-url}}/static/js/storage.js"></script>
 <script src="{{instance-url}}/static/js/discovery.js"></script>
@@ -5,14 +6,14 @@
     <script src="{{instance-url}}/static/js/login-check.js"></script>
     {{^logged-in}}
         <script src="{{instance-url}}/static/js/login.js"></script>
+        <script src="{{instance-url}}/static/js/home-not-logged-in.js"></script>
     {{/logged-in}}
     {{#logged-in}}
-        <script src="{{instance-url}}/static/js/lib/clipboard.min.js"></script>
-        <script src="{{instance-url}}/static/js/logged-in-utils.js"></script>
-        <script src="{{instance-url}}/static/js/lib/bootstrap4-toggle.min.js"></script>
         <script src="{{instance-url}}/static/js/logout.js"></script>
+        <script src="{{instance-url}}/static/js/home-logged-in.js"></script>
     {{/logged-in}}
     {{#home}}
+        <script src="{{instance-url}}/static/js/lib/bootstrap4-toggle.min.js"></script>
         <script src="{{instance-url}}/static/js/lib/user-agent.min.js"></script>
         <script src="{{instance-url}}/static/js/mt-helper.js"></script>
         <script src="{{instance-url}}/static/js/home.js"></script>

internal/server/web/partials/style.mustache

 <link rel="stylesheet" href="{{instance-url}}/static/css/colors.css">
-{{#logged-in}}
-    <link rel="stylesheet" href="{{instance-url}}/static/css/mytoken-loggedin.css">
-    <link rel="stylesheet" href="{{instance-url}}/static/css/lib/bootstrap4-toggle.min.css">
-{{/logged-in}}
+<link rel="stylesheet" href="{{instance-url}}/static/css/lib/bootstrap4-toggle.min.css">
 {{#consent}}
-    <link rel="stylesheet" href="{{instance-url}}/static/css/lib/bootstrap4-toggle.min.css">
     <link rel="stylesheet" href="{{instance-url}}/static/css/capabilities.css">
 {{/consent}}
 {{#settings-ssh}}

internal/server/web/sites/home.mustache

 <div class="card">
     <div class="card-header">
         <ul class="nav nav-tabs card-header-tabs">
+            {{#logged-in}}
+                <li class="nav-item">
+                    <a class="nav-link active" id="at-tab" data-toggle="tab" href="#at" role="tab" aria-controls="at"
+                       aria-selected="true">Access Token</a>
+                </li>
+            {{/logged-in}}
             <li class="nav-item">
-                <a class="nav-link active" id="at-tab" data-toggle="tab" href="#at" role="tab" aria-controls="at"
-                   aria-selected="true">Access Token</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" id="mt-tab" data-toggle="tab" href="#mt" role="tab" aria-controls="mt"
-                   aria-selected="false">Create Mytoken</a>
+                <a class="nav-link{{^logged-in}} active{{/logged-in}}" id="mt-tab" data-toggle="tab" href="#mt"
+                   role="tab" aria-controls="mt" aria-selected="false">Create Mytoken</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info"
                    aria-selected="false">Tokeninfo</a>
             </li>
-            <li class="nav-item">
-                <a class="nav-link" id="list-mts-tab" data-toggle="tab" href="#list-mts" role="tab"
-                   aria-controls="list-mts" aria-selected="false">My Mytokens</a>
-            </li>
             <li class="nav-item">
                 <a class="nav-link" id="tc-tab" data-toggle="tab" href="#transfer" role="tab"
                    aria-controls="transfer" aria-selected="false">Exchange Transfercode</a>
             </li>
+            {{#logged-in}}
+                <li class="nav-item">
+                    <a class="nav-link" id="list-mts-tab" data-toggle="tab" href="#list-mts" role="tab"
+                       aria-controls="list-mts" aria-selected="false">My Mytokens</a>
+                </li>
+            {{/logged-in}}
         </ul>
     </div>
     <div class="card-body tab-content">
-        <div class="tab-pane show active" id="at" role="tabpanel" aria-labelledby="at-tab">
-            {{> create-at}}
-        </div>
-        <div class="tab-pane bg-secondary break-out" id="mt" role="tabpanel" aria-labelledby="mt-tab">
+        {{#logged-in}}
+            <div class="tab-pane show active" id="at" role="tabpanel" aria-labelledby="at-tab">
+                {{> create-at}}
+            </div>
+        {{/logged-in}}
+        <div class="tab-pane bg-secondary break-out{{^logged-in}} active{{/logged-in}}" id="mt" role="tabpanel"
+             aria-labelledby="mt-tab">
             <div class="bg-secondary ">
                 {{> create-mt}}
             </div>
@@ -35,11 +42,19 @@
         <div class="tab-pane" id="info" role="tabpanel" aria-labelledby="info-tab">
             {{> tokeninfo}}
         </div>
-        <div class="tab-pane" id="list-mts" role="tabpanel" aria-labelledby="list-mts-tab">
-            {{> list-mts}}
-        </div>
         <div class="tab-pane" id="transfer" role="tabpanel" aria-labelledby="tc-tab">
             {{> transfercode}}
         </div>
+        {{#logged-in}}
+            <div class="tab-pane" id="list-mts" role="tabpanel" aria-labelledby="list-mts-tab">
+                {{> list-mts}}
+            </div>
+        {{/logged-in}}
     </div>
-</div>
\ No newline at end of file
+</div>
+
+{{^logged-in}}
+    <script>
+        let cookieLifetime = {{cookie-lifetime}};
+    </script>
+{{/logged-in}}

internal/server/web/sites/index.mustache

-<h1>Welcome to the mytoken service</h1>
-
-<p>
-    This is a demo instance of the mytoken service. This service is currently under active development.<br>
-    For more information refer to: <a href="https://github.com/oidc-mytoken/server">https://github.com/oidc-mytoken/server</a>
-</p>
-<p>
-    On this web page you can easily obtain OpenID Connect access tokens. You can do the same on the command line with
-    our
-    <a href="https://github.com/oidc-mytoken/client">command line client</a>.
-</p>
-
-<script>
-    let cookieLifetime = {{cookie-lifetime}};
-</script>
\ No newline at end of file

internal/server/web/static/css/mytoken-loggedin.css

-.hover-text {
-    display: none;
-}
-
-.hover-item:hover .hover-text {
-    display: inline-block;
-}
-
-.hover-item:hover .non-hover-text {
-    display: none;
-}
-
-span.user-agent i + i {
-    padding-left: 1em;
-}
-
-@media (min-width: 1440px) {
-    .break-out {
-        margin: -1.25rem -125px;
-        padding: 1.25rem;
-    }
-}
-
-@media (min-width: 1600px) {
-    .break-out {
-        margin: -1.25rem -225px;
-        padding: 1.25rem;
-    }
-}
-
-.btn-copy {
-    position: absolute;
-    margin-top: -28px;
-    right: -8px;
-}
-
-.btn-copy-inline {
-    position: absolute;
-    right: 8px;
-}
-
-#sshHostConfigCopy {
-    margin-top: 0;
-    right: 15px;
-}
-
-.btn-reload {
-    position: absolute;
-    margin-top: -28px;
-    right: 14px;
-}
-
-.token-fold {
-    cursor: pointer;
-    user-select: none;
-}
\ No newline at end of file

internal/server/web/static/css/mytoken.css

@@ -74,4 +74,61 @@ hr {
 .svg-icon {
     width: 1em;
     height: 1em;
-}
\ No newline at end of file
+}
+
+.hover-text {
+    display: none;
+}
+
+.hover-item:hover .hover-text {
+    display: inline-block;
+}
+
+.hover-item:hover .non-hover-text {
+    display: none;
+}
+
+span.user-agent i + i {
+    padding-left: 1em;
+}
+
+@media (min-width: 1440px) {
+    .break-out {
+        margin: -1.25rem -125px;
+        padding: 1.25rem;
+    }
+}
+
+@media (min-width: 1600px) {
+    .break-out {
+        margin: -1.25rem -225px;
+        padding: 1.25rem;
+    }
+}
+
+.btn-copy {
+    position: absolute;
+    margin-top: -28px;
+    right: -8px;
+}
+
+.btn-copy-inline {
+    position: absolute;
+    right: 8px;
+}
+
+#sshHostConfigCopy {
+    margin-top: 0;
+    right: 15px;
+}
+
+.btn-reload {
+    position: absolute;
+    margin-top: -28px;
+    right: 14px;
+}
+
+.token-fold {
+    cursor: pointer;
+    user-select: none;
+}

internal/server/web/static/js/home-logged-in.js

+$(function () {
+    chainFunctions(
+        checkIfLoggedIn,
+        initAT,
+        initCreateMT,
+        initTokeninfo,
+    );
+    openCorrectTab();
+})

internal/server/web/static/js/home-not-logged-in.js

+$(function () {
+    chainFunctions(
+        initCreateMT,
+        initTokeninfo,
+    );
+    openCorrectTab();
+})

internal/server/web/static/js/home.js

-$(function () {
-    chainFunctions(
-        checkIfLoggedIn,
-        initAT,
-        initCreateMT,
-        initTokeninfo,
-    );
+function openCorrectTab() {
     // https://stackoverflow.com/a/17552459
     // Javascript to enable link to tab
     let url = document.location.toString();
@@ -15,7 +9,7 @@ $(function () {
         }
         $('.nav-tabs a[href="#' + hash + '"]').tab('show');
     }
-})
+}
 
 
 // With HTML5 history API, we can easily prevent scrolling!

internal/server/web/static/js/logged-in-utils.js

-let clipboard = new ClipboardJS('.copier');
-clipboard.on('success', function (e) {
-    e.clearSelection();
-    let el = $(e.trigger);
-    let originalText = el.attr('data-original-title');
-    el.attr('data-original-title', 'Copied!').tooltip('show');
-    el.attr('data-original-title', originalText);
-});

internal/server/web/static/js/utils.js

@@ -109,4 +109,11 @@ function prefixId(id, prefix = "") {
     return '#' + prefix + escapeSelector(id);
 }
 
-
+let clipboard = new ClipboardJS('.copier');
+clipboard.on('success', function (e) {
+    e.clearSelection();
+    let el = $(e.trigger);
+    let originalText = el.attr('data-original-title');
+    el.attr('data-original-title', 'Copied!').tooltip('show');
+    el.attr('data-original-title', originalText);
+});