simplify config and update readme

.env.example

@@ -1,4 +1,11 @@
+# Replace this with your TinyMCE API key from https://www.tiny.cloud/my-account/integrate/
 TINYMCE_API_KEY=your-api-key
+
+# Replace this with your Uploadcare PUBLIC key from https://app.uploadcare.com/
 UPLOADCARE_PUBLIC_KEY=your-public-key
+
+# Replace this with your Uploadcare SECRET key from https://app.uploadcare.com/
 UPLOADCARE_SECRET_KEY=your-secret-key
-SESSION_SECRET=your-session-secret
+
+# Replace this with your session secret (optional for testing purposes)
+SESSION_SECRET=some-session-secret

README.md

@@ -9,22 +9,13 @@ A starter project for integrating the [TinyMCE Image Optimizer plugin](https://w
 
 ## Configuration
 
-1. Copy the `.env.example` file to `.env` and update the `UPLOADCARE_SECRET_KEY` with your Uploadcare secret key:
+Copy the `.env.example` file to `.env` and fill in the required environment variables:
 
 ```bash
-UPLOADCARE_SECRET_KEY=<your-secret-key>
-```
-
-2. Update the `uploadcare_public_key` in `index.html` with your Uploadcare public key:
-
-```js
-uploadcare_public_key: '<your-public-key>',
-```
-
-3. Replace the `your-api-key` placeholder in the TinyMCE script tag with your TinyMCE API key:
-
-```html
-<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/7/tinymce.min.js"></script>
+TINYMCE_API_KEY=your-api-key
+UPLOADCARE_PUBLIC_KEY=your-public-key
+UPLOADCARE_SECRET_KEY=your-secret-key
+SESSION_SECRET=your-session-secret
 ```
 
 ## Installation
@@ -39,8 +30,4 @@ npm install
 npm run start
 ```
 
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-## Fiddle
-
-You can also try the demo on Fiddle if you don't have access to the TinyMCE Image Optimizer plugin: [Fiddle - Image Optimizer Signed Uploads Starter Project](https://fiddle.tiny.cloud/S0RUbb1NCa/2). Just replace the `UPLOADCARE_PUBLIC_KEY` placeholder with your Uploadcare public key. Note that you still require the Express server running with your Uploadcare secret key to sign the uploads.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

index.js

@@ -1,15 +1,21 @@
+import "dotenv/config";
 import express from "express";
 import mustacheExpress from "mustache-express";
+import path from "path";
 import portfinder from "portfinder";
 import session from "express-session";
-import config from "./config.js";
-import { generateSecureSignature } from "@uploadcare/signed-uploads";
-import path from "path";
 import { fileURLToPath } from "url";
+import { generateSecureSignature } from "@uploadcare/signed-uploads";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// This is the fake database that the login authenticates against
+const users = [
+    { username: "johndoe", password: "password", fullname: "John Doe" },
+    { username: "janedoe", password: "password", fullname: "Jane Doe" },
+];
+
 const setupExpress = (port) => {
     const app = express();
 
@@ -20,7 +26,7 @@ const setupExpress = (port) => {
     app.set("trust proxy", 1);
     app.use(
         session({
-            secret: config.sessionSecret,
+            secret: process.env.SESSION_SECRET,
             resave: false,
             saveUninitialized: true,
             cookie: { secure: false },
@@ -47,8 +53,8 @@ const setupRoutes = (app) => {
     app.get("/editor", (req, res) => {
         if (req.session.user) {
             res.render("editor", {
-                apiKey: config.apiKey,
-                uploadcarePublicKey: config.uploadcarePublicKey,
+                apiKey: process.env.TINYMCE_API_KEY,
+                uploadcarePublicKey: process.env.UPLOADCARE_PUBLIC_KEY,
                 fullname: req.session.user.fullname,
             });
         } else {
@@ -62,7 +68,7 @@ const setupRoutes = (app) => {
     });
 
     app.post("/", (req, res) => {
-        const user = config.users.find(
+        const user = users.find(
             ({ username, password }) =>
                 username === req.body.username && password === req.body.password
         );
@@ -79,7 +85,7 @@ const setupRoutes = (app) => {
         if (user) {
             try {
                 const { secureSignature: signature, secureExpire: expire } =
-                    generateSecureSignature(config.uploadcareSecretKey, {
+                    generateSecureSignature(process.env.UPLOADCARE_SECRET_KEY, {
                         expire: Date.now() + 60 * 30 * 1000, // 30 minutes expiration
                     });
                 res.json({ signature, expire });

views/index.mustache

@@ -16,7 +16,7 @@
             {{/error}}
 
             <h1 class="h3 mb-3">Login</h1>
-            <p>Login with the user/passwords available in the <code>config.js</code> file</p>
+            <p>Login with the user/passwords available in the <code>index.js</code> file</p>
 
             <div class="form-group">
                 <label for="username" class="font-weight-bold">User</label>