fix(Login): White screen

public/electron.js

@@ -13,6 +13,10 @@ const platformsNames = {
   darwin: platforms.MAC,
 };
 
+let proxyLogin = null;
+let proxyPassword = null;
+let authWindow = null;
+
 const currentPlatform = platformsNames[os.platform()];
 
 const config = {
@@ -182,6 +186,13 @@ if (!gotTheLock) {
     }
   });
 
+  app.on('login', (event, webContents, request, authInfo, callback) => {
+    if (authInfo.isProxy || authInfo.scheme === 'ntlm') {
+      event.preventDefault();
+      callback(proxyLogin, proxyPassword);
+    }
+  });
+
   ipcMain.on('notifier', (event, arg) => {
     const { body, title } = arg;
 
@@ -190,47 +201,57 @@ if (!gotTheLock) {
     }
   });
 
+  ipcMain.on('proxy-config', (event, arg) => {
+    proxyLogin = arg.proxyLogin;
+    proxyPassword = arg.proxyPassword;
+
+    if (authWindow) {
+      authWindow.close();
+    }
+  });
+
   ipcMain.on('azure-devops-oauth', (event, arg) => {
-    let authWindow = new BrowserWindow({
-      show: false,
-      modal: true,
-      autoHideMenuBar: true,
-      parent: window,
-      webPreferences: {
-        nodeIntegration: false,
-        contextIsolation: true,
-      },
-    });
+    if (!authWindow) {
+      authWindow = new BrowserWindow({
+        autoHideMenuBar: true,
+        parent: window,
+        webPreferences: {
+          nodeIntegration: false,
+          contextIsolation: true,
+        },
+      });
 
-    authWindow.show();
+      authWindow.show();
 
-    authWindow.webContents.loadURL(
-      `${config.authorizationUrl}?client_id=${config.clientId}&client_secret=${config.clientSecret}&response_type=code&redirect_uri=${config.redirectUri}&response_mode=query&scope=${config.scope}`,
-    );
+      authWindow.webContents.loadURL(
+        `${config.authorizationUrl}?client_id=${config.clientId}&client_secret=${config.clientSecret}&response_type=code&redirect_uri=${config.redirectUri}&response_mode=query&scope=${config.scope}`,
+      );
 
-    authWindow.on('closed', () => {
-      authWindow = null;
-    });
-    authWindow.webContents.on('will-redirect', (e, url) => {
-      const details = url;
-
-      if (details && details.startsWith(config.redirectUri)) {
-        const _url = details.split('?')[1];
-        const _params = new URLSearchParams(_url);
-        const _accessCode = _params.get('code');
-
-        if (_accessCode) {
-          event.sender.send('getToken', {
-            url: config.tokenUrl,
-            redirect_uri: config.redirectUri,
-            client_assertion: config.clientAssertion,
-            access_code: _accessCode,
-          });
-
-          authWindow.close();
+      authWindow.on('closed', () => {
+        authWindow = null;
+      });
+
+      authWindow.webContents.on('will-redirect', (e, url) => {
+        const details = url;
+
+        if (details && details.startsWith(config.redirectUri)) {
+          const _url = details.split('?')[1];
+          const _params = new URLSearchParams(_url);
+          const _accessCode = _params.get('code');
+
+          if (_accessCode) {
+            event.sender.send('getToken', {
+              url: config.tokenUrl,
+              redirect_uri: config.redirectUri,
+              client_assertion: config.clientAssertion,
+              access_code: _accessCode,
+            });
+
+            authWindow.close();
+          }
         }
-      }
-    });
+      });
+    }
   });
 
   ipcMain.on('logout', () => {

public/global.css

@@ -31,6 +31,7 @@ body {
 }
 
 body {
+  overflow: hidden;
   background-color: white;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

src/components/App/App.scss

@@ -5,3 +5,13 @@
   text-align: center;
   background-color: #ff1721;
 }
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/components/Profile/Profile.scss

@@ -309,16 +309,6 @@ input[type='radio']:checked + .skz-profile__modal-label:after {
   animation: fadeIn 0.3s;
 }
 
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
 @media (prefers-color-scheme: dark) {
   .skz-profile-name {
     color: #ccc;

src/layouts/Login/Login.scss

@@ -50,17 +50,131 @@
     }
 
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       left: 1rem;
       top: 50%;
       width: 1.5rem;
       height: 1.5rem;
-      background: url("../assets/logo-azure-devops.png") no-repeat;
+      background: url('../assets/logo-azure-devops.png') no-repeat;
       background-size: cover;
       transform: translateY(-50%);
     }
   }
+
+  &__config {
+    position: absolute;
+    bottom: -4rem;
+    left: 0;
+    right: 0;
+    transition: transform linear 0.2s;
+
+    &--open {
+      transform: translateY(-4rem);
+    }
+
+    .skz-button {
+      background-color: transparent;
+      border: 0;
+      color: #333;
+      font-size: 0.8rem;
+      font-family: sans-serif;
+      margin: 1rem;
+      text-decoration: underline;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        color: #fff;
+      }
+    }
+
+    form {
+      display: flex;
+      align-items: center;
+      padding: 1rem;
+      background-color: #fff;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: #444;
+      }
+
+      label {
+        color: #333;
+        margin-right: 0.5rem;
+        font-size: 0.8rem;
+        line-height: 1;
+
+        @media (prefers-color-scheme: dark) {
+          color: #fff;
+        }
+      }
+    }
+
+    input {
+      height: 2rem;
+      margin-right: 2rem;
+      padding: 0.5rem;
+      border: 0;
+      line-height: 1;
+      font-size: 0.8rem;
+      color: #333;
+      background-color: #eee;
+
+      @media (prefers-color-scheme: dark) {
+        color: #fff;
+        background-color: #333;
+      }
+    }
+
+    [type='submit'] {
+      color: #fff;
+      border-radius: 4px;
+      background-color: #aaa;
+      cursor: pointer;
+      transition: opacity linear 0.2s;
+
+      @media (prefers-color-scheme: dark) {
+        color: #fff;
+        background-color: #333;
+      }
+
+      &:not(:disabled):hover {
+        opacity: 0.8;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+.skz-confirmation {
+  color: #333;
+  font-size: 0.8rem;
+  animation: fadeIn 0.3s;
+
+  &:before {
+    content: '✓';
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.5rem;
+    color: #fff;
+    font-size: 1rem;
+    text-align: center;
+    line-height: 1.5rem;
+    border-radius: 50%;
+    background-color: green;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    color: #fff;
+  }
 }
 
 .input--valid {

src/layouts/Login/Login.svelte

@@ -1,5 +1,29 @@
 <script>
-const { ipcRenderer } = require('electron');
+  const { ipcRenderer } = require('electron');
+  let isFormOpen = false;
+  let proxyLogin = null;
+  let proxyPassword = null;
+  let isValidated = false;
+
+  const toggleForm = () => isFormOpen = !isFormOpen;
+  const updateLogin = event => {
+    isValidated = false;
+    proxyLogin = event.target.value;
+  };
+
+  const updatePassword = event => {
+    isValidated = false;
+    proxyPassword = event.target.value;
+  };
+
+  const configureProxy = e => {
+    e.preventDefault();
+    isValidated = true;
+    ipcRenderer.send('proxy-config', {
+      proxyLogin,
+      proxyPassword
+    })
+  };
 </script>
 
 <style src="./Login.scss"></style>
@@ -19,4 +43,18 @@ const { ipcRenderer } = require('electron');
     Skizzle vous permet de regrouper les pull requests de vos équipes. <br/>Pour commencer <b>connectez vous</b> avec votre compte.
   </p>
   <button class="skz-login__button skz-login__button--azure" on:click={() => ipcRenderer.send('azure-devops-oauth')}>Azure DevOps</button>
+
+  <div class={`skz-login__config ${isFormOpen ? 'skz-login__config--open' : ''}`}>
+    <button class="skz-button" on:click={toggleForm}>Vous utilisez un proxy ou une authentification NTLM ?</button>
+    <form on:submit={configureProxy}>
+      <label>Identifiant pour le proxy/NTLM</label>
+      <input on:input={updateLogin} type="text" />
+      <label>Mot de passe</label>
+      <input on:input={updatePassword} type="password" />
+      <input disabled={!proxyLogin || !proxyPassword} type="submit" value="Valider" />
+      {#if isValidated}
+        <p class="skz-confirmation">Proxy configuré</p>
+      {/if}
+    </form>
+  </div>
 </div>