(feat) implement theme switcher

other smaller ui tweaks
sensepost · Jun 9, 2022 · 0cbdafb · 0cbdafb
1 parent 0c14e67
commit 0cbdafb
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 63 deletions.
diff --git a/cmd/server.go b/cmd/server.go
@@ -18,7 +18,8 @@ import (
 )
 
 var (
-	rsDB *gorm.DB
+	rsDB  *gorm.DB
+	theme string = "dark" // or light
 )
 
 // serverCmd represents the server command
@@ -74,8 +75,12 @@ $ gowitness server --addr 127.0.0.1:9000 --allow-insecure-uri`,
 		}
 
 		r := gin.Default()
+		r.Use(themeChooser(&theme))
 
-		tmpl := template.Must(template.New("").ParseFS(Embedded, "web/ui-templates/*.html"))
+		funcMap := template.FuncMap{
+			"GetTheme": getTheme,
+		}
+		tmpl := template.Must(template.New("").Funcs(funcMap).ParseFS(Embedded, "web/ui-templates/*.html"))
 		r.SetHTMLTemplate(tmpl)
 
 		// web ui routes
@@ -119,6 +124,65 @@ func init() {
 	serverCmd.Flags().BoolVarP(&options.AllowInsecureURIs, "allow-insecure-uri", "A", false, "allow uris that dont start with http(s)")
 }
 
+// middleware
+// --
+
+// getTheme gets the current theme choice
+func getTheme() string {
+	return theme
+}
+
+// themeChooser is a middleware to set the theme to use in the base template
+func themeChooser(choice *string) gin.HandlerFunc {
+	return func(c *gin.Context) {
+
+		// parse the query string as preference. this will indicate a theme switch
+		q := c.Query("theme")
+		if q == "light" {
+			d := "light"
+			*choice = d
+
+			// set the cookie for next time
+			c.SetCookie("gowitness_theme", "light", 604800, "/", "", false, false)
+			return
+		}
+
+		if q == "dark" {
+			d := "dark"
+			*choice = d
+
+			// set the cookie for next time
+			c.SetCookie("gowitness_theme", "dark", 604800, "/", "", false, false)
+			return
+		}
+
+		// if ?theme was invalid, read the cookie value.
+
+		cookie, err := c.Cookie("gowitness_theme")
+		if err != nil {
+			d := "dark"
+			*choice = d
+
+			// set the cookie for next time
+			c.SetCookie("gowitness_theme", "dark", 604800, "/", "", false, false)
+			return
+		}
+
+		if cookie == "light" {
+			d := "light"
+			*choice = d
+		}
+
+		if cookie == "dark" {
+			d := "dark"
+			*choice = d
+		}
+
+		// no change with an invalid value
+		return
+	}
+}
+
 // reporting web ui handlers
 // --
 
@@ -282,7 +346,7 @@ func detailHandler(c *gin.Context) {
 func tableHandler(c *gin.Context) {
 
 	var urls []storage.URL
-	rsDB.Preload("Network").Preload("Console").Find(&urls)
+	rsDB.Preload("Network").Preload("Console").Preload("Technologies").Find(&urls)
 
 	c.HTML(http.StatusOK, "table.html", gin.H{
 		"Data": urls,

diff --git a/web/ui-templates/base.html b/web/ui-templates/base.html
@@ -30,7 +30,7 @@
   <link href="/assets/css/tabler.min.css" rel="stylesheet" />
 </head>
 
-<body class=" layout-fluid theme-dark">
+<body class=" layout-fluid theme-{{ GetTheme }}">
   <div class="page">
 
     <!-- top nav bar -->

diff --git a/web/ui-templates/detail.html b/web/ui-templates/detail.html
@@ -61,9 +61,8 @@ <h2 class="page-title">
                 <img loading="lazy" src="/screenshots/{{ .Data.Filename }}"
                   onerror="this.onerror=null; this.src='/assets/img/blank.png'" class="card-img-top">
               </a>
-
-              <div class="card-body">
-                <div class="d-flex align-items-center">
+              <div class="card-footer">
+                <div class="d-flex">
                   <div>
                     <div>{{ .Data.URL }}</div>
                     <div class="text-muted">{{ .Data.Title }}</div>
@@ -73,9 +72,7 @@ <h2 class="page-title">
                       {{ end }}
                     </div>
                   </div>
-                  <div class="ms-auto text-muted">
-                    HTTP {{ .Data.ResponseCode}}
-                  </div>
+                  <a href="{{ .Data.URL }}" target="_blank" class="btn btn-primary ms-auto">Visit URL</a>
                 </div>
               </div>
             </div>
@@ -120,42 +117,45 @@ <h3 class="card-title">Console Log</h3>
               <div class="card-header">
                 <h3 class="card-title">TLS Information</h3>
               </div>
-              <div class="table-responsive">
-                <table class="table table-sm table-vcenter card-table">
-                  <thead>
-                    <tr>
-                      <th>Subject CN</th>
-                      <th>Issuer CN</th>
-                      <th>Sig Algorithm</th>
-                      <th>DNS Names</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {{ range .Data.TLS.TLSCertificates }}
-                    <tr>
-                      <td>
-                        {{ .SubjectCommonName }}
-                      </td>
-                      <td class="text-muted">
-                        {{ .IssuerCommonName }}
-                      </td>
-                      <td class="text-muted">
-                        {{ .SignatureAlgorithm }}
-                      </td>
-                      {{ $out := .}}
-                      {{ if .DNSNames }}
-                      <td>
-                        <ul>
-                          {{ range .DNSNames }}
-                          <li>"{{ .Name }}" </li>
-                          {{ end }}
-                        </ul>
-                      </td>
+              <div class="card-body p-0">
+
+                <div class="table-responsive">
+                  <table class="table table-sm table-vcenter card-table">
+                    <thead>
+                      <tr>
+                        <th>Subject CN</th>
+                        <th>Issuer CN</th>
+                        <th>Sig Algorithm</th>
+                        <th>DNS Names</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {{ range .Data.TLS.TLSCertificates }}
+                      <tr>
+                        <td>
+                          {{ .SubjectCommonName }}
+                        </td>
+                        <td class="text-muted">
+                          {{ .IssuerCommonName }}
+                        </td>
+                        <td class="text-muted">
+                          {{ .SignatureAlgorithm }}
+                        </td>
+                        {{ $out := .}}
+                        {{ if .DNSNames }}
+                        <td>
+                          <ul>
+                            {{ range .DNSNames }}
+                            <li>"{{ .Name }}" </li>
+                            {{ end }}
+                          </ul>
+                        </td>
+                        {{ end }}
+                      </tr>
                       {{ end }}
-                    </tr>
-                    {{ end }}
-                  </tbody>
-                </table>
+                    </tbody>
+                  </table>
+                </div>
               </div>
             </div>
           </div>
@@ -167,26 +167,31 @@ <h3 class="card-title">TLS Information</h3>
       <!-- right column -->
       <div class="col-sm-12 col-md-8 col-lg-7 col-xl-7">
         <div class="row row-cards">
-          <div class="col-12">
-            <div class="card">
-              <div class="card-header">
-                <h3 class="card-title">Summary</h3>
-              </div>
-              <div class="card-body">
-                <p>
-                  <kbd>{{ .Data.URL }}</kbd> responded with <kbd>{{ .Data.ResponseReason }}</kbd>
-                  <span>
-                    <a href="{{ .Data.URL }}" target="_blank" class="btn-sm btn-light float-right">
-                      Open URL
-                    </a>
-                  </span>
-                </p>
-              </div>
-            </div>
-          </div>
 
           <div class="col-12">
             <div class="card">
+              <div class="ribbon
+              {{ if and (ge .Data.ResponseCode 200) (le .Data.ResponseCode 299) }}
+              bg-green
+              {{ else if and (ge .Data.ResponseCode 300) (le .Data.ResponseCode 399) }}
+              bg-blue
+              {{ else if and (ge .Data.ResponseCode 400) (le .Data.ResponseCode 500) }}
+              bg-yellow
+              {{ else if and (ge .Data.ResponseCode 500) (le .Data.ResponseCode 600) }}
+              bg-red
+              {{ end }}
+              ">HTTP {{ .Data.ResponseCode }}</div>
+              <div class="card-status-top 
+              {{ if and (ge .Data.ResponseCode 200) (le .Data.ResponseCode 299) }}
+              bg-success
+              {{ else if and (ge .Data.ResponseCode 300) (le .Data.ResponseCode 399) }}
+              bg-primary
+              {{ else if and (ge .Data.ResponseCode 400) (le .Data.ResponseCode 500) }}
+              bg-warning
+              {{ else if and (ge .Data.ResponseCode 500) (le .Data.ResponseCode 600) }}
+              bg-danger
+              {{ end }}
+              "></div>
               <div class="card-header">
                 <h3 class="card-title">Response Headers</h3>
               </div>
@@ -218,7 +223,7 @@ <h3 class="card-title">Response Headers</h3>
           <div class="col-12">
             <div class="card">
               <div class="card-header">
-                <h3 class="card-title">Network Log</h3>
+                <h3 class="card-title">Network Logs</h3>
               </div>
               <div class="table-responsive">
                 <table class="table table-sm table-vcenter card-table">

diff --git a/web/ui-templates/table.html b/web/ui-templates/table.html
@@ -32,6 +32,7 @@ <h2 class="page-title">
                 <th>Code</th>
                 <th>Network Logs</th>
                 <th>Console Logs</th>
+                <th>Technologies</th>
                 <th>Title</th>
                 <th class="w-1"></th>
               </tr>
@@ -67,6 +68,10 @@ <h2 class="page-title">
                   {{ $length := len .Console }}
                   {{ $length }}
                 </td>
+                <td>
+                  {{ $length := len .Technologies }}
+                  {{ $length }}
+                </td>
                 <td class="text-muted">
                   {{ .Title }}
                 </td>