Skip to content

Update UI #254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mateumiralles wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Update UI #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
042045e
update resources
mateumiralles Feb 24, 2026
e5b0883
refactor UI
mateumiralles Feb 24, 2026
ec1ee3f
use Loading gif
mateumiralles Feb 24, 2026
8eead52
open link in new tab
mateumiralles Feb 27, 2026
b0966da
fix dev conditions
mateumiralles Feb 27, 2026
326edb5
update links and redirect to documentation
mateumiralles Feb 27, 2026
6d2742a
inline media files as base64 data URIs in HTML output
mateumiralles Mar 5, 2026
39ed01a
Revert "inline media files as base64 data URIs in HTML output"
mateumiralles Mar 5, 2026
dad49ca
replace logo and loading GIF with new assets
mateumiralles Mar 5, 2026
e1fc110
Merge pull request #258 from dappnode/mateu/fix-assets
Marketen Mar 6, 2026
3aae6fc
redirect to docu for clients installation
mateumiralles Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ui_openvpn/public/favicon.ico
100755 → 100644
View file
Open in desktop
Binary file not shown.
39 changes: 22 additions & 17 deletions ui_openvpn/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="shortcut icon"
type="image/x-icon"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC9UExURUdwTCy9syy9syu9szu/szK+szC+szS+szO+sy++sy++sy++syy9syy9szC+syy9syu9sy69sy29sy29sy6+syy9syy9syy9syy9sy29syy9sy69sy69sy29sy29sy69syy9sy29syy9sy69syy9sy29sy6+sy29syu9sy69sy29syy9syu9sy29sy29sy29syy9syy9sy29sy69syy9sy29sy++syu9sy29sy29sy29syy9sy69syu9syy9s/RPmcIAAAA9dFJOUwDDz/oBCQwEBhIcGL/YDsf9P42GK+6626514ERLeX4252S2O6hYI5n2J1Oi+GtxZtKxTzDrlCD0yoqepmA/zzvqAAACDUlEQVQYGW3ABXbbQBQF0CccjZhsgVmmmhmS9M/+l9WR7MBpfPHLplV28IpuMEhcJfpg+I2NlLkDwFeI5jp+WwyJCkhRVs3wQjok6kFihxEejM6S4wvblIENKd1fTDQ2f8K5hW/bnAHw2xQWqLGcyLPxbZr9dWB1W0QrHbU3Ec4tfIk8ESq7iaq0bu4VkuPGR44G4xasnISgYT81T4OVewL0pPLxYCb7y2A0FIIoZ5D8WO2cduoYT50bhVlbFUJQHw2rKFtUGXiKbqSNrNS9CcXBg1EReQ6ejK3b9wE+TtomnnohTQx80g0dNfveizganWxr45Nl6mikGa2rGWrJu6535xsT0mKiTHVI+jtJMSSuLLEoSZtCiok8G5IZkOT6sIvcW/B+SFRAionKKyS2ImlYFW0SWqW4h6G7gDT7ULyeBYBPWprmdjZ3IWmFb8w4GpYRqcn2sntvj49HBxgJIrqN8VO3FZLIUgC+b/RCInHn+GmpEYnzCegGShUkSrkPbDyZnYHlXASRuI1htImyFL7t5LGpo8bi9TkPgrMQIrNhHYgOFqSoDPomJNsj8rp8qa6Vfd/CaTIZoNZd058uJGNFWgEgUq9jtc85Y2gcNVofUXNGUxPA4O5grKpez0LDf1PffHwzk/OOISYapnhgPsMPU43OA2yJyhle2hHdIvAkX+p46epqKx/QGf7zDwHCPoXJoPmRAAAAAElFTkSuQmCC"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<title>Access Dappnode</title>
</head>

<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC9UExURUdwTCy9syy9syu9szu/szK+szC+szS+szO+sy++sy++sy++syy9syy9szC+syy9syu9sy69sy29sy29sy6+syy9syy9syy9syy9sy29syy9sy69sy69sy29sy29sy69syy9sy29syy9sy69syy9sy29sy6+sy29syu9sy69sy29syy9syu9sy29sy29sy29syy9syy9sy29sy69syy9sy29sy++syu9sy29sy29sy29syy9sy69syu9syy9s/RPmcIAAAA9dFJOUwDDz/oBCQwEBhIcGL/YDsf9P42GK+6626514ERLeX4252S2O6hYI5n2J1Oi+GtxZtKxTzDrlCD0yoqepmA/zzvqAAACDUlEQVQYGW3ABXbbQBQF0CccjZhsgVmmmhmS9M/+l9WR7MBpfPHLplV28IpuMEhcJfpg+I2NlLkDwFeI5jp+WwyJCkhRVs3wQjok6kFihxEejM6S4wvblIENKd1fTDQ2f8K5hW/bnAHw2xQWqLGcyLPxbZr9dWB1W0QrHbU3Ec4tfIk8ESq7iaq0bu4VkuPGR44G4xasnISgYT81T4OVewL0pPLxYCb7y2A0FIIoZ5D8WO2cduoYT50bhVlbFUJQHw2rKFtUGXiKbqSNrNS9CcXBg1EReQ6ejK3b9wE+TtomnnohTQx80g0dNfveizganWxr45Nl6mikGa2rGWrJu6535xsT0mKiTHVI+jtJMSSuLLEoSZtCiok8G5IZkOT6sIvcW/B+SFRAionKKyS2ImlYFW0SWqW4h6G7gDT7ULyeBYBPWprmdjZ3IWmFb8w4GpYRqcn2sntvj49HBxgJIrqN8VO3FZLIUgC+b/RCInHn+GmpEYnzCegGShUkSrkPbDyZnYHlXASRuI1htImyFL7t5LGpo8bi9TkPgrMQIrNhHYgOFqSoDPomJNsj8rp8qa6Vfd/CaTIZoNZd058uJGNFWgEgUq9jtc85Y2gcNVofUXNGUxPA4O5grKpez0LDf1PffHwzk/OOISYapnhgPsMPU43OA2yJyhle2hHdIvAkX+p46epqKx/QGf7zDwHCPoXJoPmRAAAAAElFTkSuQmCC">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>Access DAppNode</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

Expand All @@ -24,6 +30,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>

</html>
</body>
</html>
209 changes: 76 additions & 133 deletions ui_openvpn/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";

Expand Down Expand Up @@ -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();
Expand All @@ -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);
Expand All @@ -145,82 +87,92 @@ export default class App extends Component {

if (error) {
return (
<div className="container text-center mt-5">
<img src={errorLogo} className="main-logo" alt="logo" />
<div className="status-panel card-surface">
<img src={errorLogo} className="main-logo" alt="error" />
<h6 className="main-text">{error}</h6>
</div>
);
}

if (loading) {
return (
<div className="status-panel card-surface">
<div className="loading-spinner"></div>
<h6 className="main-text">Loading...</h6>
</div>
);
}

if (file) {
return (
<React.Fragment>
<div className="container">
<h2 className="mt-5">Set up your DAppNode OpenVPN connection</h2>
<p className="jumotron-subtitle">
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.
</p>
<div className="text-center">
<h6 className="main-text mt-4">
<img
src={okLogo}
className="main-logo"
alt="ok"
style={{ height: "18px", margin: "0px 7px 0px 0px" }}
/>
Successfully decrypted .ovpn file
</h6>
<button
className="btn btn-primary dappnode-background-color"
onClick={saveAs.bind(this, blob, filename)}
>
Download
</button>
<div className="hero-section">
<div className="card-surface">
<h2 className="hero-title">
Set up your Dappnode OpenVPN connection
</h2>
<p className="hero-subtitle">
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.
</p>

<div className="hero-actions">
<div className="status-pill">
<img src={okLogo} className="status-icon" alt="ok" />
<span>Successfully decrypted</span>
</div>
<button
className="btn btn-primary dappnode-background-color"
onClick={saveAs.bind(this, blob, filename)}
>
Download .ovpn
</button>
</div>

<div className="hero-footer">
<p>After connecting to the VPN, access your Dappnode</p>
<a
className="btn btn-primary dappnode-background-color"
href={adminUiUrl}
target="_blank"
rel="noopener noreferrer"
>
Go to my.dappnode
</a>
</div>
</div>
</div>

<div className="section-divider">
<div className="container">
<h2>Haven't installed an OpenVPN client already?</h2>
<p>Follow the official docs to choose and install a client</p>

<p className="jumotron-subtitle navigate-to-dappnode">
After setting up your connection with the .ovpn and successfully
connecting to the VPN, start using your DAppNode by going to{" "}
<a className="dappnode-color" href={adminUiUrl}>
my.dappnode
</a>
</p>
<div className="text-center">
<a
className="btn btn-primary dappnode-background-color"
href={adminUiUrl}
href={dappnodeVpnDocsUrl + docsClientSectionUrl}
target="_blank"
rel="noopener noreferrer"
>
Go to my.dappnode
Client installation guide
</a>
</div>
</div>

<div className="jumbotron-area">
<div className="container text-center">
<h2 className="jumbotron-title">
Haven't installed an OpenVPN client already?
</h2>
<p className="jumotron-subtitle">Choose your OS below</p>
</div>
</div>

<div className="container">
<div className="row instructions-row">
{options.map((option, i) => (
<div key={i} className="col-6 col-sm-6 col-md-4 col-lg-2 mt-4">
<a
className="instructions-link text-center nav-link"
href={option.link}
>
<div className="nav-icon">
<option.icon />
</div>
<div className="nav-text">{option.name}</div>
</a>
</div>
))}
<div className="help-section">
<div className="container">
<p>
Having trouble?{" "}
<a
className="dappnode-color"
href={dappnodeVpnDocsUrl}
target="_blank"
rel="noopener noreferrer"
>
Check out the full documentation
</a>
</p>
</div>
</div>

Expand All @@ -229,17 +181,8 @@ export default class App extends Component {
);
}

if (loading) {
return (
<div className="container text-center mt-5">
<img src={logo} className="main-logo" alt="logo" />
<h6 className="main-text">Loading...</h6>
</div>
);
}

return (
<div className="container text-center mt-5">
<div className="status-panel card-surface">
<img src={logo} className="main-logo" alt="logo" />
<h6 className="main-text">¯\_(ツ)_/¯</h6>
</div>
Expand Down
27 changes: 11 additions & 16 deletions ui_openvpn/src/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<nav className="navbar navbar-dark bg-dark">
<nav className="navbar">
<div className="container">
<div className="row">
<span className="navbar-brand">
<img
src={dappnodeLogo}
className="navbar-logo"
alt="DAppNode logo"
/>
<span className="header-brand">DAppNode </span>
<span className="header-vertical-bar" />
<span className="header-sub-brand dappnode-color">
Connection Setup
</span>
</span>
</div>
<span className="navbar-brand">
<img
src={dappnodeLogo}
className="navbar-logo"
alt="DAppNode logo"
/>
<span className="header-brand">Dappnode</span>
<span className="header-pill">OpenVPN</span>
</span>
</div>
</nav>
);
Expand Down
Binary file added ui_openvpn/src/img/dappnode-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ui_openvpn/src/img/loading.gif
View file
Open in desktop
Binary file not shown.
Binary file removed ui_openvpn/src/img/logo.png
View file
Open in desktop
Binary file not shown.
Loading