Update mozilla-vpn extension

extensions/mozilla-vpn/CHANGELOG.md

@@ -1,3 +1,3 @@
-# Mozilla VPN Connect Changelog
+# Moz VPN Changelog
 
-## [Initial Version] - 2024-04-26
+## [Initial Version] - {PR_MERGE_DATE}

extensions/mozilla-vpn/README.md

@@ -9,10 +9,9 @@ _Interact with the Mozilla VPN client from Raycast without even opening the Mozi
 - It connects using the Mozilla VPN client to the Mozilla VPN service.
 - It displays the current server the Mozilla VPN client is configured for.
 - It fetches the current external IP and geolocates the IP's Country and city. It then refreshes when it connects to the VPN.
+- It allows you to change the server from the UI. You select a Country and city if available and if there are multiple VPN servers, it will randomly choose one to connect to.
 
-### What it doesn't do (yet).
 
-- Unfortunately, the command to select a server does not work. You can list the servers and pick one, but it seems the CLI command for the application is broken. I would love to figure out how to configure the configuration file or interact with the client to enable this feature. **PRs are definitely welcome!**
 
 ### Requirements
 
@@ -27,6 +26,12 @@ Client Disconnect `/Applications/Mozilla\ VPN.app/Contents/MacOS/Mozilla\ VPN de
 
 Status `/Applications/Mozilla\ VPN.app/Contents/MacOS/Mozilla\ VPN status`
 
+List all the servers `/Applications/Mozilla\ VPN.app/Contents/MacOS/Mozilla\ VPN servers`
+
+Select a server, must be the actual server name and not the city `/Applications/Mozilla\ VPN.app/Contents/MacOS/Mozilla\ VPN select`
+
+
+
     Status shows if the client is connected or not, and the server city and country it is configured for. There are other details here like all devices configured for the service.
 
 ### Api's used for gathering IP data

extensions/mozilla-vpn/src/components/checkLogin.tsx

@@ -1,13 +1,19 @@
+// src/components/checkLogin.tsx
 import React from 'react';
 import {
   List,
   ActionPanel,
   Action,
   popToRoot,
   closeMainWindow,
+  Icon,
 } from '@raycast/api';
 import { exec } from 'child_process';
 
+interface CheckLoginProps {
+  onBack?: () => void; // Add optional onBack prop
+}
+
 const openMozillaVpnApp = () => {
   exec('open -a "Mozilla VPN"', (error) => {
     if (error) {
@@ -19,15 +25,29 @@ const openMozillaVpnApp = () => {
   });
 };
 
-const CheckLogin: React.FC = () => {
+const CheckLogin: React.FC<CheckLoginProps> = ({ onBack }) => {
   return (
     <List.EmptyView
       title="Mozilla VPN Login Required"
       description="Please log in using the Mozilla VPN application. Press Enter to open the app."
       icon="⚠️"
       actions={
         <ActionPanel>
-          <Action title="Open Mozilla VPN" onAction={openMozillaVpnApp} />
+          <ActionPanel.Section>
+            <Action title="Open Mozilla VPN" onAction={openMozillaVpnApp} />
+          </ActionPanel.Section>
+
+          {/* Add Back to Main Menu action if onBack is provided */}
+          {onBack && (
+            <ActionPanel.Section>
+              <Action
+                title="Back to Main Menu"
+                icon={Icon.ArrowLeft}
+                onAction={onBack}
+                shortcut={{ modifiers: ['cmd'], key: 'b' }}
+              />
+            </ActionPanel.Section>
+          )}
         </ActionPanel>
       }
     />

extensions/mozilla-vpn/src/components/serverDetails.tsx

@@ -0,0 +1,125 @@
+// src/components/serverDetails.tsx
+import React from 'react';
+import { Detail, ActionPanel, Action, Icon, Color } from '@raycast/api';
+
+interface ServerDetailsProps {
+  serverCity: string;
+  serverCountry: string;
+  ipAddress: string;
+  isConnected: boolean;
+  onToggleVpn: () => void;
+  onSelectServer: () => void;
+  onBack?: () => void; // Add optional onBack prop
+}
+
+const ServerDetails: React.FC<ServerDetailsProps> = ({
+  serverCity,
+  serverCountry,
+  ipAddress,
+  isConnected,
+  onToggleVpn,
+  onSelectServer,
+  onBack,
+}) => {
+  const statusText = isConnected ? 'Connected' : 'Disconnected';
+  const actionTitle = isConnected ? 'Disconnect VPN' : 'Connect VPN';
+  const actionIcon = isConnected ? Icon.Stop : Icon.Play;
+
+  // Using emoji for color instead of HTML spans
+  const statusEmoji = isConnected ? '🟢' : '🔴';
+
+  const markdown = `
+  # Mozilla VPN Status
+
+  ## Connection Information
+  - **Status**: ${statusEmoji} ${statusText}
+  - **Server Location**: ${serverCity}, ${serverCountry}
+  - **IP Address**: ${ipAddress}
+
+  ## Connection Details
+  ${
+    isConnected
+      ? `
+  Your connection to Mozilla VPN is currently active. All your internet traffic is being routed through the VPN server in ${serverCity}, ${serverCountry}.
+
+  Your real IP address is hidden, and websites see your VPN IP address (${ipAddress}).
+  `
+      : `
+  Your connection to Mozilla VPN is currently inactive. Your internet traffic is not being protected by the VPN.
+
+  Your current IP address (${ipAddress}) is visible to websites you visit.
+  `
+  }
+
+  ## Mozilla VPN Features
+  - **Privacy**: Encrypts your internet connection
+  - **Security**: Protects your data on public WiFi
+  - **No-logs Policy**: Mozilla doesn't track your network activity
+  - **Global Access**: Connect to servers in multiple countries
+  `;
+
+  return (
+    <Detail
+      navigationTitle="VPN Server Details"
+      markdown={markdown}
+      metadata={
+        <Detail.Metadata>
+          <Detail.Metadata.Label
+            title="Status"
+            text={statusText}
+            icon={{
+              source: isConnected ? Icon.CheckCircle : Icon.XmarkCircle,
+              tintColor: isConnected ? Color.Green : Color.Red,
+            }}
+          />
+          <Detail.Metadata.Label
+            title="Server Location"
+            text={`${serverCity}, ${serverCountry}`}
+            icon={Icon.Globe}
+          />
+          <Detail.Metadata.Label
+            title="IP Address"
+            text={ipAddress}
+            icon={Icon.Network}
+          />
+          <Detail.Metadata.Separator />
+          <Detail.Metadata.Label
+            title="Connection"
+            text={isConnected ? 'Encrypted' : 'Not Encrypted'}
+            icon={isConnected ? Icon.Lock : Icon.LockUnlocked}
+          />
+        </Detail.Metadata>
+      }
+      actions={
+        <ActionPanel>
+          <ActionPanel.Section>
+            <Action
+              title={actionTitle}
+              icon={actionIcon}
+              onAction={onToggleVpn}
+            />
+            <Action
+              title="Change Server"
+              icon={Icon.Globe}
+              onAction={onSelectServer}
+            />
+          </ActionPanel.Section>
+
+          {/* Add Back to Main Menu action if onBack is provided */}
+          {onBack && (
+            <ActionPanel.Section>
+              <Action
+                title="Back to Main Menu"
+                icon={Icon.ArrowLeft}
+                onAction={onBack}
+                shortcut={{ modifiers: ['cmd'], key: 'b' }}
+              />
+            </ActionPanel.Section>
+          )}
+        </ActionPanel>
+      }
+    />
+  );
+};
+
+export default ServerDetails;