From 6302d0b2cd6b646900568192eb8f90751e275c8f Mon Sep 17 00:00:00 2001
From: Marcel van Remmerden <mvanremmerden@gitlab.com>
Date: Tue, 15 Feb 2022 17:44:15 +0100
Subject: [PATCH] Complete restyling of file selector

---
 login.html   | 12 +++++++----
 myApp.js     | 53 +++++++++++++++++++++++------------------------
 src/icons.js |  1 -
 style.css    | 58 ++++++++++++++++++++++++++++++++++++++++++++++++----
 4 files changed, 88 insertions(+), 36 deletions(-)

diff --git a/login.html b/login.html
index 14f150e..55e69c1 100644
--- a/login.html
+++ b/login.html
@@ -216,13 +216,17 @@
                     placeholder="z.B. https://gitlab.mydomain.com"
                   />
                 </div>
-                <div id="custom-cert-path" class="instance-details-input">
-                  <label>Custom Certificate <small>optional</small></label>
+                <input type="checkbox" id="certificate-checkbox" name="certificate-checkbox" />
+                <label for="certificate-checkbox">I need to use a custom certificate.</label>
+                <div id="certificate-details">
                   <button onclick="chooseCertificate()" id="custom-cert-path-button">
-                    Choose certificate file
+                    Choose file
+                  </button>
+                  <button class="hidden" onclick="resetCertificate()" id="custom-cert-path-reset">
+                    <!--<svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 3V1.5h4.5V3h-4.5Zm-1.5 0V1a1 1 0 0 1 1-1h5.5a1 1 0 0 1 1 1v2h2.5a.75.75 0 0 1 0 1.5h-.365l-.743 9.653A2 2 0 0 1 11.148 16H4.852a2 2 0 0 1-1.994-1.847L2.115 4.5H1.75a.75.75 0 0 1 0-1.5h2.5Zm-.63 1.5h8.76l-.734 9.538a.5.5 0 0 1-.498.462H4.852a.5.5 0 0 1-.498-.462L3.62 4.5Z"/></svg>-->
+                    Change file
                   </button>
                   <span class="hidden" id="custom-cert-path-text"></span>
-                  <button class="hidden" onclick="resetCertificate()" id="custom-cert-path-reset">Reset</button>
                 </div>
                 <button
                   type="submit"
diff --git a/myApp.js b/myApp.js
index 312a79d..0c63680 100644
--- a/myApp.js
+++ b/myApp.js
@@ -662,41 +662,17 @@ ipcMain.on('change-show-dock-icon', (event, arg) => {
 });
 
 ipcMain.on('choose-certificate', () => {
-  mb.window.setAlwaysOnTop(true);
-  const filepaths = dialog.showOpenDialogSync();
-  setTimeout(() => {
-    mb.window.setAlwaysOnTop(false);
-  }, 200);
-  if (filepaths) {
-    const filepath = filepaths[0].replace(/\\/g, '/'); // convert \ to / otherwise separators get lost on windows
-    mb.window.webContents.executeJavaScript(
-      'document.getElementById("custom-cert-path-button").classList.add("hidden")',
-    );
-    mb.window.webContents.executeJavaScript(
-      `document.getElementById("custom-cert-path-text").innerText="${filepath}"`,
-    );
-    mb.window.webContents.executeJavaScript(
-      'document.getElementById("custom-cert-path-text").classList.remove("hidden")',
-    );
-    mb.window.webContents.executeJavaScript(
-      'document.getElementById("custom-cert-path-reset").classList.remove("hidden")',
-    );
-  }
+  chooseCertificate();
 });
 
 ipcMain.on('reset-certificate', () => {
-  mb.window.webContents.executeJavaScript(
-    'document.getElementById("custom-cert-path-button").classList.remove("hidden")',
-  );
   mb.window.webContents.executeJavaScript(
     'document.getElementById("custom-cert-path-text").innerText=""',
   );
   mb.window.webContents.executeJavaScript(
     'document.getElementById("custom-cert-path-text").classList.add("hidden")',
   );
-  mb.window.webContents.executeJavaScript(
-    'document.getElementById("custom-cert-path-reset").classList.add("hidden")',
-  );
+  chooseCertificate();
 });
 
 ipcMain.on('start-login', () => {
@@ -769,7 +745,7 @@ if (store.access_token && store.user_id && store.username) {
   });
 } else {
   mb.on('after-create-window', () => {
-    // mb.window.webContents.openDevTools()
+    mb.window.webContents.openDevTools();
     mb.window.loadURL(`file://${__dirname}/login.html`).then(() => {
       changeTheme(store.theme, false);
       mb.showWindow();
@@ -837,6 +813,29 @@ function setupCommandPalette() {
   });
 }
 
+function chooseCertificate() {
+  mb.window.setAlwaysOnTop(true);
+  const filepaths = dialog.showOpenDialogSync();
+  setTimeout(() => {
+    mb.window.setAlwaysOnTop(false);
+  }, 200);
+  if (filepaths) {
+    const filepath = filepaths[0].replace(/\\/g, '/'); // convert \ to / otherwise separators get lost on windows
+    mb.window.webContents.executeJavaScript(
+      'document.getElementById("custom-cert-path-button").classList.add("hidden")',
+    );
+    mb.window.webContents.executeJavaScript(
+      `document.getElementById("custom-cert-path-text").innerText="${filepath}"`,
+    );
+    mb.window.webContents.executeJavaScript(
+      'document.getElementById("custom-cert-path-text").classList.remove("hidden")',
+    );
+    mb.window.webContents.executeJavaScript(
+      'document.getElementById("custom-cert-path-reset").classList.remove("hidden")',
+    );
+  }
+}
+
 function openSettingsPage() {
   // eslint-disable-next-line no-underscore-dangle
   if (!mb._isVisible) {
diff --git a/src/icons.js b/src/icons.js
index f43aa03..e16b2da 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -15,7 +15,6 @@ module.exports = {
     '<svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m9.5 14.5-6-2.5V4l6-2.5v13Zm-6.885-1.244A1 1 0 0 1 2 12.333V3.667a1 1 0 0 1 .615-.923L8.923.115A1.5 1.5 0 0 1 11 1.5V2h1.25c.966 0 1.75.783 1.75 1.75v8.5A1.75 1.75 0 0 1 12.25 14H11v.5a1.5 1.5 0 0 1-2.077 1.385l-6.308-2.629ZM11 12.5h1.25a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H11v9Z"/></svg>',
   removeIcon:
     '<svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 3V1.5h4.5V3h-4.5Zm-1.5 0V1a1 1 0 0 1 1-1h5.5a1 1 0 0 1 1 1v2h2.5a.75.75 0 0 1 0 1.5h-.365l-.743 9.653A2 2 0 0 1 11.148 16H4.852a2 2 0 0 1-1.994-1.847L2.115 4.5H1.75a.75.75 0 0 1 0-1.5h2.5Zm-.63 1.5h8.76l-.734 9.538a.5.5 0 0 1-.498.462H4.852a.5.5 0 0 1-.498-.462L3.62 4.5Z"/></svg>',
-
   todosAllDoneIllustration:
     '<svg width="150" height="110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293 216"><g fill="none" fill-rule="evenodd"><g transform="rotate(-5 211.388 -693.89)"><rect width="163.6" height="200" x=".2" stroke="#BBB" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 9" rx="6"/><g transform="translate(24 38)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(24 83)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(24 130)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g></g><path fill="#FFCE29" d="M30 11l-1.8 4-2-4-4-1.8 4-2 2-4 2 4 4 2M286 60l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8M263 97l-2 4-2-4-4-2 4-2 2-4 2 4 4 2M12 85l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8"/></g></svg>',
 };
diff --git a/style.css b/style.css
index 7336cf7..b6ff793 100644
--- a/style.css
+++ b/style.css
@@ -71,10 +71,18 @@ input,
   cursor: pointer;
   margin-bottom: 0.5rem;
 }
-#login-page #instance-checkbox {
+#login-page #login-gitlab-button {
+  margin-bottom: 1rem;
+}
+#login-page #login-instance-button {
+  margin-top: 1rem;
+}
+#login-page #instance-checkbox,
+#login-page #certificate-checkbox {
   margin-left: 0;
 }
-#login-page #instance-checkbox ~ #instance-details {
+#login-page #instance-checkbox ~ #instance-details,
+#login-page #certificate-checkbox ~ #certificate-details {
   display: none;
   margin-top: 0.5rem;
 }
@@ -90,13 +98,55 @@ input,
   box-sizing: border-box;
   outline: none;
 }
-#login-page #instance-checkbox ~ #instance-details .instance-details-input label {
+#login-page #instance-checkbox ~ #instance-details .instance-details-input label,
+#login-page #certificate-checkbox ~ #certificate-details label {
   font-weight: bold;
 }
-#login-page #instance-checkbox:checked ~ #instance-details {
+#login-page #instance-checkbox:checked ~ #instance-details,
+#login-page #certificate-checkbox:checked ~ #certificate-details {
   display: flex;
   flex-direction: column;
 }
+#login-page #certificate-checkbox:checked ~ #certificate-details {
+  margin-bottom: 0.5rem;
+  flex-direction: row;
+  align-items: center;
+}
+#login-page #certificate-checkbox:checked ~ #login-instance-button {
+  margin-top: 0.5rem;
+}
+#login-page #certificate-checkbox:checked ~ #certificate-details #custom-cert-path-button,
+#login-page
+  #certificate-checkbox:checked
+  ~ #certificate-details
+  #custom-cert-path-reset:not(.hidden) {
+  min-width: fit-content;
+  border: 1px solid var(--hover-color);
+  font-size: 0.875rem;
+  padding: 0.5rem;
+  background-color: var(--lighter-background-color);
+  border-radius: 0.375rem;
+  color: var(--text-color);
+  box-sizing: border-box;
+  outline: none;
+  cursor: pointer;
+}
+#login-page
+  #certificate-checkbox:checked
+  ~ #certificate-details
+  #custom-cert-path-text:not(.hidden) {
+  width: 100%;
+  padding: 7px;
+  cursor: not-allowed;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#login-page #certificate-checkbox:checked ~ #certificate-details #custom-cert-path-reset svg {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
 #login-page #instance-checkbox:checked ~ #instance-details .instance-details-input {
   display: flex;
   flex-direction: column;