The Encryption Template

Explore

Variables

Setup Guide continued...

We’ll know when this template has been copied over to a new doc, by comparing the doc’s Created() timestamp with the timestamp we know that this doc was completed. If this doc is a copy, then we’ll display a notice at the top of

Encryption Template⁠

urging the user to visit the

Finish Installation⁠

page to complete all steps of the full setup flow.

Note that when a doc (or part thereof) is copied, all text inputs’ Created() timestamps are reset as Coda builds the new copy. When Coda copies a page over to another doc, it seems to build the components of the page one at a time, so it’s usual for their timestamp to be 15-30 seconds after the Doc’s Created() timestamp. This is handy to know, and is leveraged in this doc to determine whether or not the Published Form link for

Submit New Secret⁠

needs to be updated. We’ll know if it requires an update when its Modified() timestamp is within a few seconds of the Doc’s Created() timestamp.

VAR Document Created Timestamp

DateTime:

4/13/2021 1:08:22 AM

⁠

This is the datetime this Doc was created.

VAR Template Published Timestamp

DateTime:

5/3/2022, 3:00:00 PM

⁠

This is the datetime this template doc was completed.

VAR Document is Copy

Bool:

false

⁠

If this doc’s Created() timestamp is later than the timestamp I’ve hardcoded as this template’s VAR Template Publish Timestamp value, then we know this is a copy.

VAR Published Form link requires update

Bool:

false

⁠

If the user hasn’t updated the

Submit New Secret⁠

published form link since the copy has been made, then this toggles to true.

Fake Submit Button

This is the FAKE button I use at the bottom of the

New Secret⁠

form.

⁠

Modified from an

endlessly useful solution⁠

by Max Xyzor. The button at the bottom of the

New Secret⁠

form is actually fake (scandalous!). It’s an SVG image designed to replicate Coda’s native submit button... but with a cool animated gradient, because why not!? :)

VAR SVG Button Template

⁠

data:image/svg+xml,%3Csvg%20width="{4}"%20height="{5}"%20style="cursor:pointer"%20xmlns="http://www.w3.org/2000/svg"%3E{10}%3Crect%20width="{4}"%20height="{5}"%20rx="{8}"%20fill="{2}"%20/%3E%20%3Ctext%20x="{6}"%20y="{7}"%20fill="{3}"%20style="font-family:%20sans-serif;font-size:{9}px;cursor:pointer;"%3E{1}%3C/text%3E%3C/svg%3E

⁠

VAR SVG skyGradient Defs

⁠

⁠

VAR SVG Continue Button

⁠

data:image/svg+xml,%3Csvg%20width="100"%20height="28"%20style="cursor:pointer"%20xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22skyGradient%22%20x1%3D%22100%25%22%20y1%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230f5faf%22%20stop-opacity%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3Blightblue%3B%230f5faf%3B%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22lightblue%22%20stop-opacity%3D%22.5%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3B%20%230f5faf%22%20dur%3D%225s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22offset%22%20values%3D%221%3B%201%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%3Crect%20width="100"%20height="28"%20rx="9"%20fill="url(%23skyGradient)"%20/%3E%20%3Ctext%20x="10"%20y="19"%20fill="White"%20style="font-family:%20sans-serif;font-size:15px;cursor:pointer;"%3EContinue%20%E2%86%92%3C/text%3E%3C/svg%3E

⁠

SVG Button Settings

These allow you to easily modify the button’s components to ensure it's picture-perfect.

Label.

Continue →

⁠

BgColor.

url(#skyGradient)

⁠

FgColor.

White

⁠

Width.

000

100

⁠

Height.

⁠

TextX.

⁠

TextY.

⁠

BorderRadius.

⁠

FontSize.

⁠

Anim Speed.

000

2.4

⁠

↑ fast slow ↑

⁠

Copy SVG To Clipboard

⁠

Fake Decrypt Button

On the

Decrypt Secret⁠

page, the user needs to “click away” from the password field to trigger the decryption. To encourage them to do so, we have a face “decrypt” button that actually does nothing.

VAR SVG Decrypt Button

⁠

data:image/svg+xml,%3Csvg%20width="74"%20height="28"%20style="cursor:pointer"%20xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22skyGradient%22%20x1%3D%22100%25%22%20y1%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230f5faf%22%20stop-opacity%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3Blightblue%3B%230f5faf%3B%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22lightblue%22%20stop-opacity%3D%22.5%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3B%20%230f5faf%22%20dur%3D%225s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22offset%22%20values%3D%221%3B%201%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%3Crect%20width="74"%20height="28"%20rx="9"%20fill="url(%23skyGradient)"%20/%3E%20%3Ctext%20x="10"%20y="19"%20fill="White"%20style="font-family:%20sans-serif;font-size:15px;cursor:pointer;"%3EDecrypt%3C/text%3E%3C/svg%3E

⁠

Published Forms

VAR Published Form Link - Submit Secret

URL:

https://coda.io/form/Submit-New-Secret_d25AMJqXi6x

⁠

The first form,

New Secret⁠

has a Fake Submit Button that takes the user to the second form (this link).

This form requires the Encrypted Text, the Salt, and Title which are all passed via parameters in the URL, effectively pre-filling the fields’ values. The user then just clicks Submit and their encrypted data is saved to the table without much effort.

VAR User currently viewing

Current item:

[ ]

⁠

This is the row that the user is currently viewing on the

Decrypt Secret⁠

page.

Character Mapping

TEXT Char Mapping Cache

Current Characters:

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ”–’‘‚“‐‒—!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿

⁠

This is a string containing the currently supported characters. If a character is not in this field, it will be dropped during the encryption process. To manage supported characters, head over to

Setup and Config⁠

(requires that you selected the Custom Setup option when you copied this template to your doc). As per my frustrated comments on

What's Changed?⁠

, the [newline] character is automatically added as an additional character.

VAR Char Mapping TEXT has duplicates

Value:

false

⁠

If an individual character appears more than once in the Character Mapping text field, then this toggles to TRUE. When TRUE, the user is prompted to re-cache the character mapping, using buttons which appear:

- Under “Custom Setup” on

Dear Diary...⁠

- At the top of

Setup and Config⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.