255 lines
7.3 KiB
Text
255 lines
7.3 KiB
Text
package templates
|
|
|
|
import "fmt"
|
|
|
|
templ ConfigModal(config ConfigData, frequencies []UpdateFrequency) {
|
|
<div
|
|
class="modal fade"
|
|
id="configModal"
|
|
tabindex="-1"
|
|
aria-labelledby="configModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="configModalLabel">Configuration</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<form hx-post="/config" hx-target="body" hx-swap="outerHTML">
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="api-token" class="form-label">Cloudflare API Token</label>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="api-token"
|
|
name="api_token"
|
|
value={ config.ApiToken }
|
|
required
|
|
/>
|
|
<div class="form-text">
|
|
Create a token with <code>Zone.DNS:Edit</code> permissions in
|
|
the Cloudflare dashboard.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="zone-id-input" class="form-label">Zone ID</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="zone-id-input"
|
|
name="zone_id"
|
|
value={ config.ZoneID }
|
|
required
|
|
/>
|
|
<div class="form-text">
|
|
Found in the Cloudflare dashboard under your domain's overview page.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="domain-input" class="form-label">Domain</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="domain-input"
|
|
name="domain"
|
|
value={ config.Domain }
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="update-period" class="form-label">Update Frequency</label>
|
|
<select class="form-select" id="update-period" name="update_period">
|
|
for _, freq := range frequencies {
|
|
<option value={ freq.Value } selected?={ freq.Value == config.UpdatePeriod }>
|
|
{ freq.Label }
|
|
</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
Save
|
|
<span class="htmx-indicator spinner-border spinner-border-sm ms-1"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ RecordModal(domain string) {
|
|
<div
|
|
class="modal fade"
|
|
id="recordModal"
|
|
tabindex="-1"
|
|
aria-labelledby="recordModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div id="record-modal-content" class="modal-content">
|
|
@RecordForm("Add DNS Record", "", domain, DNSRecord{Type: "A", TTL: 1})
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ RecordForm(title, recordID, domain string, record DNSRecord) {
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{ title }</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<form
|
|
if recordID != "" {
|
|
hx-put={ fmt.Sprintf("/records/%s", recordID) }
|
|
} else {
|
|
hx-post="/records"
|
|
}
|
|
hx-target="#dns-records-table"
|
|
hx-on::after-request="if(event.detail.successful) bootstrap.Modal.getInstance(document.getElementById('recordModal')).hide()"
|
|
>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="record-name" class="form-label">Name</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="record-name"
|
|
name="name"
|
|
placeholder="subdomain"
|
|
value={ getRecordName(record.Name, domain) }
|
|
required
|
|
/>
|
|
<span class="input-group-text">.{ domain }</span>
|
|
</div>
|
|
<div class="form-text">Use @ for the root domain</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="record-type" class="form-label">Type</label>
|
|
<select
|
|
class="form-select"
|
|
id="record-type"
|
|
name="type"
|
|
onchange="toggleMyIPOption()"
|
|
>
|
|
<option value="A" selected?={ record.Type == "A" }>A</option>
|
|
<option value="AAAA" selected?={ record.Type == "AAAA" }>AAAA</option>
|
|
<option value="CNAME" selected?={ record.Type == "CNAME" }>CNAME</option>
|
|
<option value="TXT" selected?={ record.Type == "TXT" }>TXT</option>
|
|
<option value="MX" selected?={ record.Type == "MX" }>MX</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3" id="content-group">
|
|
<label for="record-content" class="form-label">Content</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="record-content"
|
|
name="content"
|
|
value={ record.Content }
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3 form-check" id="use-my-ip-group" style="display: none;">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="use-my-ip"
|
|
name="use_my_ip"
|
|
onchange="toggleContentField()"
|
|
/>
|
|
<label class="form-check-label" for="use-my-ip">Use my current IP address</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="record-ttl" class="form-label">TTL</label>
|
|
<select class="form-select" id="record-ttl" name="ttl">
|
|
<option value="1" selected?={ record.TTL == 1 }>Auto</option>
|
|
<option value="120" selected?={ record.TTL == 120 }>2 minutes</option>
|
|
<option value="300" selected?={ record.TTL == 300 }>5 minutes</option>
|
|
<option value="600" selected?={ record.TTL == 600 }>10 minutes</option>
|
|
<option value="1800" selected?={ record.TTL == 1800 }>30 minutes</option>
|
|
<option value="3600" selected?={ record.TTL == 3600 }>1 hour</option>
|
|
<option value="7200" selected?={ record.TTL == 7200 }>2 hours</option>
|
|
<option value="18000" selected?={ record.TTL == 18000 }>5 hours</option>
|
|
<option value="43200" selected?={ record.TTL == 43200 }>12 hours</option>
|
|
<option value="86400" selected?={ record.TTL == 86400 }>1 day</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="record-proxied"
|
|
name="proxied"
|
|
checked?={ record.Proxied }
|
|
/>
|
|
<label class="form-check-label" for="record-proxied">Proxied through Cloudflare</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
Save
|
|
<span class="htmx-indicator spinner-border spinner-border-sm ms-1"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
function toggleMyIPOption() {
|
|
const recordType = document.getElementById('record-type').value;
|
|
const useMyIPGroup = document.getElementById('use-my-ip-group');
|
|
const contentGroup = document.getElementById('content-group');
|
|
|
|
if (recordType === 'A') {
|
|
useMyIPGroup.style.display = 'block';
|
|
} else {
|
|
useMyIPGroup.style.display = 'none';
|
|
contentGroup.style.display = 'block';
|
|
document.getElementById('use-my-ip').checked = false;
|
|
}
|
|
}
|
|
|
|
function toggleContentField() {
|
|
const useMyIP = document.getElementById('use-my-ip').checked;
|
|
const contentGroup = document.getElementById('content-group');
|
|
contentGroup.style.display = useMyIP ? 'none' : 'block';
|
|
}
|
|
|
|
function resetRecordForm() {
|
|
setTimeout(() => {
|
|
document.getElementById('record-type').value = 'A';
|
|
toggleMyIPOption();
|
|
}, 100);
|
|
}
|
|
|
|
// Initialize the form state
|
|
toggleMyIPOption();
|
|
</script>
|
|
}
|