Complete UI overhaul and code refactor. Feedback wanted!

[brendanosborne]

This release is a complete refactor of the app with a complete overhaul of the user interface (UI). The UI was previously built with HTML, CSS and Bootstrap and has been switched out to React, TypeScript and TailwindCSS.

The previous builds of TunnlTo were effectively an MVP to gauge interest in the project. Adding features and improvements to that build quickly became difficult and it was clear the build tools needed to evolve. The purpose of this refactor is to set a solid foundation for implementing further features.

Please provide feedback in the Discussion thread.

Notes

• This is not the final UI design, and the layout will continue to undergo changes.
• This build does not include an upgrade feature to import tunnel configurations from the old versions. It is a high priority feature and will be implemented before released to the auto-update system, meaning <1.0.0 builds will not update automatically to this build.
• If you have an older version of Wiresock than 1.2.32.1, please uninstall it prior to installing this build of TunnlTo.

Improvements and changes

• Completely overhauled the UI implemented with TypeScript, React and TailwindCSS.
• UI adapts to window size.
• Added auto-start and auto-connect features.
• Upgraded Wiresock to the latest version (1.2.32.1)
• Improved Wiresock process management.
• Wiresock logs are now visible in the UI.
• Added support for Wiresock parameter "interface listen port"
• Added support for Wiresock parameter "allowed/disallowed folders"

---

This discussion was created from the release v1.0.0.

[brendanosborne]

I have released version 1.0.1 with some more improvements: https://github.com/TunnlTo/desktop-app/releases/tag/v1.0.1

[vertuk]

I felt such relief from this release. Load and connect on start-up, ability to edit a config without disconnecting first, actually convenient and helpful field for configuring app tunneling, and the program window can finally be resized.
The UI is neat and okay. What's left is to add an ability to import configs and it'll be perfect from my UX perspective.

[brendanosborne]

Great to hear, thanks for the feedback. The import config functionality won't be too difficult to port across from the old version. I should be able to put it into the next release.

[brendanosborne]

@vertuk the latest build adds the import feature back in. I'll look into multi-file imports for a future release.

[KredesX]

Great program! my biggest wish is for a kill switch implementation, hope to see it some day in the future :)

[artemdanielov]

Hi! Finally a long waited update is here! thank you!
Question: is keep alive packet should be sent this often:

2023-11-30 16:51:43 [TUN]: keep_alive_thread: Sending Keepalive packet to WireGuard Server success
2023-11-30 16:51:18 [TUN]: keep_alive_thread: Sending Keepalive packet to WireGuard Server success
2023-11-30 16:50:53 [TUN]: keep_alive_thread: Sending Keepalive packet to WireGuard Server success
2023-11-30 16:50:28 [TUN]: keep_alive_thread: Sending Keepalive packet to WireGuard Server success
2023-11-30 16:50:03 [TUN]: keep_alive_thread: Sending Keepalive packet to WireGuard Server success

[wiresock]

I think when keep alive interval is not specified it defaults to 25 seconds.

[artemdanielov]

sholdnt it be off by default? anyway, should be a way to turn it off if one does not need it..

[brendanosborne]

@wiresock, just to clarify, Wiresock defaults to 25 right?

I have "25" as the placeholder in the Persistent Keepalive form input field, but I'm not saving anything to the Wiresock config if a value is not set. Setting it to 0 appears to turn off the Keepalive packets being sent.

[artemdanielov]

@brendanosborne strange thing happens: i set Keepalive to 3600 but i see this in logs:

2023-12-06 11:26:04 [TUN]: keep_alive_thread: Sending Handshake packet to WireGuard Server success
2023-12-06 11:24:04 [TUN]: keep_alive_thread: Sending Handshake packet to WireGuard Server success
2023-12-06 11:22:04 [TUN]: keep_alive_thread: Sending Handshake packet to WireGuard Server success

[wiresock]

The log looks good, handshakes are sent every two minute and there are no keep alive packets present.

[artemdanielov]

So after autostart with windows it doesnt go to tray by itself, it just stays as an open window on a desktop

[brendanosborne]

Yes that is a bit clunky, I'll add a "Minimize to system tray on startup" option in the settings.

[brendanosborne]

@artemdanielov This has been implemented in version 1.0.5

[Zoxjib]

This feature doesn't work in version 1.0.6.

[brendanosborne]

Please open an issue if it isn't working for you and be sure to fill in the issue template.

[vithusel]

It would be a nice to have to be able to install wiresock as part of the original install process rather then having to do it after loading up TunnlTo. Not as much of a issue for users with Admin access but for users where they don't you need to enter the admin credentials twice which when spanned across a lot of machines is a fair bit of time.

[Permanently]

Similar to Wireshark's installation, where it installs Npcap and USBPcap in the MSI package?

[brendanosborne]

Thanks for the suggestion. Definitely something I'm keen on as managing the separate installation is not ideal. I'll add it to the feature requests.

[vithusel]

A couple of suggested improvements.

1. Ability to configure log levels - I can see debug is currently hardcoded within main.rs, it could be useful for some users to be able to change this depending on if they are actively trying to troubleshoot issues. This can either be a global setting or per Tunnel.
2. Ability to set a restricted view for systems that aren't admin privileged. So certain tunnels cannot be edited without an admin nor should any tunnel details such as keys be visible. This could be further enhanced by setting up a folder with restricted permissions so only the app can access it but a user is unable to directly navigate to the folder to view the config file.
3. Enlist TunnlTo on chocolatelys package respository with the correct WireSock client as a dependency. This will simplify installation for admins and creates a single command install. It's likely to get the attention of more device admins. Software such as WireGuards official client, TunSafe, ForestVPN already utilise this
4. Ability to select installed apps rather then manually typing them.
5. Ability to right click on taskbar icon and view connection status as well as quick connect to perhaps the last used connection. Maybe even have one of those green and red circles to symbolize connectivity.
6. Customized startup commands to give people the ability to run a batch or powershell command such as ipconfig /flushdns or do a ping check so if they are already within the vpn's network which would then not attempt connection.

Using Tauri, React, TypeScript and TailwindCSS certainly makes life a lot easier for development and i am more then happy to put some man hours in to create some PR's if you are ok with accepting them.

Let me know if you want to offload any of the above or any features in general. If our interests align on other stuff im more then happy to work on it.

[brendanosborne]

Thank you for the detailed suggestions.

1. Ability to configure log levels.

I've implemented the WireSock "All" option in TunnlTo v1.0.3 which can be found in the settings. This may be improved in time to have per-tunnel log options, however the "All" option reduces performance and should only be utilised for testing.

2. Ability to set a restricted view for systems that aren't admin privileged
3. Enlist TunnlTo on chocolatelys package respository with the correct WireSock client as a dependency.
4. Ability to select installed apps rather then manually typing them.
5. Ability to right click on taskbar icon and view connection status as well as quick connect to perhaps the last used connection. Maybe even have one of those green and red circles to symbolize connectivity.

Added to Feature requests. Systray icon improvements are a high priority. Taskbar status info would be nice too.

6. Customized startup commands to give people the ability to run a batch or powershell command such as ipconfig /flushdns or do a ping check so if they are already within the vpn's network which would then not attempt connection.

I've had requests for a trigger system where the VPN tunnel will connect/disconnect under certain circumstances. For example if you connect to the home Wi-Fi it would connect a specific tunnel.

Using Tauri, React, TypeScript and TailwindCSS certainly makes life a lot easier for development and i am more then happy to put some man hours in to create some PR's if you are ok with accepting them.
Let me know if you want to offload any of the above or any features in general. If our interests align on other stuff im more then happy to work on it.

Thanks for the offer. I will get back to you on that as I'm not quite setup to take PR's at the moment.

[artemdanielov]

Hello! So, since v 1.0.4 apps that are not going thrue VPN are using DNS settings configured in VPN tunel. It wasnt like this in previous versions and i think its somehow related to this .
I dont think that it should work this way. If app is not using VPN it should not use DNS provided by VPN, but use DNS configured on router.

[wiresock]

In Windows, DNS resolution is managed by the DNSCache service, which processes all DNS queries. Due to this design, it's not possible to configure a system that allows tunneled applications to use one set of DNS settings and non-tunneled applications to use a different, local DNS. Therefore, users must select a single DNS configuration to be applied universally across all applications.

[brendanosborne]

@artemdanielov I've made some amendments to the documentation to clarify DNS usage. As @wiresock mentioned, DNS is a difficult beast to tame, particularly in Windows. But you're not alone in your use case so it will be in the back of our minds should any possibility for improvement present itself.

[azimoert]

I guess a description is needed on how to edit the configuration. I found my issue pretty quick but that's not obvious for people like me on how to edit stuff. For example, I didn't realise at first that applications have to be written as "APPNAME, APPNAME2" etc. I did write it down with just a space break. There is a plethora of ways people choose to edit lists depending on what you do.

[brendanosborne]

Yes I agree the form needs to stop incorrect inputs and needs several other improvements. I have some ideas in mind but have been dealing with some other bugs. I'd like to implement something along these lines:

The text box could auto-complete based on previous values. The values will be stored in a central location and referenced by each tunnel, so that values can be re-used across different tunnels.

[azimoert]

Exactly. It makes the whole thing easy to use.

[K14Mua]

I have a suggestion.

Add a quick rule switch. In the mobile version of WireGuard, if I have more than one connection installed, I can quickly switch between them. If I have two rules and the first one is currently active. I can activate the second one and the first one is automatically deactivated. This is very convenient and fast. This does not work on a PC in TunnlTo. I have to deactivate the first rule and only then activate the second one. This takes a bit longer.

[vithusel]

One more from me!

The ability to disable automatic updates would be useful. Where the user has no admin privileges. They themselves cannot install the update. In my case. All my devices are managed centrally so i'd be pushing the update via a management tool instead of relying upon the built in updater