UX improvement for CSR and P12

app/keys_home/templates/keys_home/base.html

@@ -70,7 +70,6 @@
             </div>
           </li>
           {% endif %}
-          </li>
         </ul>
     </div>
   </div>

app/owlca/templates/owlca/certificate_pickup.html

@@ -33,16 +33,6 @@
   <strong>{{ certificatesigningrequest.verification_text }}</strong>
 </p>
 
-<div class="alert alert-info">
-  <p>To use the certificate in your browser,</p>
-  <ol>
-    <li>combine your private key with the certificate
-    <pre>openssl pkcs12 -export -out cert.p12 -inkey key.pem -in cert.pem</pre>
-    </li>
-    <li>and import the <code>cert.p12</code> in your browser.</li>
-  </ol>
-</div>
-
 {% if certificatesigningrequest.verification == 10 %}
 <ul class="list-unstyled">
     {% for cert in certificatesigningrequest.certificates.all %}
@@ -50,12 +40,33 @@
     {% endfor %}
 </ul>
 
+<h3>Create PKCS12 bundle</h3>
+
 <script src="/static/react/runtime.js"></script>
 <script src="/static/react/vendors.js"></script>
 <script src="/static/react/main.js"></script>
 
-<h3>Create PKCS12 bundle with helper</h3>
-<div id="helper-root">Loading helper...</div>
+<div class="row mt-3">
+  <div class="col-lg-6" id="helper-root">
+    Loading helper..
+  </div>
+  <div class="col-lg-6">
+    <div class="card my-2">
+      <h5 class="card-header">Create PKCS12 bundle manually</h5>
+      <div class="card-body">
+        <p>To use the certificate in your browser,</p>
+        <ol>
+          <li>combine your private key with the certificate
+          <pre>openssl pkcs12 -export -out cert.p12 -inkey key.pem -in cert.pem</pre>
+          </li>
+          <li>and import the <code>cert.p12</code> in your browser.</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+
+
 <script>
 var certPemElements = document.getElementsByClassName('cert-pem-data')
 keys.ReactDOM.render(

app/owlca/templates/owlca/certificatesignrequest_create.html

@@ -24,10 +24,27 @@
 <i class="fas fa-stamp"></i> {{ certificationauthority.title }}</a>:</p>
 <p class="text-muted">{{ certificationauthority.comment }}</p>
 
+<script src="/static/react/runtime.js"></script>
+<script src="/static/react/vendors.js"></script>
+<script src="/static/react/main.js"></script>
+
+<h3 class="mt-3">Option A: Create CSR in your browser</h3>
+<div id="helper-root">Loading helper...</div>
+<script>
+keys.ReactDOM.render(
+  keys.React.createElement(keys.CsrDialog, {
+    csrfToken: "{{csrf_token}}"
+  }),
+  document.getElementById('helper-root')
+);
+</script>
+
+<hr />
+<h3 class="mt-3">Option B: Create CSR manually</h3>
 <div class="row mt-3">
   <div class="col-lg-6">
     <div class="card my-2">
-      <h3 class="card-header">1. Create key and CSR</h3>
+      <h5 class="card-header">1. Create key and CSR</h5>
       <div class="card-body">
         <p>Generate a new private key and create a certificate signing request
         (CSR). For example, execute the following command and enter the
@@ -41,7 +58,7 @@ openssl req -new -key key.pem -out csr.pem</pre>
 
   <div class="col-lg-6">
     <div class="card my-2">
-      <h3 class="card-header">2. Submit CSR</h3>
+      <h5 class="card-header">2. Submit CSR</h5>
       <div class="card-body">
         <p>Upload the certificate signing request in PEM format.</p>
         <form action="" method="post" enctype="multipart/form-data">
@@ -54,19 +71,4 @@ openssl req -new -key key.pem -out csr.pem</pre>
   </div>
 </div>
 
-<script src="/static/react/runtime.js"></script>
-<script src="/static/react/vendors.js"></script>
-<script src="/static/react/main.js"></script>
-
-<h3>Create CSR with helper</h3>
-<div id="helper-root">Loading helper...</div>
-<script>
-keys.ReactDOM.render(
-  keys.React.createElement(keys.CsrDialog, {
-    csrfToken: "{{csrf_token}}"
-  }),
-  document.getElementById('helper-root')
-);
-</script>
-
 {% endblock %}

js/src/components/CreateCsr.jsx

@@ -123,7 +123,11 @@ const CreateCsr = ({privateKey, csrfToken}) => {
                onChange={e => setOrganizationUnit(e.target.value) || reset()} />
       </div>
       <div>
-        <button disabled={!commonName} className="btn btn-primary m-1" type="submit"> 
+        <button disabled={!commonName}
+                className={classNames("btn", "m-1",
+                                      {"btn-primary": !downloadUrl},
+                                      {"btn-outline-primary": downloadUrl})}
+                type="submit"> 
           Create CSR
         </button>
       </div>
@@ -131,14 +135,14 @@ const CreateCsr = ({privateKey, csrfToken}) => {
     { downloadUrl && <>
       <hr />
       <form action="" method="post">
-        <a className="btn btn-primary m-1" download="csr.pem" href={downloadUrl}>
-          Download CSR
-        </a>
         <input type="hidden" name="csr_pem" value={csrPem} />
         <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
         <button className="btn btn-primary m-1" type="submit">
           Submit CSR
         </button>
+        <a className="btn btn-outline-secondary m-1" download="csr.pem" href={downloadUrl}>
+          Download CSR
+        </a>
       </form>
     </>}
   </>)

js/src/components/CsrDialog.jsx

@@ -7,6 +7,7 @@ import KeyInfo from "./KeyInfo.jsx"
 import CreateCsr from "./CreateCsr.jsx"
 
 const CsrDialog = ({csrfToken}) => {
+  const [enabled, setEnabled] = useState(true)
   const [privateKeyPem, setPrivateKeyPem] = useState(null)
   const [keys, setKeys] = useState(null)
 
@@ -15,10 +16,18 @@ const CsrDialog = ({csrfToken}) => {
       setKeys(keys)
   }
 
+  if (!enabled) {
+      return (<div>
+        <button className="btn btn-secondary" onClick={() => setEnabled(true)}>
+          Enable CSR tool
+        </button>
+      </div>)
+  }
 
-  return (<>
-      <div className="card m-2">
-        <h3 className="card-header">Private key</h3>
+  return (<div className="row">
+    <div className="col-md-6">
+      <div className="card my-2">
+        <h5 className="card-header">1. Generate private key</h5>
         <div className="card-body">
           <GeneratePrivateKey
               onKeyCreated={(keys, pem) => handleKeyCreated(keys, pem)}
@@ -28,13 +37,16 @@ const CsrDialog = ({csrfToken}) => {
           <KeyInfo privateKey={keys && keys.privateKey} privateKeyPem={privateKeyPem} />
         </div>
       </div>
-      <div className="card m-2">
-        <h3 className="card-header">Certificate Signing Request</h3>
+    </div>
+    <div className="col-md-6">
+      <div className="card my-2">
+        <h5 className="card-header">2. Create Certificate Signing Request</h5>
         <div className="card-body">
           <CreateCsr csrfToken={csrfToken} privateKey={keys && keys.privateKey} />
         </div>
       </div>
-  </>)
+    </div>
+  </div>)
 }
 
 export default CsrDialog

js/src/components/GeneratePrivateKey.jsx

@@ -8,6 +8,7 @@ const GeneratePrivateKey = ({onKeyCreated}) => {
   const [keyLength, setKeyLength] = useState(2048)
   const [password, setPassword] = useState("")
   const [repeat, setRepeat] = useState("")
+  const [hasKey, setHasKey] = useState(false)
 
   if (!onKeyCreated) {
     // Default callback
@@ -37,6 +38,7 @@ const GeneratePrivateKey = ({onKeyCreated}) => {
       setPassword("")
       setRepeat("")
       onKeyCreated(keys, pem)
+      setHasKey(true)
     })
   }
 
@@ -69,7 +71,10 @@ const GeneratePrivateKey = ({onKeyCreated}) => {
         <div className="invalid-feedback">Password don't match</div>
       </div>
 
-      <button type="button" className="btn btn-primary"
+      <button type="button"
+              className={classNames("btn",
+                                    {"btn-primary": !hasKey},
+                                    {"btn-outline-primary": hasKey})}
               disabled={inProgress || (password != repeat)}
               onClick={() => generateKey()}>
         { inProgress && <>
@@ -77,7 +82,7 @@ const GeneratePrivateKey = ({onKeyCreated}) => {
                   role="status" aria-hidden="true"></span> {' '}
           </>
         }
-        Generate private key
+        Generate {hasKey && "new" } private key
       </button>
     </form>
   </>)

js/src/components/KeyInfo.jsx

@@ -33,11 +33,13 @@ const KeyInfo = ({privateKey, privateKeyPem}) => {
     { fingerprint &&  
          <p>Fingerprint: <code>{fingerprint}</code></p>
     }
-    { downloadUrl && 
+    { downloadUrl && <>
+         <p className="alert alert-info">Please keep the private safe and
+         secure.</p>
          <a href={downloadUrl} download="key.pem" className="btn btn-primary">
             Download private key
          </a>
-    }
+    </>}
     { (!fingerprint && !downloadUrl) &&
         <p>No private key available</p>
     }

js/src/components/KeyUpload.jsx

@@ -6,6 +6,7 @@ import classNames from "classnames"
 const KeyUpload = ({onKeyUpload}) => {
   const [pem, setPem] = useState(null)
   const [password, setPassword] = useState("")
+  const [uploaded, setUploaded] = useState(false)
   
   if (!onKeyUpload) {
       onKeyUpload = (key, password) => console.log(key)
@@ -24,12 +25,13 @@ const KeyUpload = ({onKeyUpload}) => {
           privateKey = pki.privateKeyFromPem(pem)
       }
       onKeyUpload(privateKey, password)
+      setUploaded(true)
   }
 
   return (<form onSubmit={e => {e.preventDefault(); upload()}}>
       <div className="form-group">
         <label htmlFor="file-upload">
-            Private key <small className="text-muted">(PEM format)</small>
+            Private key <small className="text-muted">(PEM format)</small><br />
             <small className="text-success">Your private key will not leave your local browser.</small>
         </label>
         <input className="form-control-file" id="file-upload" type="file"
@@ -41,7 +43,10 @@ const KeyUpload = ({onKeyUpload}) => {
                 value={password}
                 onChange={e => setPassword(e.target.value)} />
       </div>
-      <button type="button" className="btn btn-primary"
+      <button type="button"
+              className={classNames("btn",
+                                    {"btn-primary": !uploaded},
+                                    {"btn-outline-primary": uploaded})}
               disabled={!pem}
               onClick={() => upload()}>
         Import

js/src/components/P12Dialog.jsx

@@ -10,17 +10,26 @@ const P12Dialog = ({csrfToken, certPemElements}) => {
 
   const [privateKey, setPrivateKey] = useState(null)
   const [password, setPassword] = useState(null)
+  const [enabled, setEnabled] = useState(true)
 
   const handleKeyUpload = (key, password) => {
       setPrivateKey(key)
       setPassword(password)
   }
 
+  if (!enabled) {
+      return (<div>
+        <button className="btn btn-secondary" onClick={() => setEnabled(true)}>
+          Enable PKCS12 bundle tool
+        </button>
+      </div>)
+  }
+
   const certPems = Array.from(certPemElements).map(x => x.textContent)
 
   return (<>
-      <div className="card m-2">
-        <h3 className="card-header">Create PKCS 12</h3>
+      <div className="card my-2">
+        <h5 className="card-header">Create PKCS12</h5>
         <div className="card-body">
           <KeyUpload
               onKeyUpload={(key, password) => handleKeyUpload(key, password)}