Dialog styles

app/settings/src/css/index.css

@@ -1,8 +1,3 @@
-body {
-	overflow: hidden;
-	display: block;
-}
-
 .tabcontent {
 	animation: fadeEffect 1s;
 }

app/settings/src/js/index.js

@@ -2,6 +2,7 @@ const { shell, app, dialog, BrowserWindow } = require("@electron/remote")
 const { convert, localization, time } = require("@levminer/lib")
 const logger = require("@levminer/lib/logger/renderer")
 const { ipcRenderer: ipc } = require("electron")
+const bcrypt = require("bcryptjs")
 const path = require("path")
 const fs = require("fs")
 const { createBackupFile, loadBackupFile, changePassword } = require(path.join(__dirname, "src", "js", "security.js"))
@@ -757,7 +758,10 @@ const removeButtonStyles = () => {
 }
 
 // control menu
+
 const menu = (name) => {
+	storage = dev ? JSON.parse(localStorage.getItem("dev_storage")) : JSON.parse(localStorage.getItem("storage"))
+
 	let i
 
 	if (name === "shortcuts") {
@@ -966,3 +970,50 @@ const screenCapture = () => {
 const experimentalDocs = () => {
 	shell.openExternal("https://docs.authme.levminer.com/#/settings?id=experimental-features")
 }
+
+/**
+ * Show password
+ */
+let password_shown = false
+
+const showPassword = (id) => {
+	if (password_shown === false) {
+		document.querySelector(`#password_input${id}`).setAttribute("type", "text")
+
+		document.querySelector(`#show_pass_${id}`).style.display = "none"
+		document.querySelector(`#show_pass_${id}1`).style.display = "flex"
+
+		password_shown = true
+	} else {
+		document.querySelector(`#password_input${id}`).setAttribute("type", "password")
+
+		document.querySelector(`#show_pass_${id}`).style.display = "flex"
+		document.querySelector(`#show_pass_${id}1`).style.display = "none"
+
+		password_shown = false
+	}
+}
+
+/* Show/hide load backup file dialog */
+const loadBackupFileDialog = () => {
+	const dialog = document.querySelector(".dialog1")
+	const close_dialog = document.querySelector(".dialog1Close")
+
+	close_dialog.addEventListener("click", () => {
+		dialog.close()
+	})
+
+	dialog.showModal()
+}
+
+/* Show/hide change password dialog */
+const changePasswordDialog = () => {
+	const dialog = document.querySelector(".dialog0")
+	const close_dialog = document.querySelector(".dialog0Close")
+
+	close_dialog.addEventListener("click", () => {
+		dialog.close()
+	})
+
+	dialog.showModal()
+}

styles/partials/components/components.scss

@@ -44,6 +44,26 @@
 	stroke: white;
 }
 
+.input:hover ~ #show_pass_2 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
+.input:hover ~ #show_pass_21 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
+.input:hover ~ #show_pass_3 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
+.input:hover ~ #show_pass_31 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
 /* button */
 .buttoni > svg {
 	position: relative;
@@ -64,3 +84,25 @@
 	background-color: rgb(30, 30, 30) !important;
 	border-color: rgb(30, 30, 30) !important;
 }
+
+/* dialog */
+.dialog {
+	text-align: center;
+	background-color: #191919 !important;
+	color: white;
+	padding: 3rem;
+	border-radius: 15px;
+	margin: auto;
+
+	& > * {
+		margin: 0 0 0.5rem 0;
+	}
+}
+
+.dialog::backdrop {
+	background: rgb(0 0 0 / 0.9);
+}
+
+dialog[open] {
+	animation: fadeEffect 0.5s;
+}