Global/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2025-12-05 22:20:24 -08:00
Code Issues Packages Projects Releases Wiki Activity

chore: minor ui changes for api key settings

Browse Source
This commit is contained in:
Ferdinand Mütsch
2025-11-21 10:52:06 +01:00
parent 4e08ccd151
commit 02e057883c
3 changed files with 49 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/assets/css/app.dist.css
View File

File diff suppressed because one or more lines are too long

BIN
static/assets/css/app.dist.css.br
View File

Binary file not shown.

103
views/settings.tpl.html
View File

@@ -362,7 +362,7 @@
<div class="ml-3 inline"> <div class="ml-3 inline">
<button @click="showProjectAddButton({{ $i }})" class="top-1 relative" v-show="!labels[{{ $i }}]"> <button @click="showProjectAddButton({{ $i }})" class="top-1 relative" v-show="!labels[{{ $i }}]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-secondary">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg> </svg>
</button> </button>
<form action="" method="post" class="inline-flex gap-x-1" v-show="labels[{{ $i }}]"> <form action="" method="post" class="inline-flex gap-x-1" v-show="labels[{{ $i }}]">
@@ -370,7 +370,7 @@
<input type="hidden" name="value" value="{{ $label.Key }}"> <input type="hidden" name="value" value="{{ $label.Key }}">
<select name="key" class="block text-sm select-default !w-auto"> <select name="key" class="block text-sm select-default !w-auto">
{{ range $k, $project := $.Projects }} {{ range $k, $project := $.Projects }}
<option value="{{ $project }}">{{ $project }}</option> <option value="{{ $project }}">{{ $project }}</option>
{{ end }} {{ end }}
</select> </select>
<button type="submit" class="btn-primary btn-small"> <button type="submit" class="btn-primary btn-small">
@@ -395,7 +395,7 @@
<input class="input-default block" name="value" placeholder="Label" required> <input class="input-default block" name="value" placeholder="Label" required>
<select name="key" class="block w-full p-2.5 select-default grow" multiple required> <select name="key" class="block w-full p-2.5 select-default grow" multiple required>
{{ range $i, $p := .Projects }} {{ range $i, $p := .Projects }}
<option value="{{ $p }}" class="bg-transparent checked:text-green-500">{{ $p }}</option> <option value="{{ $p }}" class="bg-transparent checked:text-green-500">{{ $p }}</option>
{{ end }} {{ end }}
</select> </select>
<button type="submit" class="btn-primary"> <button type="submit" class="btn-primary">
@@ -429,7 +429,7 @@
{{ range $i, $mapping := .LanguageMappings }} {{ range $i, $mapping := .LanguageMappings }}
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">
<div class="text-foreground border-1 w-full inline-block my-1 py-1 text-align text-sm"> <div class="text-foreground border-1 w-full inline-block my-1 py-1 text-align text-sm">
&#9656;&nbsp; When filename ends in <span &#9656;&nbsp; When filename ends in <span
class="text-accent chip mr-1">{{ $mapping.Extension }}</span> class="text-accent chip mr-1">{{ $mapping.Extension }}</span>
then change the <span class="font-semibold">language</span> to <span then change the <span class="font-semibold">language</span> to <span
class="text-accent chip mr-1">{{ $mapping.Language }}</span> class="text-accent chip mr-1">{{ $mapping.Language }}</span>
@@ -889,7 +889,8 @@
{{ if ne .User.Email "" }} {{ if ne .User.Email "" }}
<button type="submit" class="btn-primary mt-4">Subscribe ({{ .SubscriptionPrice }} / mo)</button> <button type="submit" class="btn-primary mt-4">Subscribe ({{ .SubscriptionPrice }} / mo)</button>
{{ else }} {{ else }}
<button type="submit" class="btn-disabled cursor-pointer mt-4" disabled title="">Subscribe ({{ .SubscriptionPrice }} / mo)</button><br> <button type="submit" class="btn-disabled cursor-pointer mt-4" disabled title="">Subscribe ({{ .SubscriptionPrice }} / mo)</button>
<br>
<span class="text-xs text-muted">You have to provide an e-mail address to purchase a subscription.</span> <span class="text-xs text-muted">You have to provide an e-mail address to purchase a subscription.</span>
{{ end }} {{ end }}
</form> </form>
@@ -908,9 +909,9 @@
<input type="hidden" name="action" value="reset_apikey"> <input type="hidden" name="action" value="reset_apikey">
<div class="w-1/2 mr-4"> <div class="w-1/2 mr-4">
<span class="font-semibold text-foreground text-lg">Reset Main API Key</span> <span class="font-semibold text-foreground text-lg">Reset primary API key</span>
<span class="block text-sm text-muted"> <span class="block text-sm text-muted">
Please note that resetting your API key requires you to update your .wakatime.cfg files on all of your computers to make the WakaTime client send heartbeats again. Please note that resetting your API key requires you to update your <code>.wakatime.cfg</code> files on all of your computers to make the WakaTime client send heartbeats again.
</span> </span>
</div> </div>
<div class="w-1/2 ml-4 flex items-center justify-end"> <div class="w-1/2 ml-4 flex items-center justify-end">
@@ -919,75 +920,67 @@
</form> </form>
</div> </div>
<div class="flex w-full lg:w-3/4" id="form-generate-api-key"> <div class="flex w-full lg:w-3/4 justify-between items-center" id="form-generate-api-key">
<div class="w-1/2 mr-4"> <div class="w-1/2 mb-8">
<span class="font-semibold text-foreground text-lg">Generate API Key</span> <span class="font-semibold text-foreground text-lg">Add API keys</span>
<span class="block text-sm text-muted"> <span class="block text-sm text-muted">
Add a new API key to access the Wakapi API. You can have multiple API keys active at the same time. Besides the primary (aka. <i>main</i>) API key, which always exists, you can create additional API keys for different applications to access Wakapi. You can either grant read-only access or read-write access, which additionally allows to ingest heartbeats.
</span> </span>
</div> </div>
<form action="" method="post" class="flex w-full ml-4 justify-end"> <form action="" method="post" class="flex justify-end shrink-0">
<input type="hidden" name="action" value="add_api_key"> <input type="hidden" name="action" value="add_api_key">
<div class="flex flex-col gap-2 items-end"> <div class="flex gap-2 items-center justify-end">
<input class="appearance-none bg-card text-foreground outline-none rounded py-2 px-4 focus:bg-focused" <input class="appearance-none bg-card text-foreground outline-none rounded py-2 px-4 focus:bg-focused"
type="text" id="api-name" name="api_name" placeholder="Key Name" minlength="1" type="text" id="api-name" name="api_name" placeholder="Key Name" minlength="1"
maxlength="64" required> maxlength="64" required>
<select autocomplete="off" id="api-readonly" name="api_readonly" class="select-default grow">
<div class="flex gap-2 items-center justify-end mt-4 float-left"> <option value="false" class="cursor-pointer">Read / write</option>
<label class="font-semibold text-foreground" for="api-readonly">Read Only</label> <option value="true" class="cursor-pointer">Read only</option>
<div> </select>
<select autocomplete="off" id="api-readonly" name="api_readonly" class="select-default grow"> <button type="submit" class="btn-primary">Add</button>
<option value="false" class="cursor-pointer">No</option>
<option value="true" class="cursor-pointer">Yes</option>
</select>
</div>
</div>
<div class="flex items-center justify-end">
<button type="submit" class="w-1/2 btn-primary justify-end float-right mt-4">Generate</button>
</div>
</div> </div>
</form> </form>
</div> </div>
<div class="w-full lg:w-3/4"> <div class="w-full lg:w-3/4">
<span class="flex font-semibold text-foreground text-lg mb-4">API Keys</span> <span class="flex font-semibold text-foreground text-lg mb-2">API Keys</span>
<table class="w-full"> <table class="w-full">
<thead> <thead>
<tr> <tr>
<th class="text-left py-2 text-muted w-1/4">Name</th> <th class="text-left py-2 text-muted w-1/4">Name</th>
<th class="text-left py-2 text-muted w-1/2">Key</th> <th class="text-left py-2 text-muted w-1/2">Key</th>
<th class="text-center py-2 text-muted w-1/6">Type</th> <th class="text-center py-2 text-muted w-1/6">Type</th>
<th class="text-center py-2 text-muted w-1/6">Actions</th> <th class="text-center py-2 text-muted w-1/6">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{ range $i, $ApiKey := .ApiKeys }} {{ range $i, $ApiKey := .ApiKeys }}
<tr> <tr>
<td class="py-2 text-foreground">{{ $ApiKey.Name }}</td> <td class="py-2 text-foreground">{{ $ApiKey.Name }}</td>
<td class="py-2 text-muted font-mono text-sm">{{ $ApiKey.Value }}</td> <td class="py-2 text-muted font-mono text-sm">{{ $ApiKey.Value }}</td>
<td class="py-2 text-center"> <td class="py-2 text-center">
{{ if $ApiKey.ReadOnly }} {{ if $ApiKey.ReadOnly }}
<span class=" rounded-full text-xs"> <span class=" rounded-full text-xs">
Read-Only Read-Only
</span> </span>
{{ else }} {{ else }}
<span class="rounded-full text-xs text-accent"> <span class="rounded-full text-xs text-accent">
Full Access Full Access
</span> </span>
{{ end }} {{ end }}
</td> </td>
<td class="py-2 text-center"> <td class="py-2 text-center">
<form action="" method="post" class="inline"> <form action="" method="post" class="inline">
<input type="hidden" name="action" value="delete_api_key"> <input type="hidden" name="action" value="delete_api_key">
<input type="hidden" name="api_key_value" value="{{ $ApiKey.Value }}"> <input type="hidden" name="api_key_value" value="{{ $ApiKey.Value }}">
<button type="submit" class="py-2 px-4 rounded bg-card hover:bg-focused text-danger text-sm" title="Delete API Key">✕</button> <button type="submit" class="py-2 px-4 rounded bg-card hover:bg-focused text-danger text-sm" title="Delete API Key">✕</button>
</form> </form>
</td> </td>
</tr> </tr>
{{ end }} {{ end }}
</tbody> </tbody>
</table> </table>
</div> </div>