fix: add logout button to welcome screen

- allows to re-auth in case Network Error persists Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Dec 30, 2024 · d3dd403 · d3dd403
1 parent 445c56a
commit d3dd403
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/main.js b/src/main.js
@@ -313,7 +313,7 @@ app.whenReady().then(async () => {
 	})
 
 	ipcMain.handle('authentication:logout', async (event) => {
-		if (createMainWindow === createTalkWindow) {
+		if (createMainWindow === createTalkWindow || createMainWindow === createWelcomeWindow) {
 			await mainWindow.webContents.session.clearStorageData()
 			const authenticationWindow = createAuthenticationWindow()
 			createMainWindow = createAuthenticationWindow

diff --git a/src/welcome/welcome.html b/src/welcome/welcome.html
@@ -28,17 +28,36 @@
 		display: none;
 	}
 
-	.quit {
+	.button {
 		-webkit-app-region: no-drag;
-		position: fixed;
-		inset-block-start: 4px;
-		inset-inline-end: 4px;
 		width: 44px;
 		height: 44px;
 		border: none;
-		background: transparent var(--original-icon-close-white) no-repeat center;
+		border-radius: 8px;
+		background-color: transparent;
+		background-repeat: no-repeat;
+		background-position: center;
 		background-size: 20px;
 		cursor: pointer;
+		transition: background-color 0.3s;
+	}
+
+	.button:hover {
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.quit {
+		position: fixed;
+		inset-block-start: 4px;
+		inset-inline-end: 4px;
+		background-image: var(--original-icon-close-white);
+	}
+
+	.logout {
+		position: fixed;
+		inset-block-start: 4px;
+		inset-inline-end: calc(4px + 4px + 44px);
+		background-image: var(--original-icon-logout-white);
 	}
 
 	.quit_mac {
@@ -123,7 +142,8 @@
 	<title>Nextcloud Talk</title>
 </head>
 <body>
-	<button class="quit hidden" aria-label="Quit" type="button"></button>
+	<button class="button logout hidden" aria-label="Log out" title="Log out" type="button"></button>
+	<button class="button quit hidden" aria-label="Quit" title="Quit" type="button"></button>
 	<div class="wrapper">
 		<div class="spacer"></div>
 		<div class="logo"></div>

diff --git a/src/welcome/welcome.js b/src/welcome/welcome.js
@@ -13,6 +13,9 @@ import { applyAxiosInterceptors } from '../shared/setupWebPage.js'
 const quitButton = document.querySelector('.quit')
 quitButton.addEventListener('click', () => window.TALK_DESKTOP.quit())
 
+const logoutButton = document.querySelector('.logout')
+logoutButton.addEventListener('click', () => window.TALK_DESKTOP.logout())
+
 window.TALK_DESKTOP.getSystemInfo().then(os => {
 	quitButton.classList.remove('hidden')
 	if (os.isMac) {
@@ -26,6 +29,7 @@ initGlobals()
 applyAxiosInterceptors()
 
 if (appData.credentials) {
+	logoutButton.classList.remove('hidden')
 	await window.TALK_DESKTOP.enableWebRequestInterceptor(appData.serverUrl, { enableCors: true, enableCookies: true, credentials: appData.credentials })
 	await refetchAppDataIfDirty(appData)
 }