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 6 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
6 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
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>
153 changes: 83 additions & 70 deletions ui_openvpn/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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/";

Expand All @@ -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`,
},
];

Expand Down Expand Up @@ -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();
Expand All @@ -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);
Expand All @@ -145,74 +146,79 @@ 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">
<img src={loadingGif} className="loading-logo" alt="loading" />
<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>
<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>

<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}
>
Go to my.dappnode
</a>
<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="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 className="section-divider">
<div className="container">
<h2>Haven't installed an OpenVPN client already?</h2>
<p>Choose your OS below</p>
</div>
</div>

<div className="container">
<div className="row instructions-row">
<div className="container instructions-section">
<div className="instructions-row">
{options.map((option, i) => (
<div key={i} className="col-6 col-sm-6 col-md-4 col-lg-2 mt-4">
<div key={i} className="instructions-card">
<a
className="instructions-link text-center nav-link"
className="instructions-link"
href={option.link}
target="_blank"
rel="noopener noreferrer"
>
<div className="nav-icon">
<option.icon />
Expand All @@ -224,22 +230,29 @@ export default class App extends Component {
</div>
</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>

<HiddenRedirector />
</React.Fragment>
);
}

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
25 changes: 10 additions & 15 deletions ui_openvpn/src/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,17 @@ import dappnodeLogo from "./img/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 modified ui_openvpn/src/img/loading.gif
100755 → 100644
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 modified ui_openvpn/src/img/logo.png
100755 → 100644
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.
Loading