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..b2a5b6d6 100755 --- a/ui_openvpn/src/App.js +++ b/ui_openvpn/src/App.js @@ -4,13 +4,6 @@ import saveAs from "file-saver"; // General components import HiddenRedirector from "./HiddenRedirector"; // Platform dedicated components -// import Instructions from "./Instructions/Instructions"; -import MacOS from "./Instructions/MacOS"; -import Windows from "./Instructions/Windows"; -import Android from "./Instructions/Android"; -import iOS from "./Instructions/iOS"; -import Linux from "./Instructions/Linux"; -import Chromebook from "./Instructions/Chromebook"; // Utils import getParamsFromUrl from "./utils/getParamsFromUrl"; import isBase64 from "./utils/isBase64"; @@ -19,67 +12,16 @@ import getServerName from "./utils/getServerName"; // Logos import errorLogo from "./img/error.png"; import okLogo from "./img/ok.png"; -import logo from "./img/logo.png"; -// Icons -import FaAndroid from "./icons/FaAndroid"; -import FaApple from "./icons/FaApple"; -import FaChrome from "./icons/FaChrome"; -import FaLinux from "./icons/FaLinux"; -import FaMobile from "./icons/FaMobile"; -import FaWindows from "./icons/FaWindows"; +import logo from "./img/dappnode-logo.png"; 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 docsClientSectionUrl = "#3-openvpn-installation"; const adminUiUrl = "http://my.dappnode/"; -const options = [ - { - name: "MacOS", - route: "macos", - component: MacOS, - icon: FaApple, - link: `${instructionsBaseUrl}#macos`, - }, - { - name: "iOS", - route: "ios", - component: iOS, - icon: FaMobile, - link: `${instructionsBaseUrl}#ios`, - }, - { - name: "Windows", - route: "windows", - component: Windows, - icon: FaWindows, - link: `${instructionsBaseUrl}#windows`, - }, - { - name: "Android", - route: "android", - component: Android, - icon: FaAndroid, - link: `${instructionsBaseUrl}#android`, - }, - { - name: "Linux", - route: "linux", - component: Linux, - icon: FaLinux, - link: `${instructionsBaseUrl}#linux`, - }, - { - name: "Chromebook", - route: "chromebook", - component: Chromebook, - icon: FaChrome, - link: `${instructionsBaseUrl}#android`, - }, -]; - const ovpnType = "application/x-openvpn-profile"; const fileExtension = "ovpn"; @@ -115,7 +57,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 +66,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,82 +87,92 @@ export default class App extends Component { if (error) { return ( -
- logo +
+ error
{error}
); } + if (loading) { + return ( +
+
+
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 connecting to the VPN, access your Dappnode

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

Haven't installed an OpenVPN client already?

+

Follow the official docs to choose and install a client

-

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

-
-
-
-

- Haven't installed an OpenVPN client already? -

-

Choose your OS below

-
-
- -
-
- {options.map((option, i) => ( - - ))} +
+
+

+ Having trouble?{" "} + + Check out the full documentation + +

@@ -229,17 +181,8 @@ export default class App extends Component { ); } - if (loading) { - return ( -
- logo -
Loading...
-
- ); - } - return ( -
+
logo
¯\_(ツ)_/¯
diff --git a/ui_openvpn/src/Header.js b/ui_openvpn/src/Header.js index cbfdf7e1..e2f5823d 100755 --- a/ui_openvpn/src/Header.js +++ b/ui_openvpn/src/Header.js @@ -1,25 +1,20 @@ import React, { Component } from "react"; -import dappnodeLogo from "./img/logo.png"; +import dappnodeLogo from "./img/dappnode-logo.png"; class Header extends Component { render() { return ( -