add crendentials manager with save and exit

Signed-off-by: Johnny On <[email protected]>
opensearch-project · May 16, 2022 · d3dd86e · d3dd86e
1 parent 11ce0ab
commit d3dd86e
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 38 deletions.
diff --git a/screenshots/Screen Shot 2022-05-04 at 1.14.31 PM.png b/screenshots/Screen Shot 2022-05-04 at 1.14.31 PM.png
diff --git a/screenshots/Screen Shot 2022-05-04 at 1.14.50 PM.png b/screenshots/Screen Shot 2022-05-04 at 1.14.50 PM.png
diff --git a/src/config.js b/src/config.js
@@ -0,0 +1,21 @@
+const path = require('path');
+const fs = require("fs");
+const CONFIG_PATH = path.join(__dirname, "config.json");
+
+function getConfig(name, configPath=CONFIG_PATH) {
+    let config = fs.readFileSync(configPath);
+    config = JSON.parse(config.toString());
+    return config[name] || {};
+}
+
+function setConfig(config, callback, configPath=CONFIG_PATH) {
+    console.log('config', config)
+    let oldConfig = fs.readFileSync(configPath);
+    oldConfig = JSON.parse(oldConfig.toString());
+    oldConfig[config.NAME] = config;
+    fs.writeFile(configPath, JSON.stringify(oldConfig), callback);
+}
+
+
+exports.getConfig = getConfig;
+exports.setConfig = setConfig;
diff --git a/src/configManager.html b/src/configManager.html
@@ -26,13 +26,10 @@
 <body>
 
 <div class="jumbotron" style="text-align: center;padding: 30px">
-  <h1>OpenSearch Dashboards Electron</h1>
+  <h1>Credentials Manager</h1>
 </div>
 
 <div style="width:80%; margin-left:10%; margin-top: 30px; margin-bottom: 0">
-  <div style="margin-bottom: 0" id="info" class="alert alert-info" role="alert">
-    <strong>Welcome!</strong> Let's get you connected to OpenSearch Dashboards.
-  </div>
   <div id="error" class="alert alert-danger hidden">
     <strong>Error!</strong> <span id="error-message"/>
   </div>
@@ -42,6 +39,9 @@ <h1>OpenSearch Dashboards Electron</h1>
   <div style="margin:0">
     <form  style="margin:0">
       <div class="form-group">
+        <label for="name">NAME</label>
+        <input type="text" id="name" class="form-control">
+        </input>
         <label for="accessKey">AWS ACCESS KEY ID</label>
         <input type="text" id="awsAccessKeyId" class="form-control">
         </input>
@@ -62,7 +62,7 @@ <h1>OpenSearch Dashboards Electron</h1>
   <div style="width:80%; margin-left:10%; margin-top: 30px">
     <div>
       <div style="text-align: center">
-        <a id="submit" class="btn btn-primary btn-lg" href="#">Launch</a>
+        <a id="submit" class="btn btn-primary btn-lg" href="#">SAVE</a>
       </div>
     </div>
   </div>

diff --git a/src/configPreload.js b/src/configPreload.js
@@ -0,0 +1,16 @@
+const { contextBridge } = require('electron');
+const { ipcRenderer } = require("electron");
+const configLibrary = require('./config');
+
+contextBridge.exposeInMainWorld(
+    'electron',
+    {   
+        ipcRenderer: ipcRenderer,
+        onName: (fn) => {
+            ipcRenderer.on("name", (event, ...args) => fn(...args));
+        },
+        getConfig: (name) => config.getConfig(name),
+        setConfig: (config, callback) => configLibrary.setConfig(config, callback),
+
+    }
+)
diff --git a/src/configRenderer.js b/src/configRenderer.js
@@ -0,0 +1,53 @@
+function init() {
+    addListeners();
+}
+
+// store name variable if exists
+window.electron.onName(function (event, name) {
+    let config = window.electron.getConfig(name);
+    populateFields(config);
+});
+
+function getMapping() {
+    return [{id: "name", key: "NAME"},
+            {id: "awsAccessKeyId", key: "AWS_ACCESS_KEY_ID"},
+            {id: "awsSecretAccessKey", key: "AWS_SECRET_ACCESS_KEY"},
+            {id: "endpoint", key: "ENDPOINT"},
+            {id: "osdPath", key: "OSD_PATH"}
+    ]
+}
+async function populateFields(config) {
+    let mapping = getMapping();
+    for (map of mapping) {
+        let input = document.getElementById(map.id);
+        input.setAttribute("value", config[map.key]);
+    }
+}
+
+function getNewConfig() {
+    let mapping = getMapping();
+    let config = {};
+    mapping.forEach(function(map) {
+        let input = document.getElementById(map.id); 
+        config[map.key] = input.value;
+    })
+    return config;
+}
+
+function addListeners() {
+    let submit = document.getElementById("submit");
+    submit.addEventListener("click", async (event) => {
+        event.preventDefault();
+        console.log('click');
+        let newConfig = getNewConfig();
+        console.log('newConfig', newConfig);
+        window.electron.setConfig(newConfig, closeWindow);
+    })
+}
+
+function closeWindow() {
+    window.electron.ipcRenderer.invoke("closeWindow");
+}
+
+init();
+
diff --git a/src/dashboards.js b/src/dashboards.js
@@ -9,22 +9,6 @@ const http = require('http');
 
 const superagent = require('superagent');
 
-
-const CONFIG_PATH = path.join(__dirname, "config.json");
-
-
-function getConfig(configPath=CONFIG_PATH) {
-    let config = fs.readFileSync(configPath);
-    config = JSON.parse(config.toString());
-    return config;
-}
-
-function setConfig(key, value, callback, configPath=CONFIG_PATH) {
-    let config = getConfig(configPath);
-    config[key] = value;
-    fs.writeFile(configPath, JSON.stringify(config), callback);
-}
-
 async function getOSDStatus() {
     let statuses = {};
     try {
@@ -105,7 +89,6 @@ async function startOSD() {
 }
 
 exports.startProxy = startProxy;
-exports.getConfig = getConfig;
-exports.setConfig = setConfig;
+
 exports.startOSD = startOSD;
 exports.getOSDStatus = getOSDStatus;
diff --git a/src/main.js b/src/main.js
@@ -14,10 +14,22 @@ function createWindow() {
       win.webContents.openDevTools();
 }
 
+function createConfigWindow() {
+    const win = new BrowserWindow({
+        width: 1600,
+        height: 1200,
+        webPreferences: {
+          preload: path.join(__dirname, 'configPreload.js')
+        }
+      })
+
+      win.loadFile("./src/configManager.html");
+      win.webContents.openDevTools();
+}
+
 async function viewOSD() {
     app.whenReady().then(() => {
         createWindow();
-
         app.on('activate', () => {
             if (BrowserWindow.getAllWindows().length === 0) createWindow()
         })
@@ -34,5 +46,16 @@ ipcMain.handle('swapURL', async (event, arg) => {
     win.loadURL(arg);
 })
 
+ipcMain.handle('openConfig', async (event, name) => {
+    let configWindow = createConfigWindow();
+    configWindow.webContents.send('name', name);
+
+})
+
+ipcMain.handle('closeWindow', async (event, arg) => {
+    let win = BrowserWindow.getFocusedWindow();
+    win.close();
+})
+
 
 viewOSD();
diff --git a/src/renderer.js b/src/renderer.js
@@ -6,10 +6,8 @@ function getMapping() {
     ]
 }
 function init() {
-    window.config = {};
-    window.config = window.electron.getConfig();
     addListeners();
-    populateFields();
+    //populateFields();
 }
 
 async function populateFields() {
@@ -23,19 +21,15 @@ async function populateFields() {
 
 function addListeners() {
     let listeners = getMapping();
-    listeners.forEach(function(listener) {
-        let input = document.getElementById(listener.id);
-        input.addEventListener('blur', (event) => {
-
-            if (window.config[listener.key] != input.value) {
-                window.config[listener.key] = input.value
-                //add in success for save file config
-                window.electron.setConfig(listener.key, input.value, ()=>{});
-            }
-        })
+    let addConfig = document.getElementById("addConfig");
+    addConfig.addEventListener("click", async (event) => {
+        event.preventDefault();
+        window.electron.ipcRenderer.invoke("openConfig");
+
     })
-    
+
     let submit = document.getElementById("submit");
+
     submit.addEventListener("click", async (event) => {
         event.preventDefault();
         console.log(event);