diff --git a/ui_openvpn/public/favicon.ico b/ui_openvpn/public/favicon.ico old mode 100755 new mode 100644 index 5ac79d50..a13f189a Binary files a/ui_openvpn/public/favicon.ico and b/ui_openvpn/public/favicon.ico differ diff --git a/ui_openvpn/public/index.html b/ui_openvpn/public/index.html index 122b2f55..143f0e9a 100755 --- a/ui_openvpn/public/index.html +++ b/ui_openvpn/public/index.html @@ -1,20 +1,26 @@ + + + + + + Access Dappnode + - - - - - - Access DAppNode - - - - -
- - - - \ No newline at end of file + + diff --git a/ui_openvpn/src/App.js b/ui_openvpn/src/App.js index 0330feb3..af0cc663 100755 --- a/ui_openvpn/src/App.js +++ b/ui_openvpn/src/App.js @@ -20,6 +20,7 @@ import getServerName from "./utils/getServerName"; import errorLogo from "./img/error.png"; import okLogo from "./img/ok.png"; import logo from "./img/logo.png"; +import loadingGif from "./img/loading.gif"; // Icons import FaAndroid from "./icons/FaAndroid"; import FaApple from "./icons/FaApple"; @@ -30,8 +31,8 @@ import FaWindows from "./icons/FaWindows"; window.saveAs = saveAs; -const instructionsBaseUrl = - "https://github.com/dappnode/dappnode/wiki/openvpn-client-guide"; +const dappnodeVpnDocsUrl = + "https://docs.dappnode.io/docs/user/access-your-dappnode/vpn/openvpn"; const adminUiUrl = "http://my.dappnode/"; @@ -41,42 +42,42 @@ const options = [ route: "macos", component: MacOS, icon: FaApple, - link: `${instructionsBaseUrl}#macos`, + link: `https://openvpn.net/client/`, }, { name: "iOS", route: "ios", component: iOS, icon: FaMobile, - link: `${instructionsBaseUrl}#ios`, + link: `https://apps.apple.com/us/app/openvpn-connect/id590379981`, }, { name: "Windows", route: "windows", component: Windows, icon: FaWindows, - link: `${instructionsBaseUrl}#windows`, + link: `https://openvpn.net/client/`, }, { name: "Android", route: "android", component: Android, icon: FaAndroid, - link: `${instructionsBaseUrl}#android`, + link: `https://play.google.com/store/apps/details?id=net.openvpn.openvpn`, }, { name: "Linux", route: "linux", component: Linux, icon: FaLinux, - link: `${instructionsBaseUrl}#linux`, + link: `https://openvpn.net/community-docs/openvpn-client-for-linux.html`, }, { name: "Chromebook", route: "chromebook", component: Chromebook, icon: FaChrome, - link: `${instructionsBaseUrl}#android`, + link: `https://play.google.com/store/apps/details?id=net.openvpn.openvpn`, }, ]; @@ -115,7 +116,7 @@ export default class App extends Component { // 2. Fetch file from server const res = await fetch(url); if (res.status === 404) - throw Error("Link expired, contact your DAppNode administrator"); + throw Error("Link expired, contact your Dappnode administrator"); if (!res.ok) throw Error(`Error fetching your credentials file: ${res.statusText}`); const encryptedFile = await res.text(); @@ -124,7 +125,7 @@ export default class App extends Component { if (!isBase64(encryptedFile)) { const filePreview = (encryptedFile || "").substring(0, 100); throw Error( - `Incorrect ID or wrong file format (no-base64). url: ${url} encryptedFile: ${filePreview}...\n` + `Incorrect ID or wrong file format (no-base64). url: ${url} encryptedFile: ${filePreview}...\n`, ); } const file = decrypt(encryptedFile, key); @@ -145,74 +146,79 @@ export default class App extends Component { if (error) { return ( -
- logo +
+ error
{error}
); } + if (loading) { + return ( +
+ loading +
Loading...
+
+ ); + } + if (file) { return ( -
-

Set up your DAppNode OpenVPN connection

-

- Download the .ovpn file provided by your DAppNode administrator - and import it to your client. You can follow the guides below on - how to import an .ovpn file. -

-
-
- ok - Successfully decrypted .ovpn file -
- -
+
+
+

+ Set up your Dappnode OpenVPN connection +

+

+ Download the .ovpn file provided by your Dappnode administrator + and import it to your client. You can follow the guides below on + how to import an .ovpn file. +

+ +
+
+ ok + Successfully decrypted +
+ +
-

- After setting up your connection with the .ovpn and successfully - connecting to the VPN, start using your DAppNode by going to{" "} - - my.dappnode - -

-
- - Go to my.dappnode - +
+

After connecting to the VPN, access your Dappnode

+ + Go to my.dappnode + +
-
-
-

- Haven't installed an OpenVPN client already? -

-

Choose your OS below

+
+
+

Haven't installed an OpenVPN client already?

+

Choose your OS below

-
-
+
+
{options.map((option, i) => ( -
+ + + ); } - if (loading) { - return ( -
- logo -
Loading...
-
- ); - } - return ( -
+
logo
¯\_(ツ)_/¯
diff --git a/ui_openvpn/src/Header.js b/ui_openvpn/src/Header.js index cbfdf7e1..67e3450d 100755 --- a/ui_openvpn/src/Header.js +++ b/ui_openvpn/src/Header.js @@ -4,22 +4,17 @@ import dappnodeLogo from "./img/logo.png"; class Header extends Component { render() { return ( -