Moved IG credentials to .env file + Updates Readme

.env.sample

@@ -0,0 +1,2 @@
+IG_USERNAME=username
+IG_PASSWORD=password

.gitignore

@@ -1 +1,3 @@
-node_modules
+node_modules
+
+.env

README.md

@@ -1,39 +1,57 @@
 # Cliptale 📎
 
-Automate your Instagram stories clipping.
+Automate your Instagram stories clipping using Puppeteer.
 
 ## Set up
 
+Open your terminal and run the following commands:
+
 ```bash
+# Get repository
 git clone [email protected]:rodgracas/cliptale.git
+
+# Enter project directory
 cd cliptale
 ```
 
-- Edit the following lines of code in [clipping.js](src/clipping.js).
+### Instagram credentials
 
-```js
-const loginCredentials = {
-    username: "yourInstagramAccountEmail",
-    password: "yourInstagramAccountPassword",
-};
+```bash
+# Create a `.env` file in project root.
+cp .env.sample .env
 ```
 
+- Edit `IG_USERNAME` and `IG_PASSWORD` environment variables with the Instagram account used to authenticate.
+
 > **Note**: The Instagram account used should not have 2FA enabled.
 
+### Instagram profile users
+
 - Edit `users.json` file in `data/` folder
 
 > **Note**: Users profiles must be available from the Instagram account used to login.
 
-
 ## Install
 
-```
+```bash
+# Install dependencies
 npm install
 ```
 
 ## Run
 
-```
+```bash
+# Run cliptale
 npm start
 ```
 
+> **Note**: By default `cliptale` runs in headless mode. To run in headfull mode, set `DEBUG` variable to `true` on `clipping.js` file.
+
+
+## Next steps
+
+- [x] Run in headless mode
+- [ ] Add prettier/eslint
+- [ ] Write tests
+- [ ] Typescript support
+- [ ] Create web application

package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "atob": "2.1.2",
+    "dotenv": "10.0.0",
     "fs-extra": "9.0.1",
     "puppeteer": "9.1.1"
   }

src/clipping.js

@@ -1,7 +1,7 @@
 const puppeteer = require("puppeteer");
 const { ensureDir } = require("fs-extra");
 const { getFormattedDate } = require("./utils");
-
+const { IG_USERNAME, IG_PASSWORD } = require('./config');
 const users = require("../data/users.json");
 
 const INSTAGRAM_URL = "https://www.instagram.com";
@@ -16,11 +16,6 @@ const selectors = {
     userAvatar: '[data-testid="user-avatar"]'
 };
 
-const loginCredentials = {
-    username: "username",
-    password: "password",
-};
-
 const DEBUG = false;
 
 const closeCookiesDialog = async (page) => {
@@ -39,13 +34,14 @@ const login = async (page) => {
     console.log("Typing username...");
     const username = await page.$(selectors.username);
     await username.focus();
-    await username.type(loginCredentials.username);
+
+    await username.type(IG_USERNAME);
 
     // Enter password
     console.log("Typing password...");
     const password = await page.$(selectors.password);
     await password.focus();
-    await password.type(loginCredentials.password);
+    await password.type(IG_PASSWORD);
 
     // Click submit button
     console.log("Submit login...");
@@ -63,7 +59,6 @@ const login = async (page) => {
         await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36');
     }
 
-    await page.setViewport({ width: 1366, height: 768 });
     await page.goto(INSTAGRAM_URL);
 
     await closeCookiesDialog(page);

src/config.js

@@ -0,0 +1,29 @@
+require('dotenv').config();
+
+const showErrorMessage = (message) => console.error(`\x1B[31m✘ ${message}`);
+
+/**
+ * Returns true if environment variables are set, false otherwise.
+ * 
+ * @returns {Boolean}
+ */
+function isConfigValid() {
+    if (!process.env.IG_USERNAME) {
+        showErrorMessage("Invalid configuration: Set IG_USERNAME on .env file");
+        process.exit(1);
+    }
+
+    if (!process.env.IG_PASSWORD) {
+        showErrorMessage("Invalid configuration: Set IG_PASSWORD on .env file");
+        process.exit(1);
+    }
+
+    return true;
+}
+
+isConfigValid();
+
+module.exports = {
+  IG_USERNAME: process.env.IG_USERNAME,
+  IG_PASSWORD: process.env.IG_PASSWORD
+};