Feature/13-added outline for settings page (#14)

* added outline for settings page

* progress on outline

* split up the account page

* capture+ settings dashboard

* added warning message

* test warning

README.md

@@ -4,6 +4,9 @@
 
 # SOARCA-GUI
 
+> [!WARNING]
+> SOARCA-GUI is still in development and features for the base version v0.1 are still being added.
+
 A [Go](https://go.dev), [Templ](https://templ.guide/), [Tailwind CSS](https://tailwindcss.com/) and [HTMX](https://htmx.org/) based GUI for [SOARCA](https://github.com/COSSAS/SOARCA). 
 
 

handlers/settings.go

@@ -0,0 +1,15 @@
+package handlers
+
+import (
+	"net/http"
+
+	"soarca-gui/utils"
+	"soarca-gui/views/dashboard/settings"
+
+	"github.com/gin-gonic/gin"
+)
+
+func SettingsDashboard(context *gin.Context) {
+	render := utils.NewTempl(context, http.StatusOK, settings.SettingsIndex())
+	context.Render(http.StatusOK, render)
+}

routes/routes.go

@@ -21,6 +21,7 @@ func Setup(app *gin.Engine) {
 	PublicRoutes(publicRoutes)
 	Reporting(publicRoutes)
 	StatusGroup(publicRoutes)
+	SettingsRouter(publicRoutes)
 }
 
 func PublicRoutes(app *gin.RouterGroup) {
@@ -53,3 +54,10 @@ func StatusGroup(app *gin.RouterGroup) {
 		statusRoute.GET("/indicator/card", statusHandler.HealthComponentHandler)
 	}
 }
+
+func SettingsRouter(app *gin.RouterGroup) {
+	reportingRoute := app.Group("/settings")
+	{
+		reportingRoute.GET("/", handlers.SettingsDashboard)
+	}
+}

views/components/settings_cards.templ

@@ -0,0 +1,55 @@
+package components
+
+templ AccountSettingsCard() {
+
+
+    <div class="col-span-8 overflow-hidden rounded-xl sm:bg-gray-50 sm:px-8 sm:shadow">
+      <div class="pt-4">
+        <h1 class="py-2 text-2xl font-semibold">Account settings</h1>
+        <!-- <p class="font- text-slate-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> -->
+      </div>
+      <hr class="mt-4 mb-8" />
+      <p class="py-2 text-xl font-semibold">Email Address</p>
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+        <p class="text-gray-600">Your email address is <strong></strong></p>
+        <button class="inline-flex text-sm font-semibold text-blue-600 underline decoration-2">Change</button>
+      </div>
+      <hr class="mt-4 mb-8" />
+      <p class="py-2 text-xl font-semibold">Password</p>
+      <div class="flex items-center">
+        <div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-3">
+          <label for="login-password">
+            <span class="text-sm text-gray-500">Current Password</span>
+            <div class="relative flex overflow-hidden rounded-md border-2 transition focus-within:border-blue-600">
+              <input type="password" id="login-password" class="w-full flex-shrink appearance-none border-gray-300 bg-white py-2 px-4 text-base text-gray-700 placeholder-gray-400 focus:outline-none" placeholder="***********" />
+            </div>
+          </label>
+          <label for="login-password">
+            <span class="text-sm text-gray-500">New Password</span>
+            <div class="relative flex overflow-hidden rounded-md border-2 transition focus-within:border-blue-600">
+              <input type="password" id="login-password" class="w-full flex-shrink appearance-none border-gray-300 bg-white py-2 px-4 text-base text-gray-700 placeholder-gray-400 focus:outline-none" placeholder="***********" />
+            </div>
+          </label>
+        </div>
+        <svg xmlns="http://www.w3.org/2000/svg" class="mt-5 ml-2 h-6 w-6 cursor-pointer text-sm font-semibold text-gray-600 underline decoration-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+        </svg>
+      </div>
+      <p class="mt-2">Can't remember your current password. <a class="text-sm font-semibold text-blue-600 underline decoration-2" href="#">Recover Account</a></p>
+      <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white">Save Password</button>
+      <hr class="mt-4 mb-8" />
+
+      <div class="mb-10">
+        <p class="py-2 text-xl font-semibold">Delete Account</p>
+        <p class="inline-flex items-center rounded-full bg-rose-100 px-4 py-1 text-rose-600">
+          <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+          Proceed with caution
+        </p>
+        <p class="mt-2">Make sure you have taken backup of your account in case you ever need to get access to your data. We will completely wipe your data. There is no way to access your account after this action.</p>
+        <button class="ml-auto text-sm font-semibold text-rose-600 underline decoration-2">Continue with deletion</button>
+      </div>
+    </div>
+
+}

views/dashboard/settings/settings.templ

@@ -0,0 +1,53 @@
+package settings
+
+import (
+    "soarca-gui/views/layouts"
+	"soarca-gui/views/components"
+)
+
+const (
+  pageTitle = "Settings"
+)
+
+templ SettingsIndex() {
+    @layouts.DashboardLayout("SOARCA-GUI", "", ""){
+    <main class="w-full flex-grow p-6">
+      @settingBase(){
+        @components.AccountSettingsCard()
+      } 
+     </main>
+    }
+}
+
+
+
+templ settingBase() {
+
+  <h1 class="text-3xl text-black pb-2">{ pageTitle }</h1>
+  <div class="grid grid-cols-8 pt-3 sm:grid-cols-10">
+    <div class="relative my-4 w-56 sm:hidden">
+      <input class="peer hidden" type="checkbox" name="select-1" id="select-1" />
+      <label for="select-1" class="flex w-full cursor-pointer select-none rounded-lg border p-2 px-3 text-sm text-gray-700 ring-blue-700 peer-checked:ring">Accounts </label>
+      <svg xmlns="http://www.w3.org/2000/svg" class="pointer-events-none absolute right-0 top-3 ml-auto mr-5 h-4 text-slate-700 transition peer-checked:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+      </svg>
+      <ul class="max-h-0 select-none flex-col overflow-hidden rounded-b-lg shadow-md transition-all duration-300 peer-checked:max-h-56 peer-checked:py-3">
+        <li class="cursor-pointer px-3 py-2 text-sm text-slate-600 hover:bg-blue-700 hover:text-white">SOARCA</li>
+        <li class="cursor-pointer px-3 py-2 text-sm text-slate-600 hover:bg-blue-700 hover:text-white">Accounts</li>
+        <li class="cursor-pointer px-3 py-2 text-sm text-slate-600 hover:bg-blue-700 hover:text-white">Integrations</li>
+      </ul>
+    </div>
+
+    <div class="col-span-2 hidden sm:block">
+      <ul>
+        <li class="mt-5 cursor-pointer border-l-2 border-transparent px-2 py-2 font-semibold transition hover:border-l-blue-700 hover:text-blue-700">SOARCA</li>
+        <li class="mt-5 cursor-pointer border-l-2 border-l-blue-700 px-2 py-2 font-semibold text-blue-700 transition hover:border-l-blue-700 hover:text-blue-700">Accounts</li>
+        <li class="mt-5 cursor-pointer border-l-2 border-transparent px-2 py-2 font-semibold transition hover:border-l-blue-700 hover:text-blue-700">Integrations</li>
+      </ul>
+    </div>
+
+   { children... } 
+  </div>
+
+
+}