316 lines
9.4 KiB
Text
316 lines
9.4 KiB
Text
package templates
|
|
|
|
import "fmt"
|
|
|
|
templ ConfigModal(config ConfigData, frequencies []UpdateFrequency) {
|
|
<div id="contact" class="modal-container">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Configuration Settings</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
@click="$el.closest('dialog').close()"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<form
|
|
x-target="config-status"
|
|
method="post"
|
|
action="/config"
|
|
@ajax:success="$el.closest('dialog').close()"
|
|
x-data="{ saving: false }"
|
|
@ajax:before="saving = true"
|
|
@ajax:after="saving = false"
|
|
@ajax:error="saving = false"
|
|
>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="api-token" class="form-label fw-semibold">
|
|
<i class="bi bi-key-fill text-primary me-2"></i>
|
|
Cloudflare API Token
|
|
</label>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="api-token"
|
|
name="api_token"
|
|
value={ config.ApiToken }
|
|
placeholder="Enter your Cloudflare API token"
|
|
required
|
|
/>
|
|
<div class="form-text">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
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 fw-semibold">
|
|
<i class="bi bi-globe text-info me-2"></i>
|
|
Zone ID
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="zone-id-input"
|
|
name="zone_id"
|
|
value={ config.ZoneID }
|
|
placeholder="e.g., 1234567890abcdef1234567890abcdef"
|
|
required
|
|
/>
|
|
<div class="form-text">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
Found in the Cloudflare dashboard under your domain's overview page.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="domain-input" class="form-label fw-semibold">
|
|
<i class="bi bi-link-45deg text-success me-2"></i>
|
|
Domain
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="domain-input"
|
|
name="domain"
|
|
value={ config.Domain }
|
|
placeholder="e.g., example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="update-period" class="form-label fw-semibold">
|
|
<i class="bi bi-clock text-warning me-2"></i>
|
|
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"
|
|
@click="$el.closest('dialog').close()"
|
|
>
|
|
<i class="bi bi-x-lg me-1"></i>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary"
|
|
:disabled="saving"
|
|
>
|
|
<template x-if="!saving">
|
|
<span class="d-flex align-items-center">
|
|
<i class="bi bi-check-lg me-2"></i>
|
|
Save Configuration
|
|
</span>
|
|
</template>
|
|
<template x-if="saving">
|
|
<span class="d-flex align-items-center">
|
|
<span class="spinner-border spinner-border-sm me-2"></span>
|
|
Saving...
|
|
</span>
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ RecordForm(title, recordID, domain string, record DNSRecord) {
|
|
<div id="contact" class="modal-container">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="bi bi-dns text-primary me-2"></i>
|
|
{ title }
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
@click="$el.closest('dialog').close()"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div id="error-message" class="alert alert-danger d-none mx-3 mt-3" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
|
<span class="error-text"></span>
|
|
</div>
|
|
<form
|
|
if recordID != "" {
|
|
method="put"
|
|
action={ templ.URL(fmt.Sprintf("/records/%s", recordID)) }
|
|
} else {
|
|
method="post"
|
|
action="/records"
|
|
}
|
|
x-target="dns-records-table"
|
|
x-target.error="none"
|
|
@ajax:success="$el.closest('dialog').close()"
|
|
x-data="{ saving: false }"
|
|
@ajax:before="saving = true"
|
|
@ajax:after="saving = false"
|
|
@ajax:error="saving = false"
|
|
>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-8 mb-3">
|
|
<label for="record-name" class="form-label fw-semibold">
|
|
<i class="bi bi-tag text-info me-2"></i>
|
|
Record 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 bg-light text-muted">.{ domain }</span>
|
|
</div>
|
|
<div class="form-text">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
Use <code>{ "@" }</code> { "for" } the root domain
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="record-type" class="form-label fw-semibold">
|
|
<i class="bi bi-diagram-3 text-success me-2"></i>
|
|
Type
|
|
</label>
|
|
<select
|
|
class="form-select"
|
|
id="record-type"
|
|
name="type"
|
|
onchange="toggleMyIPOption()"
|
|
>
|
|
<option value="A" selected?={ record.Type == "A" }>A (IPv4)</option>
|
|
<option value="AAAA" selected?={ record.Type == "AAAA" }>AAAA (IPv6)</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>
|
|
<div class="mb-3" id="content-group">
|
|
<label for="record-content" class="form-label fw-semibold">
|
|
<i class="bi bi-file-text text-warning me-2"></i>
|
|
Content
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="record-content"
|
|
name="content"
|
|
value={ record.Content }
|
|
placeholder="Enter the record value"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3 form-check bg-light p-3 rounded" 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 fw-semibold" for="use-my-ip">
|
|
<i class="bi bi-geo-alt text-primary me-2"></i>
|
|
Use my current IP address
|
|
</label>
|
|
<div class="form-text">
|
|
Automatically use your current public IP address
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="record-ttl" class="form-label fw-semibold">
|
|
<i class="bi bi-clock-history text-secondary me-2"></i>
|
|
TTL (Time to Live)
|
|
</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="col-md-6 mb-3 d-flex align-items-end">
|
|
<div class="form-check bg-light p-3 rounded w-100">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="record-proxied"
|
|
name="proxied"
|
|
checked?={ record.Proxied }
|
|
/>
|
|
<label class="form-check-label fw-semibold" for="record-proxied">
|
|
<i class="bi bi-shield-check text-success me-2"></i>
|
|
Proxied through Cloudflare
|
|
</label>
|
|
<div class="form-text">
|
|
Enable Cloudflare's proxy and security features
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
@click="$el.closest('dialog').close()"
|
|
>
|
|
<i class="bi bi-x-lg me-1"></i>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary"
|
|
:disabled="saving"
|
|
>
|
|
<template x-if="!saving">
|
|
<span class="d-flex align-items-center">
|
|
<i class="bi bi-check-lg me-2"></i>
|
|
if recordID != "" {
|
|
Update Record
|
|
} else {
|
|
Create Record
|
|
}
|
|
</span>
|
|
</template>
|
|
<template x-if="saving">
|
|
<span class="d-flex align-items-center">
|
|
<span class="spinner-border spinner-border-sm me-2"></span>
|
|
if recordID != "" {
|
|
Updating...
|
|
} else {
|
|
Creating...
|
|
}
|
|
</span>
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
}
|