Trust reverse proxy client IP headers

karldns/web/components.py

@@ -31,30 +31,30 @@ def _event_label(status: object) -> str:
 def _copy_row(label: str, value: str, sensitivity: str | None = None, *, mask_secret: bool = True) -> SafeHtml:
     safe_label = escape(label)
     safe_value = escape(value)
-    badge = ""
+    attr_label = attr(label)
+    attr_value = attr(value)
     is_secret = bool(sensitivity and sensitivity.lower() == "secret")
-    if sensitivity:
-        safe_sensitivity = escape(sensitivity)
-        badge_class = "text-bg-warning" if is_secret else "text-bg-secondary"
-        badge = f'<span class="badge {badge_class} rounded-pill">{safe_sensitivity}</span>'
     should_mask = is_secret and mask_secret
     value_field = (
-        f'<input class="form-control copy-value text-truncate" type="password" value="{safe_value}" readonly data-secret-input>'
+        f'<input class="copy-pill-value copy-value" type="password" value="{attr_value}" readonly data-secret-input>'
         if should_mask
-        else f'<code class="form-control copy-value text-truncate">{safe_value}</code>'
+        else f'<code class="copy-pill-value copy-value">{safe_value}</code>'
     )
     reveal_button = (
-        f'<button type="button" class="btn btn-outline-secondary" data-secret-toggle aria-label="Show {safe_label}">View</button>'
+        f'<button type="button" class="btn btn-outline-secondary rounded-pill copy-reveal-button" data-secret-toggle aria-label="Show {attr_label}">View</button>'
         if should_mask
         else ""
     )
+    row_class = "copy-field copy-field-secret" if is_secret else "copy-field copy-field-public"
     return trusted(
         f"""
-        <div class="input-group copy-field">
-          <span class="input-group-text copy-label"><span>{safe_label}</span>{badge}</span>
-          {value_field}
-          {reveal_button}
-          <button type="button" class="btn btn-outline-secondary copy-button" data-copy="{safe_value}" aria-label="Copy {safe_label}">
+        <div class="{row_class}">
+          <div class="copy-pill">
+            <span class="copy-pill-label">{safe_label}</span>
+            {value_field}
+            {reveal_button}
+          </div>
+          <button type="button" class="btn btn-outline-secondary rounded-pill copy-button" data-copy="{attr_value}" aria-label="Copy {attr_label}">
             {_svg_icon("clipboard")}<span data-copy-label>Copy</span>{_svg_icon("check", "check-icon")}
           </button>
         </div>

karldns/web/styles.py

@@ -618,52 +618,67 @@ select:focus-visible {
 }
 
 .copy-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  gap: 12px;
   min-width: 0;
   max-width: 100%;
 }
 
-.copy-field .input-group-text {
-  min-width: 150px;
-  border-color: var(--rp-line);
-  color: var(--rp-muted);
-  font-size: 13px;
-  background: var(--rp-surface-alt);
-}
-
-.copy-label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.copy-field .form-control {
+.copy-pill {
+  display: flex;
   min-width: 0;
-  border-color: var(--rp-line);
+  min-height: 58px;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 16px;
+  border: 1px solid var(--rp-line);
+  border-radius: 9999px;
   background: var(--rp-field);
 }
 
+.copy-field-secret .copy-pill {
+  border-color: var(--rp-danger);
+}
+
+.copy-pill-label {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: var(--rp-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
 .copy-field .copy-value {
+  flex: 1 1 auto;
   min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.copy-field code.form-control {
-  width: 1%;
-  flex: 1 1 0;
   overflow: hidden;
-  white-space: nowrap;
+  color: var(--rp-ink);
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.copy-field code {
-  min-height: 42px;
+.copy-field code,
+.copy-field input {
   margin: 0;
-  color: var(--rp-ink);
+  border: 0;
+  outline: 0;
+  background: transparent;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  background: var(--rp-field);
+  font-size: 16px;
+  line-height: 1.45;
+}
+
+.copy-field input {
+  padding: 0;
+}
+
+.copy-reveal-button {
+  flex: 0 0 auto;
+  min-height: 36px;
+  padding-inline: 14px;
 }
 
 .copy-button {
@@ -671,6 +686,9 @@ select:focus-visible {
   align-items: center;
   justify-content: center;
   gap: 6px;
+  min-width: 122px;
+  min-height: 58px;
+  font-weight: 600;
 }
 
 .copy-button .copy-icon,
@@ -973,12 +991,15 @@ select:focus-visible {
   .copy-field {
     display: grid;
     grid-template-columns: 1fr;
+    gap: 10px;
   }
 
-  .copy-field .input-group-text {
-    min-width: 0;
-    border-radius: 14px 14px 0 0;
-    white-space: normal;
+  .copy-pill {
+    min-height: 50px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    border-radius: 24px;
+    padding: 12px 14px;
   }
 
   .copy-field .copy-value,
@@ -986,23 +1007,14 @@ select:focus-visible {
     width: 100%;
     white-space: normal;
     overflow-wrap: anywhere;
-    border-radius: 0;
-  }
-
-  .copy-field code.form-control {
-    flex: 1 1 auto;
-    width: 100%;
     overflow: visible;
     text-overflow: clip;
   }
 
-  .copy-field .btn {
+  .copy-field .copy-button {
     width: 100%;
-    border-radius: 0;
-  }
-
-  .copy-field .btn:last-child {
-    border-radius: 0 0 14px 14px;
+    min-height: 50px;
+    border-radius: 9999px;
   }
 
   .card .copy-icon-button,

karldns/web/templates_management.py

@@ -180,10 +180,6 @@ def _render_pending_management_page(
               <p class="eyebrow">Pending setup</p>
               <h1>{hostname}</h1>
               <p class="lead">Save these values, then register the hostname. Pending setups are cleaned up after {escape(cleanup_text)}.</p>
-              <form method="post" action="/m/{attr(management_slug)}/activate">
-                <input type="hidden" name="csrf" value="{attr(csrf_token)}">
-                <button class="btn btn-primary rounded-pill" type="submit">Register hostname</button>
-              </form>
             </div>
           </section>
           {message_html}