diff --git a/.env.example b/.env.example index 93362ab..9756bee 100644 --- a/.env.example +++ b/.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 \ No newline at end of file + +# Replace this with your session secret (optional for testing purposes) +SESSION_SECRET=some-session-secret diff --git a/README.md b/README.md index 0e5f7cb..e73207c 100644 --- a/README.md +++ b/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= -``` - -2. Update the `uploadcare_public_key` in `index.html` with your Uploadcare public key: - -```js -uploadcare_public_key: '', -``` - -3. Replace the `your-api-key` placeholder in the TinyMCE script tag with your TinyMCE API key: - -```html - +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. \ No newline at end of file +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. \ No newline at end of file diff --git a/config.js b/config.js deleted file mode 100644 index 2a3b48a..0000000 --- a/config.js +++ /dev/null @@ -1,27 +0,0 @@ -import "dotenv/config"; - -// Replace this with your TinyMCE API key from https://www.tiny.cloud/my-account/integrate/ -const apiKey = process.env.TINYMCE_API_KEY; - -// Replace this with your Uploadcare PUBLIC key from https://app.uploadcare.com/ -const uploadcarePublicKey = process.env.UPLOADCARE_PUBLIC_KEY; - -// Replace this with your Uploadcare SECRET key from https://app.uploadcare.com/ -const uploadcareSecretKey = process.env.UPLOADCARE_SECRET_KEY; - -// Replace this with your session secret (not necessary for testing purposes) -const sessionSecret = process.env.SESSION_SECRET; - -// 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" }, -]; - -export default { - apiKey, - uploadcarePublicKey, - uploadcareSecretKey, - sessionSecret, - users, -}; diff --git a/index.js b/index.js index 1ad77ad..eacd684 100644 --- a/index.js +++ b/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 }); diff --git a/views/index.mustache b/views/index.mustache index 8f2370b..1742ca5 100644 --- a/views/index.mustache +++ b/views/index.mustache @@ -16,7 +16,7 @@ {{/error}}

Login

-

Login with the user/passwords available in the config.js file

+

Login with the user/passwords available in the index.js file