SFE: Add more Let's Encrypt branding to the web UI (#7609)

Rework the Self-Service Unpause Portal's UI: - Use Let's Encrypt logo and colors - Use Let's Encrypt favicon - Modify the layout to have a visually separate header and footer Part of #7499 Part of #7619
letsencrypt · Jul 25, 2024 · 92b6a16 · 92b6a16
1 parent 98a4bc0
commit 92b6a16
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 168 deletions.
diff --git a/sfe/pages/index.html b/sfe/pages/index.html
@@ -1,22 +1,16 @@
-<!doctype html>
-<html dir="ltr" lang="en-US">
-    <header>
-        <title>Self-Service Frontend</title>
-        {{ template "meta" }}
-    </header>
-    <body>
-    <h1>No Action Required</h1>
-    <div>
+{{ template "header" }}
+
+<div class="section">
+    <h1>Invalid self-service URL</h1>
+    <p>
+        If you got here by visiting a URL found in your ACME client logs, please
+        carefully check that you copied the URL correctly.
+    </p>
     <p>
-        There is no action for you to take. This page is intended for
-        Subscribers whose accounts have been temporarily restricted from
-        requesting new certificates for certain identifiers, following a
-        significant number of failed validation attempts without any recent
-        successes. If your account was paused, your <a
-        href="https://letsencrypt.org/docs/client-options/">ACME client</a>
-        would provide you with a URL to visit to unpause your account.
+        If you continue to encounter difficulties, or if you need more help, our
+        <a href='https://community.letsencrypt.org'>community support forum</a>
+        is a great resource for troubleshooting and advice.
     </p>
-    </div>
-</body>
+</div>
 
 {{template "footer"}}
diff --git a/sfe/pages/unpause-form.html b/sfe/pages/unpause-form.html
@@ -1,64 +1,73 @@
-<!doctype html>
-<html dir="ltr" lang="en-US">
-    <header>
-        <title>Unpause - Self-Service Frontend</title>
-        {{ template "meta" }}
-    </header>
-    <body>
-    <div>
-    <h1>Action Required to Unpause Your ACME Account</h1>
+{{ template "header" }}
 
+<div class="section">
+    <h1>Action required to unpause your account</h1>
     <p>
-        You have been directed to this page because your Account ID {{ .AccountID }} 
-        is temporarily restricted from requesting new certificates for certain
-        identifiers including, but potentially not limited to, the following:
-        <ul>
-            {{ range $identifier := .Identifiers }}<li>{{ $identifier }}</li>{{ end }}
-        </ul>
+        You have been directed to this page because your ACME account (ID: {{
+        .AccountID }}) is temporarily restricted from requesting new
+        certificates for certain identifiers including, but not limited to, the
+        following:
     </p>
-
-    <h2>Why Did This Happen?</h2> 
+    <ul>
+        {{ range $identifier := .Identifiers }}<li>{{ $identifier}}</li>{{ end }}
+    </ul>
+    <p>
+        These identifiers were paused after consistently failing validation
+        attempts without any successes over an extended period.
+    </p>
+</div>
+
+<div class="section">
+    <h1>Why did this happen?</h1>
     <p>
         This often happens when domain names expire, point to new hosts, or if
         there are issues with the DNS configuration or web server settings.
-        These problems prevent your ACME client from successfully <a
-        href="https://letsencrypt.org/how-it-works/">validating control over the
-        domain</a>, which is necessary for issuing TLS certificates.
+        These problems prevent your ACME client from successfully
+        <a href="https://letsencrypt.org/how-it-works/">validating control over
+        the domain</a>, which is necessary for issuing TLS certificates.
     </p>
-
-    <h2>What Can You Do?</h2>
+</div>
+
+<div class="section highlight">
+    <h1>What can you do?</h1>
     <p>
         Please check the DNS configuration and web server settings for the
         affected identifiers. Ensure they are properly set up to respond to ACME
-        challenges. This might involve updating DNS records, renewing domain
-        registrations, or adjusting web server configurations. If you use a
-        hosting provider or third-party service for domain management, you may
-        need to coordinate with them. If you believe you've fixed the underlying
-        issue, consider attempting issuance against our <a
-        href="https://letsencrypt.org/docs/staging-environment/">staging
-        environment</a> to verify your fix.
+        challenges. This could include:
+    <ul>
+        <li>updating DNS records,</li>
+        <li>renewing domain registrations, or</li>
+        <li>adjusting web server configurations.</li>
+    </ul>
+
+    If you use a hosting provider or third-party service for domain management,
+    you may need to coordinate with them. If you believe you've fixed the
+    underlying issue, consider attempting issuance against our <a
+    href="https://letsencrypt.org/docs/staging-environment/">staging
+    environment</a> to verify your fix.
     </p>
-
-    <h2>Ready to Unpause?</h2>
+</div>
+
+<div class="section">
+    <h1>Ready to unpause?</h1>
     <p>
-        Once you have addressed these issues, click the button below to remove
-        the pause on your account. This action will allow you to resume
-        requesting certificates for all affected identifiers associated with
-        your account.
+        If you believe these issues have been addressed, click the button below
+        to remove the pause on your account. This action will allow you to
+        resume requesting certificates for all affected identifiers associated
+        with your account, not just those listed above.
     </p>
+    <form action="{{ .UnpauseFormRedirectionPath }}?jwt={{ .JWT }}" method="POST">
+        <button class="primary" id="submit">Please Unpause My Account</button>
+    </form>
+</div>
+
+<div class="section">
     <p>
-        <strong>Note:</strong> If you face difficulties unpausing your account or
-        need more guidance, our <a
+        <b>Note:</b> If you encounter difficulties unpausing your account, or
+        you need more help, our <a
         href="https://community.letsencrypt.org">community support forum</a> is
         a great resource for troubleshooting and advice.
     </p>
-        <div>
-            <form action="{{ .UnpauseFormRedirectionPath }}?jwt={{ .JWT }}" method="POST">
-              <button class="primary" id="submit">Please Unpause My Account</button>
-            </form>
-        </div>
-
-    </div>
-</body>
+</div>
 
 {{template "footer"}}
diff --git a/sfe/pages/unpause-invalid-request.html b/sfe/pages/unpause-invalid-request.html
@@ -1,20 +1,16 @@
-<!doctype html>
-<html dir="ltr" lang="en-US">
-    <header>
-        <title>Unpause - Self-Service Frontend</title>
-        {{ template "meta" }}
-    </header>
-    <body>
-    <div>
-    <h1>Invalid Request To Unpause Account</h1>
-    <p>        
-        Your unpause request was invalid meaning that we could not find all of
-        the data required in the URL. Please verify you copied the log line from
-        your client correctly. You may visit our <a
-        href="https://community.letsencrypt.org">community forum</a> and request
-        assistance if the problem persists.
+{{ template "header" }}
+
+<div class="section">
+    <h1>Invalid unpause URL</h1>
+    <p>
+        If you got here by visiting a URL found in your ACME client logs, please
+        carefully check that you copied the URL correctly.
+    </p>
+    <p>
+        If you continue to encounter difficulties, or if you need more help, our
+        <a href='https://community.letsencrypt.org'>community support forum</a>
+        is a great resource for troubleshooting and advice.
     </p>
-    </div>
-</body>
+</div>
 
 {{template "footer"}}
diff --git a/sfe/pages/unpause-status.html b/sfe/pages/unpause-status.html
@@ -1,32 +1,27 @@
-<!doctype html>
-<html dir="ltr" lang="en-US">
-    <header>
-        <title>Unpause - Self-Service Frontend</title>
-        {{ template "meta" }}
-    </header>
-    <body>
-    <div>
+{{ template "header" }}
+
+<div class="section">
+
     {{ if eq .UnpauseSuccessful true }}
-    <h1>Your ACME Account Has Been Unpaused</h1>
 
+    <h1>Account successfully unpaused</h1>
     <p>
-        Your ACME account has been unpaused. To obtain a new certificate,
-        re-attempt issuance with your ACME client. Future repeated validation
-        failures with no successes will result in your account being paused
-        again.
+        To obtain a new certificate, re-attempt issuance with your ACME client.
+        Future repeated validation failures with no successes will result in
+        identifiers being paused again.
     </p>
-    {{ else }} 
-    <h1>Error Occurred While Unpausing Account</h1>
-
-    <p>        
-        An error was encountered when attempting to unpause your account. Please
-        try again later. You may visit our <a
-        href="https://community.letsencrypt.org">community forum</a> and request
-        assistance if the problem persists.
+
+    {{ else }}
+
+    <h1>An error occurred while unpausing your account</h1>
+    <p>
+        Please try again later. If you face continued difficulties, please visit our <a
+        href="https://community.letsencrypt.org">community support forum</a>
+        for troubleshooting and advice.
     </p>
+
     {{ end }}
 
-    </div>
-</body>
+</div>
 
 {{template "footer"}}
diff --git a/sfe/sfe.go b/sfe/sfe.go
@@ -32,7 +32,7 @@ var (
 	//go:embed all:static
 	staticFS embed.FS
 
-	//go:embed all:templates all:pages
+	//go:embed all:templates all:pages all:static
 	dynamicFS embed.FS
 )
 

diff --git a/sfe/sfe_test.go b/sfe/sfe_test.go
@@ -151,7 +151,7 @@ func TestIndexPath(t *testing.T) {
 	})
 
 	test.AssertEquals(t, responseWriter.Code, http.StatusOK)
-	test.AssertContains(t, responseWriter.Body.String(), "<title>Self-Service Frontend</title>")
+	test.AssertContains(t, responseWriter.Body.String(), "<title>Let's Encrypt - Self-Service Portal</title>")
 }
 
 func TestBuildIDPath(t *testing.T) {
@@ -178,7 +178,7 @@ func TestUnpausePaths(t *testing.T) {
 		URL:    mustParseURL(unpause.GetForm),
 	})
 	test.AssertEquals(t, responseWriter.Code, http.StatusOK)
-	test.AssertContains(t, responseWriter.Body.String(), "request was invalid meaning that we could not")
+	test.AssertContains(t, responseWriter.Body.String(), "Invalid unpause URL")
 
 	// GET with an invalid JWT
 	responseWriter = httptest.NewRecorder()
@@ -187,7 +187,7 @@ func TestUnpausePaths(t *testing.T) {
 		URL:    mustParseURL(fmt.Sprintf(unpause.GetForm + "?jwt=x")),
 	})
 	test.AssertEquals(t, responseWriter.Code, http.StatusOK)
-	test.AssertContains(t, responseWriter.Body.String(), "error was encountered when attempting to unpause your account")
+	test.AssertContains(t, responseWriter.Body.String(), "An error occurred while unpausing your account")
 
 	// GET with a valid JWT
 	unpauseSigner, err := unpause.NewJWTSigner(cmd.HMACKeyConfig{KeyFile: "../test/secrets/sfe_unpause_key"})
@@ -200,7 +200,7 @@ func TestUnpausePaths(t *testing.T) {
 		URL:    mustParseURL(fmt.Sprintf(unpause.GetForm + "?jwt=" + validJWT)),
 	})
 	test.AssertEquals(t, responseWriter.Code, http.StatusOK)
-	test.AssertContains(t, responseWriter.Body.String(), "This action will allow you to resume")
+	test.AssertContains(t, responseWriter.Body.String(), "Action required to unpause your account")
 
 	// POST with no JWT
 	responseWriter = httptest.NewRecorder()
@@ -209,7 +209,7 @@ func TestUnpausePaths(t *testing.T) {
 		URL:    mustParseURL(unpausePostForm),
 	})
 	test.AssertEquals(t, responseWriter.Code, http.StatusOK)
-	test.AssertContains(t, responseWriter.Body.String(), "request was invalid meaning that we could not")
+	test.AssertContains(t, responseWriter.Body.String(), "Invalid unpause URL")
 
 	// POST with an invalid JWT
 	responseWriter = httptest.NewRecorder()
@@ -218,7 +218,7 @@ func TestUnpausePaths(t *testing.T) {
 		URL:    mustParseURL(fmt.Sprintf(unpausePostForm + "?jwt=x")),
 	})
 	test.AssertEquals(t, responseWriter.Code, http.StatusOK)
-	test.AssertContains(t, responseWriter.Body.String(), "An error was encountered when attempting to unpause")
+	test.AssertContains(t, responseWriter.Body.String(), "An error occurred while unpausing your account")
 
 	// POST with a valid JWT redirects to a success page
 	responseWriter = httptest.NewRecorder()
@@ -236,5 +236,5 @@ func TestUnpausePaths(t *testing.T) {
 		URL:    mustParseURL(unpauseStatus),
 	})
 	test.AssertEquals(t, responseWriter.Code, http.StatusOK)
-	test.AssertContains(t, responseWriter.Body.String(), "Your ACME account has been unpaused.")
+	test.AssertContains(t, responseWriter.Body.String(), "Account successfully unpaused")
 }
diff --git a/sfe/static/favicon.ico b/sfe/static/favicon.ico