DEV Community

shinuvs
shinuvs

Posted on

How to create menu after login screen in electron js.

I am trying to develop a desktop application with electron js. I have created the login screen but the main issue is, I only required menu after the login success screen that means in the home screen only. I want to load the home screen in the same window of the login window without creating a new window.

First issue

I succeeded to implement this with remote.getcurrentwindo but the home screen loading only after second click of the login button.

Second issue

Login screen form submission calling a javascript function and in the form action I used to navigate to the home HTML else it will not show the home page. If I need to show the custom menu in home screen then I have create a new WindowObject in that case home screen loading 2 windows one is my HTML and another window is this newly-created window. What is the best option to fix these 2? Please help.

app.js code sample

const electron = require('electron')
'use strict';
const { app, BrowserWindow, screen, remote, Menu } = require('electron')
// require('electron-reload')(__dirname);
//const { BrowserWindow } = require('electron').remote
const { ipcMain } = require("electron");
const { ipcRenderer } = require("electron");

ipcMain.on("changeWindow", function(event, arg) {
const win = new BrowserWindow({
width: screen.width,
height: screen.height,
webPreferences: {
nodeIntegration: true
}
})
switch (arg) {
case "login":
win.loadURL(file://${__dirname}/index.html);
break;
case "home":
remote.getCurrentWindow().loadURL(file://${__dirname}/modules/home/home.html);
break;
case "page3":
win.loadURL("Page3 URL");
break;
}
});

function createWindow() {
//Create the browser window.
const win = new BrowserWindow({
width: screen.width,
height: screen.height,
webPreferences: {
nodeIntegration: true
}
})

win.removeMenu()

// Menu.setApplicationMenu(null);
// and load the index.html of the app
// win.loadFile('index.html')
win.loadURL(file://${__dirname}/index.html);

//Open the DevTools.
win.webContents.openDevTools()

}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
ipcRenderer.send("changeWindow", "login");
}
})

function submitLogin() {
ipcRenderer.send("changeWindow", "home");
// remote.getCurrentWindow().loadURL(file://${__dirname}/modules/home/home.html);
}

index.html

<!DOCTYPE html>



Test
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->







Welcome




<!-- Login form html-->











<!-- ends here-->
</div>

Top comments (0)