ddns/templates/modal.templ

package templates

// ConfigModal is the configuration dialog component
templ ConfigModal() {
	<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>
				<div class="modal-body">
					<form id="config-form">
						<div class="mb-3">
							<label for="api-token" class="form-label">Cloudflare API Token</label>
							<input
								type="password"
								class="form-control"
								id="api-token"
								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"
								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"
								value="mz.uy"
								required
							/>
						</div>
						<div class="mb-3">
							<label for="update-period" class="form-label">Update Frequency</label>
							<select class="form-select" id="update-period">
								<!-- Options will be loaded from API -->
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						class="btn btn-secondary"
						data-bs-dismiss="modal"
					>
						Cancel
					</button>
					<button type="button" class="btn btn-primary" id="save-config">
						Save
					</button>
				</div>
			</div>
		</div>
	</div>
}

// RecordModal is the DNS record dialog component
templ RecordModal() {
	<div
		class="modal fade"
		id="recordModal"
		tabindex="-1"
		aria-labelledby="recordModalLabel"
		aria-hidden="true"
	>
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="recordModalLabel">Add DNS Record</h5>
					<button
						type="button"
						class="btn-close"
						data-bs-dismiss="modal"
						aria-label="Close"
					></button>
				</div>
				<div class="modal-body">
					<form id="record-form">
						<input type="hidden" id="record-id"/>
						<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"
									placeholder="subdomain"
									required
								/>
								<span class="input-group-text" id="domain-suffix">.mz.uy</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">
								<option value="A">A</option>
								<option value="AAAA">AAAA</option>
								<option value="CNAME">CNAME</option>
								<option value="TXT">TXT</option>
								<option value="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"
								required
							/>
						</div>
						<div class="mb-3 form-check" id="use-my-ip-group">
							<input
								type="checkbox"
								class="form-check-input"
								id="use-my-ip"
							/>
							<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">
								<option value="1">Auto</option>
								<option value="120">2 minutes</option>
								<option value="300">5 minutes</option>
								<option value="600">10 minutes</option>
								<option value="1800">30 minutes</option>
								<option value="3600">1 hour</option>
								<option value="7200">2 hours</option>
								<option value="18000">5 hours</option>
								<option value="43200">12 hours</option>
								<option value="86400">1 day</option>
							</select>
						</div>
						<div class="mb-3 form-check">
							<input
								type="checkbox"
								class="form-check-input"
								id="record-proxied"
							/>
							<label class="form-check-label" for="record-proxied">Proxied through Cloudflare</label>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						class="btn btn-secondary"
						data-bs-dismiss="modal"
					>
						Cancel
					</button>
					<button type="button" class="btn btn-primary" id="save-record">
						Save
					</button>
				</div>
			</div>
		</div>
	</div>
}