Add proxy login support (FreeTubeApp#7996)

* add proxy support

* Update src/main/index.js

Co-authored-by: absidue <[email protected]>

---------

Co-authored-by: absidue <[email protected]>

Author: Vaipex

src/main/index.js

@@ -703,6 +703,15 @@ function runApp() {
     }
   })
 
+  app.on('login', async (event, webContents, request, authInfo, callback) => {
+    if (authInfo.isProxy) {
+      event.preventDefault()
+      const proxyUsername = (await baseHandlers.settings._findOne('proxyUsername'))?.value
+      const proxyPassword = (await baseHandlers.settings._findOne('proxyPassword'))?.value
+      callback(proxyUsername, proxyPassword)
+    }
+  })
+
   function trayClick(window, close = false) {
     if (!close) {
       if (window.id in trayMaximizedWindows) {

src/renderer/components/ProxySettings/ProxySettings.vue

@@ -53,6 +53,24 @@
           @keydown.enter.native="testProxy"
         />
       </FtFlexBox>
+      <FtFlexBox>
+        <FtInput
+          :placeholder="$t('Settings.Proxy Settings.Proxy Username')"
+          :show-action-button="false"
+          show-label
+          :value="proxyUsername"
+          @input="handleUpdateProxyUsername"
+          @keydown.enter.native="testProxy"
+        />
+        <FtInput
+          :placeholder="$t('Settings.Proxy Settings.Proxy Password')"
+          :show-action-button="false"
+          show-label
+          :value="proxyPassword"
+          @input="handleUpdateProxyPassword"
+          @keydown.enter.native="testProxy"
+        />
+      </FtFlexBox>
       <p
         class="center"
       >
@@ -151,6 +169,16 @@ const proxyPort = computed(() => {
   return store.getters.getProxyPort
 })
 
+/** @type {import('vue').ComputedRef<string>} */
+const proxyUsername = computed(() => {
+  return store.getters.getProxyUsername
+})
+
+/** @type {import('vue').ComputedRef<string>} */
+const proxyPassword = computed(() => {
+  return store.getters.getProxyPassword
+})
+
 const proxyUrl = computed(() => {
   return `${proxyProtocol.value}://${proxyHostname.value}:${proxyPort.value}`
 })
@@ -230,6 +258,28 @@ function handleUpdateProxyPort(value) {
   store.dispatch('updateProxyPort', value)
 }
 
+/**
+ * @param {string} value
+ */
+function handleUpdateProxyUsername(value) {
+  if (useProxy.value) {
+    debouncedEnableProxy()
+  }
+
+  store.dispatch('updateProxyUsername', value)
+}
+
+/**
+ * @param {string} value
+ */
+function handleUpdateProxyPassword(value) {
+  if (useProxy.value) {
+    debouncedEnableProxy()
+  }
+
+  store.dispatch('updateProxyPassword', value)
+}
+
 function enableProxy() {
   if (process.env.IS_ELECTRON) {
     window.ftElectron.enableProxy(proxyUrl.value)

src/renderer/store/modules/settings.js

@@ -230,6 +230,8 @@ const state = {
   playNextVideo: false,
   proxyHostname: '127.0.0.1',
   proxyPort: '9050',
+  proxyUsername: '',
+  proxyPassword: '',
   proxyProtocol: 'socks5',
   proxyVideos: !process.env.SUPPORTS_LOCAL_API,
   region: 'US',

static/locales/en-US.yaml

@@ -634,6 +634,8 @@ Settings:
     Proxy Protocol: Proxy Protocol
     Proxy Host: Proxy Host
     Proxy Port Number: Proxy Port Number
+    Proxy Username: Proxy Username
+    Proxy Password: Proxy Password
     Clicking on Test Proxy will send a request to: Clicking on Test Proxy will send a request to
     Test Proxy: Test Proxy
     Your Info: Your Info