···11package pages
2233-// inspired from tangled's implementation
33+// forked and inspired from tangled's implementation
44//https://tangled.org/@tangled.org/core/blob/master/appview/pages/pages.go
5566import (
···30303131func (p *Pages) fragmentPaths() ([]string, error) {
3232 var fragmentPaths []string
3333- // When using os.DirFS("templates"), the FS root is already the templates directory.
3434- // Walk from "." and use relative paths (no "templates/" prefix).
3533 err := fs.WalkDir(p.embedFS, "templates", func(path string, d fs.DirEntry, err error) error {
3634 if err != nil {
3735 return err
···4240 if !strings.HasSuffix(path, ".gohtml") {
4341 return nil
4442 }
4545- //if !strings.Contains(path, "fragments/") {
4646- // return nil
4747- //}
4843 fragmentPaths = append(fragmentPaths, path)
4944 return nil
5045 })
···138133139134 return tpl.ExecuteTemplate(w, "layouts/base", params)
140135}
136136+137137+// Shared view/template params
138138+139139+type NavBar struct {
140140+ IsLoggedIn bool
141141+ LastFMUsername string
142142+}
+92
pages/templates/apiKeys.gohtml
···11+22+{{ define "content" }}
33+44+{{ template "components/navBar" .NavBar }}
55+66+77+<h1>API Key Management</h1>
88+99+<div class="card">
1010+ <h2>Create New API Key</h2>
1111+ <p>API keys allow programmatic access to your Piper account data.</p>
1212+ <form method="POST" action="/api-keys">
1313+ <div style="margin-bottom: 15px;">
1414+ <label for="name">Key Name (for your reference):</label>
1515+ <input type="text" id="name" name="name" placeholder="My Application" style="width: 100%; padding: 8px; margin-top: 5px;">
1616+ </div>
1717+ <button type="submit" class="btn">Generate New API Key</button>
1818+ </form>
1919+</div>
2020+2121+{{if .NewKeyID}} <!-- Changed from .NewKey to .NewKeyID for clarity -->
2222+<div class="new-key-alert">
2323+ <h3>Your new API key (ID: {{.NewKeyID}}) has been created</h3>
2424+ <!-- The message below is misleading if only the ID is shown.
2525+ Consider changing this text or modifying the flow to show the actual key once for HTML. -->
2626+ <p><strong>Important:</strong> If this is an ID, ensure you have copied the actual key if it was displayed previously. For keys generated via the API, the key is returned in the API response.</p>
2727+</div>
2828+{{end}}
2929+3030+<div class="card">
3131+ <h2>Your API Keys</h2>
3232+ {{if .Keys}}
3333+ <table>
3434+ <thead>
3535+ <tr>
3636+ <th>Name</th>
3737+ <th>Prefix</th>
3838+ <th>Created</th>
3939+ <th>Expires</th>
4040+ <th>Actions</th>
4141+ </tr>
4242+ </thead>
4343+ <tbody>
4444+ {{range .Keys}}
4545+ <tr>
4646+ <td>{{.Name}}</td>
4747+ <td>{{.KeyPrefix}}</td> <!-- Added KeyPrefix for better identification -->
4848+ <td>{{formatTime .CreatedAt}}</td>
4949+ <td>{{formatTime .ExpiresAt}}</td>
5050+ <td>
5151+ <button class="btn btn-danger" onclick="deleteKey('{{.ID}}')">Delete</button>
5252+ </td>
5353+ </tr>
5454+ {{end}}
5555+ </tbody>
5656+ </table>
5757+ {{else}}
5858+ <p>You don't have any API keys yet.</p>
5959+ {{end}}
6060+</div>
6161+6262+<div class="card">
6363+ <h2>API Usage</h2>
6464+ <p>To use your API key, include it in the Authorization header of your HTTP requests:</p>
6565+ <pre>Authorization: Bearer YOUR_API_KEY</pre>
6666+ <p>Or include it as a query parameter (less secure for the key itself):</p>
6767+ <pre>https://your-piper-instance.com/endpoint?api_key=YOUR_API_KEY</pre>
6868+</div>
6969+7070+<script>
7171+ function deleteKey(keyId) {
7272+ if (confirm('Are you sure you want to delete this API key? This action cannot be undone.')) {
7373+ fetch('/api-keys?key_id=' + keyId, { // This endpoint is handled by HandleAPIKeyManagement
7474+ method: 'DELETE',
7575+ })
7676+ .then(response => response.json())
7777+ .then(data => {
7878+ if (data.success) {
7979+ window.location.reload();
8080+ } else {
8181+ alert('Failed to delete API key: ' + (data.error || 'Unknown error'));
8282+ }
8383+ })
8484+ .catch(error => {
8585+ console.error('Error:', error);
8686+ alert('Failed to delete API key due to a network or processing error.');
8787+ });
8888+ }
8989+ }
9090+</script>
9191+9292+{{ end }}