Merge pull request #9 from SgtCoDFish/certtweak

Overhaul implementation
cert-manager · Feb 20, 2024 · 9ef1187 · 9ef1187
2 parents 591d112 + e3067e3
commit 9ef1187
Show file tree

Hide file tree

Showing 12 changed files with 696 additions and 263 deletions.
diff --git a/after-print.html b/after-print.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="static/styles.css" />
-    <meta http-equiv="refresh" content="2;URL=/certificate?certName={{.CertName}}">
+    <meta http-equiv="refresh" content="2;URL=/certificate?certName={{.CertName}}&fetchKey={{.FetchKey}}">
   </head>
 
   <body>
@@ -26,6 +26,7 @@ <h1>Printing your certificate</h1>
       </div>
       <form method="GET" action="/certificate" class="form">
         <input name="certName" type="text" value="{{.CertName}}" hidden required />
+        <input name="fetchKey" type="text" value="{{.FetchKey}}" hidden required />
         <input type="submit" value="Back to your certificate" class="constrain" />
       </form>
       {{end}}

diff --git a/cert-card b/cert-card
@@ -0,0 +1,98 @@
+#! /usr/bin/env bash
+
+set -euo pipefail
+
+certname=${1:-}
+fetchkey=${2:-}
+
+if [[ -z $certname || -z $fetchkey ]]; then
+	echo "usage: $0 <certname> <fetchkey>"
+fi
+
+echo "Reading PEM from stdin..." >&2
+cat >/tmp/crt-$certname
+
+# When printing to the Brother QL-820WNB, the width of the image (as opposed to
+# the height) is scaled to the 6.2 cm of the label tape's width. In the
+# following, e.g., 984 x 696 px, means height x width. So the "second" number is
+# the one scaled to 6.2 cm.
+#
+# For example, with a portrait-mode image of 696 x 232 px, the "top" if the
+# image is scaled to the width of the paper roll (6.2 cm). If the "top" is 696
+# px, which the the nominal pixel width, then no scaling is neededd.
+#
+#                            696   x   232 px
+#                            ^^^       ^^^
+#                           width     height
+#                          (6.2 cm)
+#
+#   -  -  -  -  -  -  -  -  -  -  +--------------+  ^
+#                                 |    RIGHT     |  |
+#                                 |              |  |
+#    PAPER UNROLLS THIS WAY       | TOP          |  |  width
+#    -------------------->        |              |  |  696 px
+#                                 |   (normal    |  | (6.2 cm)
+#                                 |    orienta.) |  |
+#   -  -  -  -  -  -  -  -  -  -  +--------------+  v
+#                                 <-------------->
+#                               height 232 px (2.9 cm)
+#
+#
+# If I want the "right" of the image to scale to the 6.2 cm of the paper roll,
+# I need to --rotate 90. Since the "right" of the image is now scaled to the
+# width of the paper roll, I need to have an image with a in which case the size
+# is 696 x 984 px:
+#
+#                            696   x   984 px        (rotated 90 degrees)
+#                            ^^^       ^^^
+#                           width     height
+#                          (6.2 cm)
+#
+#   -  -  -  -  -  -  -  -  -  -  +------------------------------+  ^
+#                                 |             TOP              |  |
+#                                 |                              |  |
+#    PAPER UNROLLS THIS WAY       |                              |  |  width
+#    -------------------->        |                        RIGHT |  |  696 px
+#                                 |                              |  | (6.2 cm)
+#                                 |            (rotated 90)      |  |
+#   -  -  -  -  -  -  -  -  -  -  +------------------------------+  v
+#                                 <------------------------------>
+#                                       height 984 px (8.4 cm)
+#
+#
+# Format 1: 984 x 696 px (8.7 x 6.2 cm), requires --rotate 90 so that "696 px"
+# (the height) coincides with the the width of the paper roll.
+#
+# Format 2: 696 x 492 px (6.2 x 4.4 cm), requires no rotation.
+
+line1=$(
+    cat <<EOF
+Thank you for visiting the cert-manager
+booth! We hope you are enjoying
+your time in Paris.
+EOF
+)
+
+line2=$(
+    cat <<EOF
+This card is proof that you
+were there! On the back of
+the card, the QR code
+links to your certificate.
+EOF
+)
+
+# \( -gravity NorthEast logo.png -resize 160 -background white -alpha remove -alpha off -monochrome \) -geometry +40+20 -composite \
+# \( -gravity East kubecon-eu-2022-logo.png -resize 280 -background white -alpha remove -alpha off -monochrome \) -geometry +80+10 \
+convert -size 696x492 canvas:white \
+    \( -gravity NorthWest -font Open-Sans-Regular -pointsize 22 -fill black -annotate +0-0 "$line1" \) -geometry +0+0 \
+    \( -gravity NorthWest -font Open-Sans-Regular -pointsize 22 -fill black -annotate +0+115 "$line2" \) -geometry +0+0 \
+    \( -gravity SouthWest -font DejaVu-Sans-Mono -pointsize 22 -fill black -annotate +0+0 "$(step certificate inspect --short /tmp/crt-$certname | sed -e 's/\[\(.*\)\]/\n\1/' -e 's/Certificate (\(.*\))/Certificate\nAlgorithm: \1/' | sed 's/^  //')" \) -geometry +0+0 \
+    -background None -layers Flatten front-$certname.png
+
+# TODO: update this URL
+# url="http://print-your-cert.cert-manager.io/certificate?certName=$certname&fetchKey=$fetchkey"
+url="http://192.168.1.171:8080/certificate?certName=$certname&fetchKey=$fetchkey"
+echo "$url" >&2
+echo "$url" | qrencode --type PNG --margin 4 -o - | convert -size 696x492 canvas:white \
+    \( -gravity Center -monochrome -filter point -interpolate nearest - -resize 492 \) -composite back-$certname.png
diff --git a/certificate.html b/certificate.html
@@ -8,9 +8,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
+        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
+        rel="stylesheet"
+        />
     <link rel="stylesheet" href="static/styles.css" />
   </head>
 
@@ -19,20 +19,25 @@
       <img src="static/images/logo.svg" alt="Logo" width="220" height="191" />
       <h1 class="mainTitle">Print Your Certificate</h1>
       <div class="divider"></div>
+
       <div>
         {{if .Certificate}}
         <h2>Hi, {{.Name}} &lt;{{.Email}}&gt;!</h2>
         <p>Here is your certificate:</p>
         <div class="panel">
           <div class="content">{{template "certificate" .Certificate}}</div>
           <img
-          src="static/images/certificate-icon.svg"
-          alt=""
-          class="iconBottom"
-          />
+              src="static/images/certificate-icon.svg"
+              alt="An icon representing a certificate"
+              class="iconBottom"
+              />
         </div>
         {{end}}
 
+        {{if .Refresh}}
+        <div class="success">The certificate will appear shortly, this page will reload itself.</div>
+        {{end}}
+
         {{if .AlreadyPrinted}}
         <div class="success">The certificate has already been printed.</div>
         {{end}}
@@ -51,52 +56,75 @@ <h2>Hi, {{.Name}} &lt;{{.Email}}&gt;!</h2>
         </div>
         {{end}}
 
-        {{if .Certificate.Subject}}
+        {{if .Certificate }}
         <div>
           {{if not .AlreadyPrinted}}
+
           <form method="POST" action="/print">
             <input name="certName" type="text" value="{{.CertName}}" hidden />
+            <input name="fetchKey" type="text" value="{{.FetchKey}}" hidden />
             <button type="submit" class="constrain">Send to print</button>
           </form>
+
+          <br />
           {{end}}
+
+          <form method="GET" action="/cert-manager-bundle.tar">
+            <input name="certName" type="text" value="{{.CertName}}" hidden />
+            <input name="fetchKey" type="text" value="{{.FetchKey}}" hidden />
+            <button type="submit" class="constrain">
+              Download Cert Bundle Tarball
+            </button>
+          </form>
+
           <br />
+
           <form method="GET" action="/download">
             <input name="certName" type="text" value="{{.CertName}}" hidden />
-            <p style="color: darkgreen"></p>
+            <input name="fetchKey" type="text" value="{{.FetchKey}}" hidden />
             <button type="submit" class="constrain">
-              Download in PEM format
+              Download PEM Certificate Chain
+            </button>
+          </form>
+
+          <br />
+
+          <form method="GET" action="/downloadpkey">
+            <input name="certName" type="text" value="{{.CertName}}" hidden />
+            <input name="fetchKey" type="text" value="{{.FetchKey}}" hidden />
+            <button type="submit" class="constrain">
+              Download PEM Private Key
             </button>
           </form>
         </div>
         {{end}}
-      </div>
-      <div class="divider"></div>
-      <div class="push"></div>
-      <div>
-        <a href="/">
-          <button type="submit" class="constrain">Go back to the creation page</button>
-        </a>
-      </div>
-    </div>
-    {{if .Debug}}
-    </div class="divider"></div>
-    <pre>{{.Debug}}</pre>
-    {{end}}
-    <footer>
-      <p>
-        Powered by
-        <a href="https://cert-manager.io" target="_blank">cert-manager.io</a>
-      </p>
-      <p class="small">
-        Project proudly supported by
-        <a href="https://jetstack.io" target="_blank">jetstack.io</a>
-      </p>
-      <p class="small">
-        Design by
-        <a href="https://constantinchirila.com" target="_blank"
-          >Constantin Chirila</a
-        >
-      </p>
-    </footer>
+
+        <div class="divider"></div>
+
+        <div>
+          <a href="/">
+            <button type="submit" class="constrain">Go back to the creation page</button>
+          </a>
+        </div>
+
+        {{if .Debug}}
+        <div class="divider"></div>
+        <pre>{{.Debug}}</pre>
+        {{end}}
+
+        <div class="divider"></div>
+
+        <footer>
+          <p>
+          Powered by <a href="https://cert-manager.io" target="_blank">cert-manager.io</a>
+          </p>
+          <p class="small">
+          Project proudly supported by
+          <a href="https://venafi.com" target="_blank">Venafi</a>
+          </p>
+          <p class="small">
+          Design by <a href="https://constantinchirila.com" target="_blank">Constantin Chirila</a>
+          </p>
+        </footer>
   </body>
 </html>
diff --git a/cluster_issuer.yaml b/cluster_issuer.yaml
@@ -8,6 +8,41 @@ spec:
 
 ---
 
+apiVersion: cert-manager.io/v1
+kind: Certificate
+metadata:
+  name: root-print-your-cert-ca
+  namespace: cert-manager
+spec:
+  isCA: true
+  privateKey:
+    algorithm: ECDSA
+    size: 256
+  secretName: root-print-your-cert-ca
+  commonName: The cert-manager maintainers Root CA
+  subject:
+    organizations:
+    - CNCF
+    organizationalUnits:
+    - cert-manager
+  duration: 876000h # 100 years.
+  issuerRef:
+    name: self-signed
+    kind: Issuer
+
+---
+
+apiVersion: cert-manager.io/v1
+kind: Issuer
+metadata:
+  name: root-print-your-cert-ca-issuer
+  namespace: cert-manager
+spec:
+  ca:
+    secretName: root-print-your-cert-ca
+
+---
+
 apiVersion: cert-manager.io/v1
 kind: Certificate
 metadata:
@@ -20,9 +55,20 @@ spec:
     size: 256
   secretName: print-your-cert-ca
   commonName: The cert-manager maintainers
-  duration: 262800h # 30 years.
+  subject:
+    organizations:
+    - CNCF
+    organizationalUnits:
+    - cert-manager
+    countries:
+    - GB
+    - US
+    - FR
+    - ES
+    - NL
+  duration: 438000h # 50 years.
   issuerRef:
-    name: self-signed
+    name: root-print-your-cert-ca-issuer
     kind: Issuer
 
 ---

diff --git a/error.html b/error.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
+        rel="stylesheet"
+        />
+    <link rel="stylesheet" href="static/styles.css" />
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <br />
+      <img src="static/images/logo.svg" alt="Logo" width="220" height="191" />
+      <h1 class="mainTitle">Print Your Certificate</h1>
+
+      <div class="divider"></div>
+
+      <div class="error">{{.Error}}</div>
+
+      <div class="divider"></div>
+
+      <div>
+        <a href="/">
+          <button type="submit" class="constrain">Go back to the creation page</button>
+        </a>
+      </div>
+    </div>
+
+    <footer>
+      <p>
+      Powered by <a href="https://cert-manager.io" target="_blank">cert-manager.io</a>
+      </p>
+      <p class="small">
+      Project proudly supported by
+      <a href="https://venafi.com" target="_blank">Venafi</a>
+      </p>
+      <p class="small">
+      Design by <a href="https://constantinchirila.com" target="_blank">Constantin Chirila</a>
+      </p>
+    </footer>
+  </body>
+</html>
diff --git a/go.mod b/go.mod
@@ -1,4 +1,4 @@
-module github.com/maelvls/print-your-cert
+module github.com/cert-manager/print-your-cert
 
 go 1.21