1import crypto from "crypto";
2
3import config from "./config.js";
4
5// templates
6const templates = {
7 head: `
8<!doctype html>
9<html>
10
11<head>
12 <meta charset="utf-8">
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14 <title>${config.appName}</title>
15
16 <style>
17body {
18 margin: 15px auto;
19 padding: 0 10px;
20 max-width: 650px;
21 font-family: sans-serif;
22}
23
24* {
25 box-sizing: border-box;
26}
27
28textarea {
29 display: block;
30 width: 100%;
31 font: 16px sans-serif;
32 margin-bottom: 5px;
33 padding: 6px;
34}
35
36button {
37 cursor: pointer;
38 display: inline-block;
39 margin: 2px 0;
40 padding: 6px 18px;
41 font-size: 17px;
42 background: #059862;
43 border-radius: 5px;
44 border: 0;
45 color: #fff;
46}
47
48.warning {
49 border: 2px dotted maroon;
50 border-radius: 3px;
51 padding: 6px;
52}
53
54 </style>
55</head>
56<body>
57`,
58
59 tail: `
60</body>
61
62</html>
63`,
64};
65
66export const pageHtml = {
67 home: () => {
68 let html = `${templates.head}`;
69
70 html += `
71<h1 style="margin-bottom: 5px;">Poof messages</h1>
72<h2 style="margin-top: 0px;">Make & share one-time-view-only secret messages</h2>
73
74<form method="POST" action="${config.basePath}">
75
76<label for="poof">Your secret message</label>
77<textarea name="poof" id="poof" rows="5" required></textarea>
78
79<button>Create poof message</button>
80
81</form>
82
83<div style="margin: 20px 0">
84 <a href="https://github.com/aktsbot/poof">See source code</a>
85</div>
86
87`;
88
89 html += `${templates.tail}`;
90 return html;
91 },
92 done: ({ fullUrl }) => {
93 let html = `${templates.head}`;
94
95 html += `
96<h2>Now go ahead and share it!</h2>
97
98<h3><a href="${fullUrl}">${fullUrl}</a></h3>
99`;
100
101 html += `${templates.tail}`;
102 return html;
103 },
104 view: ({ poof, showWarning }) => {
105 let html = `${templates.head}`;
106 if (showWarning) {
107 html += `
108<div class="warning">
109<h2 style="margin: 0;">Warning: This is a poof message</h2>
110<p>After you view this message, it's gone forever.</p>
111<a href="?view=1">I understand</a>
112</div>
113`;
114 } else {
115 if (poof) {
116 html += `
117<label for="poof">Your secret message</label>
118<textarea id="poof" rows="5" readonly>${poof}</textarea>
119`;
120 } else {
121 html += `
122<h2>Uh oh! Poof message not found</h2>
123<p>It might have been already viewed. Please ask who ever sent you this link to create a new one.</p>
124`;
125 }
126 }
127
128 if (!showWarning) {
129 html += `<div><a href="${config.basePath}">Make a new message?</a></div>`;
130 }
131 html += `${templates.tail}`;
132 return html;
133 },
134};
135
136export const makePoofId = () => crypto.randomBytes(3).toString("hex");