Add 'Encrypted DNS proxy' built-in access method to GUI

4 files changed, 48 insertions, 3 deletions

diff --git a/gui/src/main/default-settings.ts b/gui/src/main/default-settings.ts
index 46355dd439..bebc5b9a4e 100644
--- a/gui/src/main/default-settings.ts
+++ b/gui/src/main/default-settings.ts
@@ -104,6 +104,12 @@ export function getDefaultApiAccessMethods(): ApiAccessMethodSettings {
       enabled: false,
       type: 'bridges',
     },
+    encryptedDnsProxy: {
+      id: '',
+      name: 'Encrypted DNS Proxy',
+      enabled: false,
+      type: 'encrypted-dns-proxy',
+    },
     custom: [],
   };
 }
diff --git a/gui/src/main/grpc-type-convertions.ts b/gui/src/main/grpc-type-convertions.ts
index 6511f10c67..37e5c7fcf5 100644
--- a/gui/src/main/grpc-type-convertions.ts
+++ b/gui/src/main/grpc-type-convertions.ts
@@ -16,6 +16,7 @@ import {
   DeviceEvent,
   DeviceState,
   DirectMethod,
+  EncryptedDnsProxy,
   EndpointObfuscationType,
   ErrorStateCause,
   ErrorStateDetails,
@@ -1097,6 +1098,11 @@ function fillApiAccessMethodSetting<T extends grpcTypes.NewAccessMethodSetting>(
       accessMethod.setBridges(bridges);
       break;
     }
+    case 'encrypted-dns-proxy': {
+      const encryptedDnsProxy = new grpcTypes.AccessMethod.EncryptedDnsProxy();
+      accessMethod.setEncryptedDnsProxy(encryptedDnsProxy);
+      break;
+    }
     default:
       accessMethod.setCustom(convertToCustomProxy(method));
   }
@@ -1160,6 +1166,12 @@ function convertFromApiAccessMethodSettings(
   const bridges = convertFromApiAccessMethodSetting(
     ensureExists(accessMethods.getMullvadBridges(), "no 'Mullvad Bridges' access method was found"),
   ) as AccessMethodSetting<BridgesMethod>;
+  const encryptedDnsProxy = convertFromApiAccessMethodSetting(
+    ensureExists(
+      accessMethods.getEncryptedDnsProxy(),
+      "no 'Encrypted DNS proxy' access method was found",
+    ),
+  ) as AccessMethodSetting<EncryptedDnsProxy>;
   const custom = accessMethods
     .getCustomList()
     .filter((setting) => setting.hasId() && setting.hasAccessMethod())
@@ -1170,6 +1182,7 @@ function convertFromApiAccessMethodSettings(
   return {
     direct,
     mullvadBridges: bridges,
+    encryptedDnsProxy,
     custom,
   };
 }
@@ -1177,7 +1190,11 @@ function convertFromApiAccessMethodSettings(
 function isCustomProxy(
   accessMethod: AccessMethodSetting,
 ): accessMethod is AccessMethodSetting<CustomProxy> {
-  return accessMethod.type !== 'direct' && accessMethod.type !== 'bridges';
+  return (
+    accessMethod.type !== 'direct' &&
+    accessMethod.type !== 'bridges' &&
+    accessMethod.type !== 'encrypted-dns-proxy'
+  );
 }
 
 export function convertFromApiAccessMethodSetting(
@@ -1200,6 +1217,8 @@ function convertFromAccessMethod(method: grpcTypes.AccessMethod): AccessMethod {
       return { type: 'direct' };
     case grpcTypes.AccessMethod.AccessMethodCase.BRIDGES:
       return { type: 'bridges' };
+    case grpcTypes.AccessMethod.AccessMethodCase.ENCRYPTED_DNS_PROXY:
+      return { type: 'encrypted-dns-proxy' };
     case grpcTypes.AccessMethod.AccessMethodCase.CUSTOM: {
       return convertFromCustomProxy(method.getCustom()!);
     }
diff --git a/gui/src/renderer/components/ApiAccessMethods.tsx b/gui/src/renderer/components/ApiAccessMethods.tsx
index 57668df787..8b88e97edc 100644
--- a/gui/src/renderer/components/ApiAccessMethods.tsx
+++ b/gui/src/renderer/components/ApiAccessMethods.tsx
@@ -133,6 +133,10 @@ export default function ApiAccessMethods() {
                       method={methods.mullvadBridges}
                       inUse={methods.mullvadBridges.id === currentMethod?.id}
                     />
+                    <ApiAccessMethod
+                      method={methods.encryptedDnsProxy}
+                      inUse={methods.encryptedDnsProxy.id === currentMethod?.id}
+                    />
                     {methods.custom.map((method) => (
                       <ApiAccessMethod
                         key={method.id}
@@ -211,7 +215,7 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
       },
     ];
 
-    // Edit and Delete shouldn't be available for direct and bridges.
+    // Edit and Delete shouldn't be available for direct, bridges or encrypted DNS proxy.
     if (props.custom) {
       items.push(
         { type: 'separator' as const },
@@ -290,6 +294,20 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
           ]}
         />
       )}
+      {props.method.type === 'encrypted-dns-proxy' && (
+        <StyledMethodInfoButton
+          message={[
+            messages.pgettext(
+              'api-access-methods-view',
+              'With the “Encrypted DNS proxy” method, the app will communicate with our Mullvad API through a proxy address. It does this by retrieving an address from a DNS over HTTPS (DoH) server and then using that to reach our API servers.',
+            ),
+            messages.pgettext(
+              'api-access-methods-view',
+              'If you are not connected to our VPN, then the Encrypted DNS proxy will use your own non-VPN IP when connecting. The DoH servers are hosted by one of the following providers: Quad 9, CloudFlare, or Google.',
+            ),
+          ]}
+        />
+      )}
       <ContextMenuContainer>
         <ContextMenuTrigger>
           <StyledContextMenuButton
diff --git a/gui/src/shared/daemon-rpc-types.ts b/gui/src/shared/daemon-rpc-types.ts
index bd8f99711b..1522d43b39 100644
--- a/gui/src/shared/daemon-rpc-types.ts
+++ b/gui/src/shared/daemon-rpc-types.ts
@@ -524,7 +524,8 @@ export type NamedCustomProxy = CustomProxy & { name: string };
 
 export type DirectMethod = { type: 'direct' };
 export type BridgesMethod = { type: 'bridges' };
-export type AccessMethod = DirectMethod | BridgesMethod | CustomProxy;
+export type EncryptedDnsProxy = { type: 'encrypted-dns-proxy' };
+export type AccessMethod = DirectMethod | BridgesMethod | EncryptedDnsProxy | CustomProxy;
 
 export type NamedAccessMethod<T extends AccessMethod> = T & { name: string };
 
@@ -540,6 +541,7 @@ export type AccessMethodSetting<T extends AccessMethod = AccessMethod> =
 export type ApiAccessMethodSettings = {
   direct: AccessMethodSetting<DirectMethod>;
   mullvadBridges: AccessMethodSetting<BridgesMethod>;
+  encryptedDnsProxy: AccessMethodSetting<EncryptedDnsProxy>;
   custom: Array<AccessMethodSetting<CustomProxy>>;
 };