refactor(wip): redesign settings page

middlewares/security.go

@@ -6,7 +6,7 @@ import (
 
 var securityHeaders = map[string]string{
 	"Cross-Origin-Opener-Policy": "same-origin",
-	"Content-Security-Policy":    "default-src 'self' 'unsafe-inline'; img-src 'self' https: data:; form-action 'self'; block-all-mixed-content;",
+	"Content-Security-Policy":    "default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' https: data:; form-action 'self'; block-all-mixed-content;",
 	"X-Frame-Options":            "DENY",
 	"X-Content-Type-Options":     "nosniff",
 }

models/summary.go

@@ -49,18 +49,6 @@ type SummaryItemContainer struct {
 	Items []*SummaryItem
 }
 
-type SummaryViewModel struct {
-	*Summary
-	*SummaryParams
-	User           *User
-	AvatarURL      string
-	LanguageColors map[string]string
-	Error          string
-	Success        string
-	ApiKey         string
-	RawQuery       string
-}
-
 type SummaryParams struct {
 	From      time.Time
 	To        time.Time

models/view/settings.go

@@ -8,6 +8,7 @@ type SettingsViewModel struct {
 	Aliases          []*SettingsVMCombinedAlias
 	Labels           []*SettingsVMCombinedLabel
 	Projects         []string
+	ApiKey           string
 	Success          string
 	Error            string
 }

models/view/summary.go

@@ -1,8 +1,17 @@
 package view
 
+import "github.com/muety/wakapi/models"
+
 type SummaryViewModel struct {
-	Success string
+	*models.Summary
-	Error   string
+	*models.SummaryParams
+	User           *models.User
+	AvatarURL      string
+	LanguageColors map[string]string
+	Error          string
+	Success        string
+	ApiKey         string
+	RawQuery       string
 }
 
 func (s *SummaryViewModel) WithSuccess(m string) *SummaryViewModel {

routes/settings.go

@@ -682,6 +682,7 @@ func (h *SettingsHandler) buildViewModel(r *http.Request) *view.SettingsViewMode
 		Aliases:          combinedAliases,
 		Labels:           combinedLabels,
 		Projects:         projects,
+		ApiKey:           user.ApiKey,
 		Success:          r.URL.Query().Get("success"),
 		Error:            r.URL.Query().Get("error"),
 	}

routes/summary.go

@@ -4,7 +4,6 @@ import (
 	"github.com/gorilla/mux"
 	conf "github.com/muety/wakapi/config"
 	"github.com/muety/wakapi/middlewares"
-	"github.com/muety/wakapi/models"
 	"github.com/muety/wakapi/models/view"
 	su "github.com/muety/wakapi/routes/utils"
 	"github.com/muety/wakapi/services"
@@ -61,7 +60,7 @@ func (h *SummaryHandler) GetIndex(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	vm := models.SummaryViewModel{
+	vm := view.SummaryViewModel{
 		Summary:        summary,
 		SummaryParams:  summaryParams,
 		User:           user,

static/assets/icons.js

@@ -20,3 +20,4 @@ Iconify.addCollection({"prefix":"fa-solid","icons":{"external-link-alt":{"body":
 Iconify.addCollection({"prefix":"simple-icons","icons":{"wakatime":{"body":"<path d=\"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12s12-5.373 12-12S18.627 0 12 0zm0 2.824a9.176 9.176 0 1 1 0 18.352a9.176 9.176 0 0 1 0-18.352zm5.097 5.058c-.327 0-.61.19-.764.45c-1.025 1.463-2.21 3.162-3.288 4.706l-.387-.636a.897.897 0 0 0-.759-.439a.901.901 0 0 0-.788.492l-.357.581l-1.992-2.943a.897.897 0 0 0-.761-.446c-.514 0-.903.452-.903.96a1 1 0 0 0 .207.61l2.719 3.96c.152.272.44.47.776.47a.91.91 0 0 0 .787-.483c.046-.071.23-.368.314-.504l.324.52c-.035-.047.076.113.087.13c.024.031.054.059.078.085c.019.019.04.036.058.052c.036.033.08.056.115.08c.025.016.052.028.076.04c.029.015.06.024.088.035c.058.025.122.027.18.04c.031.004.064.003.092.005c.29 0 .546-.149.707-.36c1.4-2 2.842-4.055 4.099-5.849A.995.995 0 0 0 18 8.842c0-.508-.389-.96-.903-.96\" fill=\"currentColor\"/>"}},"width":24,"height":24});
 Iconify.addCollection({"prefix":"heroicons-solid","icons":{"light-bulb":{"body":"<g fill=\"none\"><path d=\"M11 3a1 1 0 1 0-2 0v1a1 1 0 1 0 2 0V3z\" fill=\"currentColor\"/><path d=\"M15.657 5.757a1 1 0 0 0-1.414-1.414l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707z\" fill=\"currentColor\"/><path d=\"M18 10a1 1 0 0 1-1 1h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" fill=\"currentColor\"/><path d=\"M5.05 6.464A1 1 0 1 0 6.464 5.05l-.707-.707a1 1 0 0 0-1.414 1.414l.707.707z\" fill=\"currentColor\"/><path d=\"M5 10a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" fill=\"currentColor\"/><path d=\"M8 16v-1h4v1a2 2 0 1 1-4 0z\" fill=\"currentColor\"/><path d=\"M12 14c.015-.34.208-.646.477-.859a4 4 0 1 0-4.954 0c.27.213.462.519.476.859h4.002z\" fill=\"currentColor\"/></g>"},"server":{"body":"<g fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5zm14 1a1 1 0 1 1-2 0a1 1 0 0 1 2 0z\" fill=\"currentColor\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2zm14 1a1 1 0 1 1-2 0a1 1 0 0 1 2 0z\" fill=\"currentColor\"/></g>"}},"width":20,"height":20});
 Iconify.addCollection({"prefix":"ion","icons":{"rocket":{"body":"<path d=\"M328.85 156.79a26.69 26.69 0 1 0 18.88 7.81a26.6 26.6 0 0 0-18.88-7.81z\" fill=\"currentColor\"/><path d=\"M477.44 50.06a.29.29 0 0 1 0-.09a20.4 20.4 0 0 0-15.13-15.3c-29.8-7.27-76.68.48-128.63 21.28c-52.36 21-101.42 52-134.58 85.22A320.7 320.7 0 0 0 169.55 175c-22.33-1-42 2.18-58.57 9.41c-57.74 25.41-74.23 90.44-78.62 117.14a25 25 0 0 0 27.19 29h.13l64.32-7.02c.08.82.17 1.57.24 2.26a34.36 34.36 0 0 0 9.9 20.72l31.39 31.41a34.27 34.27 0 0 0 20.71 9.91l2.15.23l-7 64.24v.13A25 25 0 0 0 206 480a25.25 25.25 0 0 0 4.15-.34C237 475.34 302 459.05 327.34 401c7.17-16.46 10.34-36.05 9.45-58.34a314.78 314.78 0 0 0 33.95-29.55c33.43-33.26 64.53-81.92 85.31-133.52c20.69-51.36 28.48-98.59 21.39-129.53zM370.38 224.94a58.77 58.77 0 1 1 0-83.07a58.3 58.3 0 0 1 0 83.07z\" fill=\"currentColor\"/><path d=\"M161.93 386.44a16 16 0 0 0-11 2.67c-6.39 4.37-12.81 8.69-19.29 12.9c-13.11 8.52-28.79-6.44-21-20l12.15-21a16 16 0 0 0-15.16-24.91A61.25 61.25 0 0 0 72 353.56c-3.66 3.67-14.79 14.81-20.78 57.26A357.94 357.94 0 0 0 48 447.59A16 16 0 0 0 64 464h.4a359.87 359.87 0 0 0 36.8-3.2c42.47-6 53.61-17.14 57.27-20.8a60.49 60.49 0 0 0 17.39-35.74a16 16 0 0 0-13.93-17.82z\" fill=\"currentColor\"/>"}},"width":512,"height":512});
+Iconify.addCollection({"prefix":"clarity","icons":{"warning-standard-solid":{"body":"<path class=\"clr-i-solid clr-i-solid-path-1\" d=\"M34.6 29.21L20.71 3.65a3.22 3.22 0 0 0-5.66 0L1.17 29.21A3.22 3.22 0 0 0 4 34h27.77a3.22 3.22 0 0 0 2.83-4.75zM16.6 10a1.4 1.4 0 0 1 2.8 0v12a1.4 1.4 0 0 1-2.8 0zM18 29.85a1.8 1.8 0 1 1 1.8-1.8a1.8 1.8 0 0 1-1.8 1.8z\" fill=\"currentColor\"/>"}},"width":36,"height":36});

views/foot.tpl.html

@@ -1,4 +1,5 @@
+<script src="assets/app.js"></script>
 <script src="assets/vendor/iconify.basic.min.js"></script>
 <script src="assets/vendor/seedrandom.min.js"></script>
 <script src="assets/vendor/chart.min.js"></script>
-<script src="assets/icons.js"></script>
+<script src="assets/icons.js"></script>

views/head.tpl.html

@@ -17,4 +17,5 @@
     <link href="assets/vendor/tailwind.dist.css" rel="stylesheet">
     {{ end }}
     <link href="assets/app.css" rel="stylesheet">
+    <script src="assets/vendor/petite-vue.min.js" defer></script>
 </head>

views/login.tpl.html

@@ -12,7 +12,7 @@
 <main class="mt-10 flex-grow flex justify-center w-full">
     <div class="flex-grow max-w-lg mt-10">
         <div class="mb-8">
-            <h1 class="font-semibold text-2xl text-white m-0">Welcome!</h1>
+            <h1 class="font-semibold text-3xl text-white m-0">Welcome!</h1>
             <span class="text-gray-600">Log in to continue using Wakapi</span>
         </div>
         <form action="login" method="post">

views/menu-main.tpl.html

@@ -3,10 +3,10 @@
     {{ template "logo.tpl.html" }}
     </div>
 
-    <div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer">
+    <a class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer" href="summary">
         <span class="iconify inline text-2xl text-gray-400" data-icon="ic:round-dashboard"></span>
-        <a class="text-gray-300" href="summary">Dashboard</a>
+        <span class="text-gray-300">Dashboard</span>
-    </div>
+    </a>
 
     <div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-not-allowed">
         <span class="iconify inline text-2xl text-gray-700" data-icon="bi:people-fill"></span>
@@ -32,7 +32,7 @@
         <div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown">
             <div class="flex-grow flex flex-col">
                 <div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
-                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
+                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
                         <span class="text-sm">GitHub</span>
                         <span class="iconify inline" data-icon="codicon:github-inverted"></span>
                     </a>
@@ -44,13 +44,13 @@
                     </a>
                 </div>
                 <div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
-                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
+                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
                         <span class="text-sm">WakaTime</span>
                         <span class="iconify inline" data-icon="simple-icons:wakatime"></span>
                     </a>
                 </div>
                 <div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
-                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
+                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
                         <span class="text-sm">Donate</span>
                         <span class="iconify inline" data-icon="bx:bxs-heart"></span>
                     </a>
@@ -59,10 +59,10 @@
         </div>
     </div>
 
-    <div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer">
+    <a class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer" href="settings">
         <span class="iconify inline text-2xl text-gray-400" data-icon="ci:settings-filled"></span>
-        <a class="text-gray-400" href="settings">Settings</a>
+        <span class="text-gray-400">Settings</span>
-    </div>
+    </a>
 
     <div class="flex-grow"></div>
 

views/signup.tpl.html

@@ -12,7 +12,7 @@
 <main class="mt-10 flex-grow flex justify-center w-full">
     <div class="flex-grow max-w-lg mt-10">
         <div class="mb-8">
-            <h1 class="font-semibold text-2xl text-white m-0 mb-2">Sign up to Wakapi</h1>
+            <h1 class="font-semibold text-3xl text-white m-0 mb-2">Sign up to Wakapi</h1>
             <p class="text-sm text-gray-600">
                 Welcome to Wakapi! Your first step is to create an account.
                 Afterwards, make sure to set up the <a href="https://wakatime.com" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-gray-400">WakaTime</a> client tools.

views/summary.tpl.html

@@ -7,6 +7,8 @@
 
 {{ template "menu-main.tpl.html" . }}
 
+{{ template "alerts.tpl.html" . }}
+
 {{ if .User.HasData }}
 
 <div class="flex justify-end mt-12 relative">
@@ -46,8 +48,6 @@
 
 {{ end }}
 
-{{ template "alerts.tpl.html" . }}
-
 <main class="flex flex-col items-center mt-10 flex-grow">
 
     {{ if .User.HasData }}
@@ -161,7 +161,7 @@
             <div class="p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id="label-container" style="height: 300px">
                 <div class="flex justify-between text-lg">
                     <span class="font-semibold whitespace-no-wrap">Labels</span>
-                    <a href="settings#details-labels" class="ml-4 h-8 inline flex-grow">
+                    <a href="settings#data" class="ml-4 inline p-2 hover:bg-gray-800 rounded" style="margin-top: -5px">
                         <span class="iconify inline" data-icon="twemoji:gear"></span>
                     </a>
                     <div class="flex justify-end flex-1 text-xs items-center">
@@ -182,12 +182,12 @@
         <div class="pb-4">
             <img src="assets/images/welcome.svg" width="200px" alt="User welcome illustration">
         </div>
-        <h1 class="font-semibold text-2xl text-white m-0 w-full">Welcome to Wakapi!</h1>
+        <h1 class="font-semibold text-3xl text-white m-0 w-full">Welcome to Wakapi!</h1>
         <p>
             It looks like there is no data available for the specified time range.<br>If you logged in to Wakapi for the first time, see the setup instructions below on how to get started.
         </p>
         <div class="w-full pt-10 flex flex-col space-y-4">
-            <h1 class="font-semibold text-2xl text-white m-0 mb-2">Setup Instructions</h1>
+            <h1 class="font-semibold text-3xl text-white m-0 mb-2">Setup Instructions</h1>
             <div class="w-full bg-gray-850 text-left rounded-md py-4 px-8 text-xs font-mono shadow-md">
                 # <strong>Step 1:</strong> Download WakaTime plugin for your IDE<br>
                 # See: https://wakatime.com/plugins<br><br>
@@ -238,8 +238,6 @@
     }
 
 </script>
-<script src="assets/app.js"></script>
-
 </body>
 
 </html>