chore: docs and typos

README.md

@@ -36,7 +36,7 @@ To use the hosted version set `api_url = https://wakapi.dev/api/heartbeat`. Howe
     * Fedora / RHEL: `dnf install @development-tools`
     * Ubuntu / Debian: `apt install build-essential`
     * Windows: See [here](https://github.com/mattn/go-sqlite3/issues/214#issuecomment-253216476)
-* _Optional_: A MySQL- or Postgres database
+* _Optional_: One of the [supported databases](#supported-databases)
 
 **On your local machine:**
 * [WakaTime plugin](https://wakatime.com/plugins) for your editor / IDE
@@ -111,8 +111,10 @@ api_key = the_api_key_printed_to_the_console_after_starting_the_server`
 You can view your API Key after logging in to the web interface.
 
 ### Optional: Client-side proxy
+See the [advanced setup instructions](docs/advanced_setup.md).
 
-See the [advanced setup instructions](docs/advanced_setup.md).  
+### Optional: WakaTime relay
+You can connect Wakapi with WakaTime in a way that all heartbeats sent to Wakapi are relayed. This way, you can use both services at the same time. Go to the settings page of your instance to configure this integration. 
 
 ## 🔧 API Endpoints
 The following API endpoints are available. A more detailed Swagger documentation is about to come ([#40](https://github.com/muety/wakapi/issues/40)).

config/config.go

@@ -215,7 +215,7 @@ func readVersion() string {
 		log.Fatal(err)
 	}
 
-	return string(bytes)
+	return strings.TrimSpace(string(bytes))
 }
 
 func readLanguageColors() map[string]string {

main.go

@@ -13,6 +13,7 @@ import (
 
 	"github.com/gorilla/mux"
 	"github.com/muety/wakapi/middlewares"
+	customMiddleware "github.com/muety/wakapi/middlewares/custom"
 	"github.com/muety/wakapi/routes"
 	shieldsV1Routes "github.com/muety/wakapi/routes/compat/shields/v1"
 	wtV1Routes "github.com/muety/wakapi/routes/compat/wakatime/v1"
@@ -138,6 +139,7 @@ func main() {
 		userService,
 		[]string{"/api/health", "/api/compat/shields/v1"},
 	).Handler
+	wakatimeRelayMiddleware := customMiddleware.NewWakatimeRelayMiddleware().Handler
 
 	// Router configs
 	router.Use(loggingMiddleware, recoveryMiddleware)
@@ -166,13 +168,17 @@ func main() {
 	settingsRouter.Path("/language_mappings/delete").Methods(http.MethodPost).HandlerFunc(settingsHandler.DeleteLanguageMapping)
 	settingsRouter.Path("/reset").Methods(http.MethodPost).HandlerFunc(settingsHandler.PostResetApiKey)
 	settingsRouter.Path("/badges").Methods(http.MethodPost).HandlerFunc(settingsHandler.PostToggleBadges)
+	settingsRouter.Path("/wakatime_integration").Methods(http.MethodPost).HandlerFunc(settingsHandler.PostSetWakatimeApiKey)
 	settingsRouter.Path("/regenerate").Methods(http.MethodPost).HandlerFunc(settingsHandler.PostRegenerateSummaries)
 
 	// API Routes
-	apiRouter.Path("/heartbeat").Methods(http.MethodPost).HandlerFunc(heartbeatHandler.ApiPost)
 	apiRouter.Path("/summary").Methods(http.MethodGet).HandlerFunc(summaryHandler.ApiGet)
 	apiRouter.Path("/health").Methods(http.MethodGet).HandlerFunc(healthHandler.ApiGet)
 
+	heartbeatsApiRouter := apiRouter.Path("/heartbeat").Methods(http.MethodPost).Subrouter()
+	heartbeatsApiRouter.Use(wakatimeRelayMiddleware)
+	heartbeatsApiRouter.Path("").HandlerFunc(heartbeatHandler.ApiPost)
+
 	// Wakatime compat V1 API Routes
 	wakatimeV1Router.Path("/users/{user}/all_time_since_today").Methods(http.MethodGet).HandlerFunc(wakatimeV1AllHandler.ApiGet)
 	wakatimeV1Router.Path("/users/{user}/summaries").Methods(http.MethodGet).HandlerFunc(wakatimeV1SummariesHandler.ApiGet)

middlewares/authenticate.go

@@ -5,21 +5,16 @@ import (
 	"errors"
 	"fmt"
 	conf "github.com/muety/wakapi/config"
+	"github.com/muety/wakapi/models"
+	"github.com/muety/wakapi/services"
 	"github.com/muety/wakapi/utils"
 	"log"
 	"net/http"
 	"strings"
-	"time"
-
-	"github.com/patrickmn/go-cache"
-
-	"github.com/muety/wakapi/models"
-	"github.com/muety/wakapi/services"
 )
 
 type AuthenticateMiddleware struct {
 	config         *conf.Config
-	cache          *cache.Cache
 	userSrvc       services.IUserService
 	whitelistPaths []string
 }
@@ -28,7 +23,6 @@ func NewAuthenticateMiddleware(userService services.IUserService, whitelistPaths
 	return &AuthenticateMiddleware{
 		config:         conf.Get(),
 		userSrvc:       userService,
-		cache:          cache.New(1*time.Hour, 2*time.Hour),
 		whitelistPaths: whitelistPaths,
 	}
 }
@@ -64,8 +58,6 @@ func (m *AuthenticateMiddleware) ServeHTTP(w http.ResponseWriter, r *http.Reques
 		return
 	}
 
-	m.cache.Set(user.ID, user, cache.DefaultExpiration)
-
 	ctx := context.WithValue(r.Context(), models.UserKey, user)
 	next(w, r.WithContext(ctx))
 }
@@ -78,14 +70,9 @@ func (m *AuthenticateMiddleware) tryGetUserByApiKey(r *http.Request) (*models.Us
 
 	var user *models.User
 	userKey := strings.TrimSpace(key)
-	cachedUser, ok := m.cache.Get(userKey)
-	if !ok {
-		user, err = m.userSrvc.GetUserByKey(userKey)
-		if err != nil {
-			return nil, err
-		}
-	} else {
-		user = cachedUser.(*models.User)
+	user, err = m.userSrvc.GetUserByKey(userKey)
+	if err != nil {
+		return nil, err
 	}
 	return user, nil
 }
@@ -96,12 +83,6 @@ func (m *AuthenticateMiddleware) tryGetUserByCookie(r *http.Request) (*models.Us
 		return nil, err
 	}
 
-	cachedUser, ok := m.cache.Get(login.Username)
-
-	if ok {
-		return cachedUser.(*models.User), nil
-	}
-
 	user, err := m.userSrvc.GetUserById(login.Username)
 	if err != nil {
 		return nil, err

middlewares/authenticate_test.go

@@ -6,7 +6,6 @@ import (
 	"github.com/muety/wakapi/mocks"
 	"github.com/muety/wakapi/models"
 	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/mock"
 	"net/http"
 	"testing"
 )
@@ -33,30 +32,6 @@ func TestAuthenticateMiddleware_tryGetUserByApiKey_Success(t *testing.T) {
 	assert.Equal(t, testUser, result)
 }
 
-func TestAuthenticateMiddleware_tryGetUserByApiKey_GetFromCache(t *testing.T) {
-	testApiKey := "z5uig69cn9ut93n"
-	testToken := base64.StdEncoding.EncodeToString([]byte(testApiKey))
-	testUser := &models.User{ApiKey: testApiKey}
-
-	mockRequest := &http.Request{
-		Header: http.Header{
-			"Authorization": []string{fmt.Sprintf("Basic %s", testToken)},
-		},
-	}
-
-	userServiceMock := new(mocks.UserServiceMock)
-	userServiceMock.On("GetUserByKey", testApiKey).Return(testUser, nil)
-
-	sut := NewAuthenticateMiddleware(userServiceMock, []string{})
-	sut.cache.SetDefault(testApiKey, testUser)
-
-	result, err := sut.tryGetUserByApiKey(mockRequest)
-
-	assert.Nil(t, err)
-	assert.Equal(t, testUser, result)
-	userServiceMock.AssertNotCalled(t, "GetUserByKey", mock.Anything)
-}
-
 func TestAuthenticateMiddleware_tryGetUserByApiKey_InvalidHeader(t *testing.T) {
 	testApiKey := "z5uig69cn9ut93n"
 	testToken := base64.StdEncoding.EncodeToString([]byte(testApiKey))

middlewares/custom/wakatime.go

@@ -0,0 +1,97 @@
+package relay
+
+import (
+	"bytes"
+	"encoding/base64"
+	"fmt"
+	"github.com/muety/wakapi/config"
+	"github.com/muety/wakapi/models"
+	"io"
+	"io/ioutil"
+	"log"
+	"net/http"
+	"time"
+)
+
+const (
+	WakatimeApiUrl                = "https://wakatime.com/api/v1"
+	WakatimeApiHeartbeatsEndpoint = "/users/current/heartbeats.bulk"
+)
+
+/* Middleware to conditionally relay heartbeats to Wakatime */
+type WakatimeRelayMiddleware struct {
+	httpClient *http.Client
+}
+
+func NewWakatimeRelayMiddleware() *WakatimeRelayMiddleware {
+	return &WakatimeRelayMiddleware{
+		httpClient: &http.Client{
+			Timeout: 10 * time.Second,
+		},
+	}
+}
+
+func (m *WakatimeRelayMiddleware) Handler(h http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		m.ServeHTTP(w, r, h.ServeHTTP)
+	})
+}
+
+func (m *WakatimeRelayMiddleware) ServeHTTP(w http.ResponseWriter, r *http.Request, next http.HandlerFunc) {
+	defer next(w, r)
+
+	if r.Method != http.MethodPost {
+		return
+	}
+
+	user := r.Context().Value(models.UserKey).(*models.User)
+	if user == nil || user.WakatimeApiKey == "" {
+		return
+	}
+
+	body, _ := ioutil.ReadAll(r.Body)
+	r.Body.Close()
+	r.Body = ioutil.NopCloser(bytes.NewBuffer(body))
+
+	headers := http.Header{
+		"X-Machine-Name": r.Header.Values("X-Machine-Name"),
+		"Content-Type":   r.Header.Values("Content-Type"),
+		"Accept":         r.Header.Values("Accept"),
+		"User-Agent":     r.Header.Values("User-Agent"),
+		"X-Origin": []string{
+			fmt.Sprintf("wakapi v%s", config.Get().Version),
+		},
+		"Authorization": []string{
+			fmt.Sprintf("Basic %s", base64.StdEncoding.EncodeToString([]byte(user.WakatimeApiKey))),
+		},
+	}
+
+	go m.send(
+		http.MethodPost,
+		WakatimeApiUrl+WakatimeApiHeartbeatsEndpoint,
+		bytes.NewReader(body),
+		headers,
+	)
+}
+
+func (m *WakatimeRelayMiddleware) send(method, url string, body io.Reader, headers http.Header) {
+	request, err := http.NewRequest(method, url, body)
+	if err != nil {
+		log.Printf("error constructing relayed request – %v\n", err)
+	}
+
+	for k, v := range headers {
+		for _, h := range v {
+			request.Header.Set(k, h)
+		}
+	}
+
+	response, err := m.httpClient.Do(request)
+	if err != nil {
+		log.Printf("error executing relayed request – %v\n", err)
+	}
+
+	if response.StatusCode < 200 || response.StatusCode >= 300 {
+		log.Printf("failed to relay request, got status %d\n", response.StatusCode)
+	}
+}

mocks/user_service.go

@@ -44,6 +44,11 @@ func (m *UserServiceMock) ToggleBadges(user *models.User) (*models.User, error)
 	return args.Get(0).(*models.User), args.Error(1)
 }
 
+func (m *UserServiceMock) SetWakatimeApiKey(user *models.User, s string) (*models.User, error) {
+	args := m.Called(user, s)
+	return args.Get(0).(*models.User), args.Error(1)
+}
+
 func (m *UserServiceMock) MigrateMd5Password(user *models.User, login *models.Login) (*models.User, error) {
 	args := m.Called(user, login)
 	return args.Get(0).(*models.User), args.Error(1)

models/user.go

@@ -7,6 +7,7 @@ type User struct {
 	CreatedAt      CustomTime `gorm:"type:timestamp; default:CURRENT_TIMESTAMP"`
 	LastLoggedInAt CustomTime `gorm:"type:timestamp; default:CURRENT_TIMESTAMP"`
 	BadgesEnabled  bool       `json:"-" gorm:"default:false; type:bool"`
+	WakatimeApiKey string     `json:"-"`
 }
 
 type Login struct {

routes/settings.go

@@ -233,6 +233,21 @@ func (h *SettingsHandler) PostResetApiKey(w http.ResponseWriter, r *http.Request
 	templates[conf.SettingsTemplate].Execute(w, h.buildViewModel(r).WithSuccess(msg))
 }
 
+func (h *SettingsHandler) PostSetWakatimeApiKey(w http.ResponseWriter, r *http.Request) {
+	if h.config.IsDev() {
+		loadTemplates()
+	}
+
+	user := r.Context().Value(models.UserKey).(*models.User)
+	if _, err := h.userSrvc.SetWakatimeApiKey(user, r.PostFormValue("api_key")); err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		templates[conf.SettingsTemplate].Execute(w, h.buildViewModel(r).WithError("internal server error"))
+		return
+	}
+
+	templates[conf.SettingsTemplate].Execute(w, h.buildViewModel(r).WithSuccess("Wakatime API Key updated successfully"))
+}
+
 func (h *SettingsHandler) PostToggleBadges(w http.ResponseWriter, r *http.Request) {
 	if h.config.IsDev() {
 		loadTemplates()

scripts/push_sample_data.py

@@ -11,6 +11,7 @@ from typing import List, Union
 import requests
 from tqdm import tqdm
 
+MACHINE = "devmachine"
 UA = 'wakatime/13.0.7 (Linux-4.15.0-91-generic-x86_64-with-glibc2.4) Python3.8.0.final.0 generator/1.42.1 generator-wakatime/4.0.0'
 LANGUAGES = {
     'Go': 'go',
@@ -75,7 +76,8 @@ def post_data_sync(data: List[Heartbeat], url: str, api_key: str):
     for h in tqdm(data):
         r = requests.post(url, json=[h.__dict__], headers={
             'User-Agent': UA,
-            'Authorization': f'Basic {encoded_key}'
+            'Authorization': f'Basic {encoded_key}',
+            'X-Machine-Name': MACHINE,
         })
         if r.status_code != 201:
             print(r.text)

services/services.go

@@ -63,5 +63,6 @@ type IUserService interface {
 	Update(*models.User) (*models.User, error)
 	ResetApiKey(*models.User) (*models.User, error)
 	ToggleBadges(*models.User) (*models.User, error)
+	SetWakatimeApiKey(*models.User, string) (*models.User, error)
 	MigrateMd5Password(*models.User, *models.Login) (*models.User, error)
 }

services/user.go

@@ -5,11 +5,14 @@ import (
 	"github.com/muety/wakapi/models"
 	"github.com/muety/wakapi/repositories"
 	"github.com/muety/wakapi/utils"
+	"github.com/patrickmn/go-cache"
 	uuid "github.com/satori/go.uuid"
+	"time"
 )
 
 type UserService struct {
 	Config     *config.Config
+	cache      *cache.Cache
 	repository repositories.IUserRepository
 }
 
@@ -17,15 +20,36 @@ func NewUserService(userRepo repositories.IUserRepository) *UserService {
 	return &UserService{
 		Config:     config.Get(),
 		repository: userRepo,
+		cache:      cache.New(1*time.Hour, 2*time.Hour),
 	}
 }
 
 func (srv *UserService) GetUserById(userId string) (*models.User, error) {
-	return srv.repository.GetById(userId)
+	if u, ok := srv.cache.Get(userId); ok {
+		return u.(*models.User), nil
+	}
+
+	u, err := srv.repository.GetById(userId)
+	if err != nil {
+		return nil, err
+	}
+
+	srv.cache.Set(u.ID, u, cache.DefaultExpiration)
+	return u, nil
 }
 
 func (srv *UserService) GetUserByKey(key string) (*models.User, error) {
-	return srv.repository.GetByApiKey(key)
+	if u, ok := srv.cache.Get(key); ok {
+		return u.(*models.User), nil
+	}
+
+	u, err := srv.repository.GetByApiKey(key)
+	if err != nil {
+		return nil, err
+	}
+
+	srv.cache.Set(u.ID, u, cache.DefaultExpiration)
+	return u, nil
 }
 
 func (srv *UserService) GetAll() ([]*models.User, error) {
@@ -49,19 +73,28 @@ func (srv *UserService) CreateOrGet(signup *models.Signup) (*models.User, bool,
 }
 
 func (srv *UserService) Update(user *models.User) (*models.User, error) {
+	srv.cache.Flush()
 	return srv.repository.Update(user)
 }
 
 func (srv *UserService) ResetApiKey(user *models.User) (*models.User, error) {
+	srv.cache.Flush()
 	user.ApiKey = uuid.NewV4().String()
 	return srv.Update(user)
 }
 
 func (srv *UserService) ToggleBadges(user *models.User) (*models.User, error) {
+	srv.cache.Flush()
 	return srv.repository.UpdateField(user, "badges_enabled", !user.BadgesEnabled)
 }
 
+func (srv *UserService) SetWakatimeApiKey(user *models.User, apiKey string) (*models.User, error) {
+	srv.cache.Flush()
+	return srv.repository.UpdateField(user, "wakatime_api_key", apiKey)
+}
+
 func (srv *UserService) MigrateMd5Password(user *models.User, login *models.Login) (*models.User, error) {
+	srv.cache.Flush()
 	user.Password = login.Password
 	if hash, err := utils.HashBcrypt(user.Password, srv.Config.Security.PasswordSalt); err != nil {
 		return nil, err

version.txt

@@ -1 +1 @@
-1.19.0
+1.20.0

views/foot.tpl.html

@@ -1,2 +1,2 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js" integrity="sha384-bFS5CG904xYIgxBcrDF4KFNXuM7KeSGsSvS/QTaDqMTEdbaaxjg2Y2TSU3Ygs7wG" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js" integrity="sha384-mZ3q69BYmd4GxHp59G3RrsaFdWDxVSoqd7oVYuWRm2qiXrduT63lQtlhdD9lKbm3" crossorigin="anonymous"></script>

views/head.tpl.html

@@ -7,6 +7,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
     <link rel="manifest" href="assets/site.webmanifest">
     <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-    <link href="https://unpkg.com/tailwindcss@^1.4.6/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://unpkg.com/tailwindcss@^1.4.6/dist/tailwind.min.css" rel="stylesheet" integrity="sha384-g+D4mP3VJaTdOzGhEGvSbCkMsmTWyibnPpolg6g7Xnw9Z5y6PbFl7W3CW6iA8Ybm" crossorigin="anonymous">
     <link href="assets/app.css" rel="stylesheet">
 </head>

views/settings.tpl.html

@@ -9,9 +9,11 @@
     .inline-bullet-list li a {
         text-decoration: underline;
     }
+
     .inline-bullet-list li:after {
         content: "•";
     }
+
     .inline-bullet-list li:last-child:after {
         content: "";
     }
@@ -32,7 +34,7 @@
 <main class="mt-4 flex-grow flex justify-center w-full">
     <div class="flex flex-col flex-grow max-w-xl mt-8">
         <div class="text-gray-500 text-xs mb-8">
-            <ul class="flex justify-center flex-wrap space-x-1 inline-bullet-list">
+            <ul class="flex justify-center flex-wrap space-x-1 inline-bullet-list px-12">
                 <li class="hover:text-gray-400 mb-1">
                     <a href="settings#password">Change Password</a>
                 </li>
@@ -48,6 +50,9 @@
                 <li class="hover:text-gray-400 mb-1">
                     <a href="settings#badges">Badges</a>
                 </li>
+                <li class="hover:text-gray-400 mb-1">
+                    <a href="settings#integrations">Integrations</a>
+                </li>
                 <li class="hover:text-gray-400 mb-1">
                     <a href="settings#danger">Danger Zone</a>
                 </li>
@@ -55,9 +60,9 @@
         </div>
 
         <div class="w-full my-8 pb-8 border-b border-gray-700">
-            <div class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block" id="password">
+            <h2 class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block" id="password">
                 Change Password
-            </div>
+            </h2>
 
             <form class="mt-10" action="settings/credentials" method="post">
                 <div class="mb-8">
@@ -87,9 +92,9 @@
         </div>
 
         <div class="w-full mt-4 mb-8 pb-8 border-b border-gray-700">
-            <div class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block" id="apikey">
+            <h2 class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block" id="apikey">
                 Reset API Key
-            </div>
+            </h2>
 
             <form class="mt-6" action="settings/reset" method="post">
                 <div class="text-gray-300 text-sm mb-4">
@@ -107,9 +112,9 @@
         </div>
 
         <div class="w-full mt-4 mb-8 pb-8 border-b border-gray-700" id="aliases">
-            <div class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block">
+            <h2 class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block">
                 Aliases
-            </div>
+            </h2>
 
             <div class="text-gray-300 text-sm mb-4 mt-6">
                 You can specify aliases for any type of entity. For instance, you can define a rule, that both <span
@@ -119,7 +124,7 @@
             </div>
 
             {{ if .Aliases }}
-            <h3 class="text-md font-semibold text-white">Rules</h3>
+            <h3 class="inline-block font-semibold text-md border-b border-green-700 text-white">Rules</h3>
             {{ range $i, $alias := .Aliases }}
             <div class="flex items-center">
                 <div class="text-gray-500 border-1 w-full border-green-700 inline-block my-1 py-1 text-align text-sm"
@@ -139,7 +144,8 @@
                 <form class="float-right" action="settings/aliases/delete" method="post">
                     <input type="hidden" id="delete_alias_key" name="key" required value="{{ $alias.Key }}">
                     <input type="hidden" id="delete_alias_type" name="type" required value="{{ $alias.Type }}">
-                    <button type="submit" class="py-1 px-3 rounded border border-red-500 hover:border-red-600 text-gray-400 text-sm">
+                    <button type="submit"
+                            class="py-1 px-3 rounded border border-red-500 hover:border-red-600 text-gray-400 text-sm">
                         ✕
                     </button>
                 </form>
@@ -148,7 +154,7 @@
             <div class="mb-8"></div>
             {{end}}
 
-            <h3 class="text-md font-semibold text-white">Add Rule</h3>
+            <h3 class="inline-block font-semibold text-md border-b border-green-700 text-white mb-2">Add Rule</h3>
             <form action="settings/aliases" method="post">
                 <div class="flex items-center mt-2 w-full text-gray-500 text-sm">
                     <span class="mr-2">Map</span>
@@ -188,7 +194,7 @@
             </div>
 
             {{ if .LanguageMappings }}
-            <h3 class="text-md font-semibold text-white">Rules</h3>
+            <h3 class="inline-block font-semibold text-md border-b border-green-700 text-white">Rules</h3>
             {{ range $i, $mapping := .LanguageMappings }}
             <div class="flex items-center">
                 <div class="text-gray-500 border-1 w-full border-green-700 inline-block my-1 py-1 text-align text-sm">
@@ -199,7 +205,8 @@
                 </div>
                 <form class="float-right" action="settings/language_mappings/delete" method="post">
                     <input type="hidden" id="mapping_id" name="mapping_id" required value="{{ $mapping.ID }}">
-                    <button type="submit" class="py-1 px-3 rounded border border-red-500 hover:border-red-600 text-gray-400 text-sm">
+                    <button type="submit"
+                            class="py-1 px-3 rounded border border-red-500 hover:border-red-600 text-gray-400 text-sm">
                         ✕
                     </button>
                 </form>
@@ -208,7 +215,7 @@
             <div class="mb-8"></div>
             {{end}}
 
-            <h3 class="text-md font-semibold text-white">Add Rule</h3>
+            <h3 class="inline-block font-semibold text-md border-b border-green-700 text-white">Add Rule</h3>
             <form action="settings/language_mappings" method="post">
                 <div class="flex items-center w-full text-gray-500 text-sm">
                     <span class="mr-2">When filename ends in</span>
@@ -295,6 +302,68 @@
             </form>
         </div>
 
+        <div class="w-full mt-4 mb-8 pb-8 border-b border-gray-700">
+            <h2 class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block" id="integrations">
+                Integrations
+            </h2>
+
+            <div class="mt-10 text-gray-300 text-sm">
+                <h3 class="inline-block font-semibold text-md mb-4 border-b border-green-700">
+                    WakaTime
+                </h3>
+
+                <div class="flex space-x-4">
+                    <img alt="WakaTime Logo"
+                         width="55px"
+                         src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQwIiBoZWlnaHQ9IjM0MCIgdmlld0JveD0iMCAwIDM0MCAzNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTcwIDIwQzg3LjE1NiAyMCAyMCA4Ny4xNTYgMjAgMTcwQzIwIDI1Mi44NDQgODcuMTU2IDMyMCAxNzAgMzIwQzI1Mi44NDQgMzIwIDMyMCAyNTIuODQ0IDMyMCAxNzBDMzIwIDg3LjE1NiAyNTIuODQ0IDIwIDE3MCAyMFYyMFYyMFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNDAiLz4KPHBhdGggZD0iTTE5MC4xODMgMjEzLjU0MUMxODguNzQgMjE1LjQ0MyAxODYuNTc2IDIxNi42NjcgMTg0LjE1MSAyMTYuNjY3QzE4My45MTMgMjE2LjY2NyAxODMuNjc3IDIxNi42NTEgMTgzLjQ0MyAyMTYuNjI3QzE4My4wNDIgMjE2LjU3OSAxODIuODIzIDIxNi41NDUgMTgyLjYwNiAyMTYuNDk3QzE4Mi4zMzcgMjE2LjQzNCAxODIuMTM3IDIxNi4zNzUgMTgxLjk0IDIxNi4zMDhDMTgxLjU2MSAyMTYuMTc2IDE4MS4zOTIgMjE2LjEwOSAxODEuMjI4IDIxNi4wMzVDMTgwLjg0MyAyMTUuODQ5IDE4MC43MDcgMjE1Ljc3OCAxODAuNTcyIDIxNS43MDFDMTgwLjIwNSAyMTUuNDc4IDE4MC4xMDkgMjE1LjQxMiAxODAuMDE0IDIxNS4zNDVDMTc5Ljg1NiAyMTUuMjMzIDE3OS42OTggMjE1LjExNyAxNzkuNTQ3IDIxNC45OTJDMTc5LjI1MSAyMTQuNzQ2IDE3OS4xNDcgMjE0LjY1IDE3OS4wNDQgMjE0LjU1MkMxNzguNzMxIDIxNC4yNDEgMTc4LjUzMSAyMTQuMDE4IDE3OC4zNDEgMjEzLjc4NUMxNzcuOTgyIDIxMy4zMzEgMTc3LjY5IDIxMi44ODggMTc3LjQzOCAyMTIuNDE1TDE2OC42IDE5OC4yMTRMMTU5Ljc2NiAyMTIuNDE1QzE1OC4zOCAyMTQuOTM5IDE1NS44NzQgMjE2LjY2NyAxNTIuOTk1IDIxNi42NjdDMTUwLjEwNiAyMTYuNjY3IDE0Ny41ODggMjE0LjkyNiAxNDYuMjQzIDIxMi4zNDZMMTA3LjYwNyAxNTYuMDYxQzEwNi4zMzcgMTU0LjUyOSAxMDUuNTU2IDE1Mi40OTkgMTA1LjU1NiAxNTAuMjU4QzEwNS41NTYgMTQ1LjUxNCAxMDkuMDQzIDE0MS42NjUgMTEzLjM0NCAxNDEuNjY1QzExNi4xMjcgMTQxLjY2NSAxMTguNTY0IDE0My4yODIgMTE5Ljk0MiAxNDUuNzA4TDE1Mi41NTUgMTkzLjlMMTYxLjczNSAxNzguOTUyQzE2My4wNTggMTc2LjI4OCAxNjUuNjI2IDE3NC40NzggMTY4LjU3NSAxNzQuNDc4QzE3MS4yNzMgMTc0LjQ3OCAxNzMuNjUyIDE3NS45OTYgMTc1LjA0OSAxNzguMjk4TDE4NC41MTcgMTkzLjgzOUwyMzUuNjg0IDEyMC41ODNDMjM3LjA3NSAxMTguMjI2IDIzOS40NzUgMTE2LjY2NyAyNDIuMjEzIDExNi42NjdDMjQ2LjUxNCAxMTYuNjY3IDI1MCAxMjAuNTE0IDI1MCAxMjUuMjU4QzI1MCAxMjcuMzMyIDI0OS4zMzcgMTI5LjIzMiAyNDguMjMgMTMwLjcxNUwxOTAuMTgzIDIxMy41NDFWMjEzLjU0MVoiIGZpbGw9IndoaXRlIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEwIi8+Cjwvc3ZnPgo=">
+                    <p class="text-sm">You can connect Wakapi with the official <a class="underline"
+                                                                                   href="https://wakatime.com"
+                                                                                   rel="noopener noreferrer"
+                                                                                   target="_blank">WakaTime</a> in a way
+                        that all heartbeats sent to Wakapi are relayed. This way, you can use both services
+                        at
+                        the same time. To get started, <a class="underline"
+                                                          href="https://wakatime.com/developers#authentication"
+                                                          rel="noopener noreferrer"
+                                                          target="_blank">get your API key</a> and paste it here.</p>
+                </div>
+
+                <form action="settings/wakatime_integration" method="post">
+
+                    {{ $placeholderText := "Paste your WakaTime API key here ..." }}
+                    {{ if .User.WakatimeApiKey }}
+                    {{ $placeholderText = "********" }}
+                    {{ end }}
+
+                    <div class="flex items-center mt-8 space-x-2">
+                        <label class="text-gray-500 font-semibold">API Key:</label>
+                        <input type="password" name="api_key" id="wakatime_api_key"
+                               class="flex-grow shadow appearance-nonshadow appearance-none bg-gray-800 text-gray-300 border-green-700 border rounded py-1 px-3 {{ if not .User.WakatimeApiKey }}focus:bg-gray-700 focus:border-gray-500{{ end }}"
+                               placeholder="{{ $placeholderText }}" {{ if .User.WakatimeApiKey }}readonly{{ end }}>
+                        <div class="flex-grow flex justify-end">
+                            {{ if not .User.WakatimeApiKey }}
+                            <button type="submit"
+                                    class="py-1 px-3 my-3 rounded bg-green-700 hover:bg-green-800 text-white text-sm">
+                                Connect
+                            </button>
+                            {{ else }}
+                            <button type="submit"
+                                    class="py-1 px-3 rounded bg-red-500 hover:bg-red-600 text-white text-sm">Disconnect
+                            </button>
+                            {{ end }}
+                        </div>
+                    </div>
+                </form>
+
+                <p class="mt-6">
+                    <span class="font-semibold">👉 Please note:</span>
+                    <span>When enabling this feature, the operators of this server will, in theory (!), have unlimited access to your data stored in WakaTime. If you are concerned about your privacy, please do not enable this integration or wait for OAuth 2 authentication (<a
+                            class="underline" target="_blank" href="https://github.com/muety/wakapi/issues/94" rel="noopener noreferrer">#94</a>) to be implemented.</span>
+                </p>
+            </div>
+        </div>
+
+
         <div class="w-full mt-4 mb-8 pb-8">
             <div class="font-semibold text-lg text-white m-0 border-b-2 border-green-700 inline-block" id="danger">
                 ⚠️ Danger Zone