NEW WEBINTERFACE - 1.0.1

[wxclxr]

New Magical Fidget Bot Webinterface

Hello there, hallo zusammen and siemano,

I've written a thread about a new interface in which several people were interested and it's time to release this thing.
In the past days I was testing and improving it therefore it doesn't actually looks as I promised but kinda

What's included in the zip?
- simple docker-compose setup (bot + webinterface)
- webinterface itself

About the webinterface
The interface itself is written in node.js (javascript + typescript) and is using Nuxt3 as underlying technology to get it done.

Features
- Responsive
- Light & Dark Mode
- Supports multiple instances at once (changing accounts)
- Logs with filters
- Settings editable within a form
- In different languages (Polish, German and English)
- ...

Gallery

https://imgur.com/a/HvoEyX1

Explore the rest yourself

What's too improve?

- Still settings

How to give feedback?
Just reply in this thread or by a private message.

How to support?
Give feedback, your ideas what to improve and report bugs of course and donate to the bot itself - it's a great thing

What are the next steps?
There are none, just use it and if something doesn't work or is missing let me know.
If there will be additional things in the api I am keen to do some updates.

Setup

Where the fun begins. I provide within the .zip two options to set this thing up.

Webinterface Environment Variables:

SPOILER

---

- **PASSWORD**
_This could be a security vulnerability_
It is used on the login page so that you do not have to enter a password to log in. The back-end server uses this password to log in to your account.
- **LOGIN**
This is prefilled value on the `/login` page to reduce the type amount. It stands for the username you created in the MFBot Interface.
- **ADDRESS**
This is prefilled value on the `/login` page to reduce the type amount. It stands for the http connection to the MFBot instance.
- **REFRESH_TIME_SEC** (default: 15s)
It stands for time in seconds to refetch the overview/account information from the bot directly.
- **BOT_TIMEZONE** (default: Europe/Berlin)
It stands for the timezone of the server (computer) where the bot is running.
- **BOT_UTC** (default: false)
It let's the interface know if the time on server (where the bot is running) is utc. If that should be the case set it to 'true' or '1'.

since v1.0.1

- **INSTANCE_COUNT** (default: 1)
Amount of instances you want to display on the login page
- **INSTANCE_NAMES** (default: )
Names for the specified count. Separate them by , e.g. home,zuhause
You can also separate multiple LOGIN, ADRESS and PASSWORD for your instances.
- **CHECK_VERSION** (default: 0)
Check against an api endpoint if the bot you're using is outdated. Can be seen in footer. It checks only once per device basis.

Docker:

SPOILER

---

!!! Ensure that you've configured your bot to run on 127.0.0.1:1024 otherwise the bot won't be accessible from the webinterface it self. It's a must!

Add your Acc.ini into the root directory (where the docker-compose.yml is located)
Configure the .env file with the variables you'd like to have.

Add your Acc.ini into the root directory and update docker-compose.yml with the environment variables you'd like to have.
`docker-compose up -d` and you're good to go

ps. give the web interface to install it's dependencies a minute or two

The interface will be available then at localhost:3000

Node way:

SPOILER

---

You need to have at least node 16 with npm 8 installed. Go with 18 it has been developed with it
Go to the webinterface directory and unzip webinterface.zip, read the readme.md there and you should be good to go

Updates
I'll simply attach new zip files below this thread with the versions of the webinterface accordingly starting with 1.0.0 - I think the limit is three so the past two versions will be also available.

---

There are some README.md in the webinterface/webinterface.zip and in the root directory in case I forgot something look there - there might be your answer too.

Enjoy!

[Tom1100]

Hey,
I got the following error when using docker logs <id>
[nitro] ✔ You can preview this build using node .output/server/index.mjs
node:internal/modules/cjs/loader:1080
throw err;
^

Error: Cannot find module '/app/output/server/index.mjs'
at Module._resolveFilename (node:internal/modules/cjs/loader15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
The installation is done on a fresh Ubuntu 22.10 VM
I used apt update upgrade | apt install docker docker-compose unzip

Any ideas?
Tell me if you need more informations.

Regards Tom

[wxclxr]

Hello Tom,

I’m currently on vacation therefore it will be really though for me to try actually what’s going on.

but let us try:

Have you used following tutorial to install docker?

https://docs.docker.com/engine/install/ubuntu/

Also the package for the latest version of docker isn’t docker-compose but docker-compose-plugin

here is something about this

https://linux.how2shout.com/install-and ... lts-jammy/

haven’t validated it but this may also help.

You can also provide me all the steps you’ve done so I can see more of that eg. how have you started the containers and what you’re doing before that.

Greetings!

[teo.teo]

Hello i set up the container and the bot works, but i am unable to access the web interface (using different pc on the host network), how do i make the container accessible?

[wxclxr]

Hello teo.teo,

you should be able to access the webinterface with the ip of the pc you're hosting the web interface with.

Please ensure the webinterface has

ports:
- 3000:3000

exposed in the docker-compose.yml file then you should be able to access it with the [IP-HOST]:3000.

[teo.teo]

Hello wxclxr,
The port is exposed, yet i still can't access it. I'm running other things like home assistant on it just fine (no conflicts in ports)

[wxclxr]

I’ve contacted you in a pm as it sounds like not interface related thing.

[wxclxr]

Hello there, literally I've now got an idea why for some of you this might be failing.

If somebody can confirm this then I will release version 1.0.1.

Please replace your content in the entrypoint.sh within /webinterface with

Code: Alles auswählen

#!/bin/bash

npm install
npm run build

node /app/.output/server/index.mjs

start your containers with docker-compose up --build -d and have fun.

[wxclxr]

Hello there, I'm proudly announcing version 1.0.1

What's new?

- [NEW] Multiple instances on the login page
- [NEW] Checking for updates
- [NEW] Logout from top menu (language moved to footer)
- [CHANGE] Spacing on mobile was reduced
- [CHANGE] Passwords are public that does mean when you set PASSWORD environment variable they can be read by anyone visiting the page
- [CHANGE] Docker deployment improvements where the dependencies are only once installed and never again unless you build again the image (or change version)
- [BUGFIX] Login page was buggy on iOS
- [BUGFIX] Status change was not always reactive e.g. bot was active but status shown was inactive

Note:
Settings can be also applied to all accounts at once although I don't recommend using this yet till a response from a core dev is here. It sometimes works, sometimes don't.

Detailed feature description and its options:

Checking for updates

CHECK_UPDATE=1

This functionality will do a request to mfbot release page where your bot version will be validated against. This happens only once a day per device basis.

Adding more than one instance to the login page for this you

INSTANCE_COUNT=
Numer of available instances e.g. 2
INSTANCE_NAMES=
Names for the instances e.g. selfhosted,zuhause

You can also provide default login and password to your instances the same way you specify the instance names.

LOGIN=sfbot,mybot,publicbot
PASSWORD=sfbot_password,mybot_password,publicbot_password

You simply have to separate the values with ","

Have fun

[kewu]

For me at login says "Invalid credentials" when I setted password in .env and trying login in with mentioned password in .env... And when I installing with docker, docker says this:

"ERROR: for sfbot No such image: sha256:af3be2f8e80972960b174c151dc308c58ffecbc7b2f3736b93c56a207d621f82

ERROR: for sfbot-web No such image: sha256:ebe2eae6fcc66a26afbf3fdd6553266a89133c1bcc7713e8acc82941f4db2724

ERROR: for sfbot No such image: sha256:af3be2f8e80972960b174c151dc308c58ffecbc7b2f3736b93c56a207d621f82
ERROR: The image for the service you're trying to recreate has been removed. If you continue, volume data could be lost. Consider backing up your data before continuing.

Continue with the new image? [yN]y
"

Can you help me please?