Use API

[tinybug-m]

Hello dear Alireza

I would like to create connection with API to S-UI panel as an admin

as its obvious current front-end (vue axios maybe) is connected with api to backend

i wonder you writed other way to comminucate with backend ?

i want to connect to pannel edit client and get some data from panel in the safe way,

notice : i want to do this with Python in the same server

thank you alireza

[tinybug-m]

I did it with the same API for Frontend if is there any good solution i would be happy to hear, thank you

[alireza0]

It was in my plan to simplify API and also use standard API in frontend.
Currently my focus is on basic abilities and most of actions are now developed in frontend.
I will mark this thread to have it in proper time.

[tinybug-m]

Thanks, Alireza, for your answer!

I’ve logged in using /api/login and successfully retrieved data with /api/load. Now, I’m working on a Python function to save new clients or update usage volume using /api/save.

But I wanted to check if I’m on the right track:

1-Every time a client is created, I load all data from /api/load.
2-Then, I update the specific inbounds that this client should have and add the new client to them.
3-Finally, for the client ("god"), I generate all usernames, passwords, and UUIDs myself, as these are generated on the frontend.

I’d really appreciate any tips or corrections if I’m missing something!

[alireza0]

Please check this thread: #294

[tinybug-m]

Please check this thread: #294

Okay, it looks like I’m on the right track!

I have to say, though, it’s a bit surprising how you handled the backend changes, especially with inbounds when a new user joins. But hey—the code works, and you're a legend for that!

Keep up the awesome work! By the way, I’m a front-end developer and have a bit of free time, so if you ever need an extra hand, I’d love to contribute to a great project like the S-UI panel.

[alireza0]

It would be appreciated!
I have no time to fix UI visual problems and I am aware of many ugly results.

[tinybug-m]

It would be appreciated! I have no time to fix UI visual problems and I am aware of many ugly results.

I hear you, brother. I’d also appreciate any information on this. Is there a task list available for fixing the UI visual issues? Any suggestions on where to start editing in the front end would be really helpful!

[tinybug-m]

hello again alireza do you think its safe enough to connect to API from another server ?

and how can i improve it

[alireza0]

Hello @tinybug-m,

My plan is changing api to a better solution. It is a temporary solution right now.
In my plans, a huge backend change is in test and progress.
Therefore I can't reserve any fixed solution for the future of fe-be communication.
Currently working on visual part of UI to make it prettier is sufficient.

To edit visual UI, I am currently using vite with existing proxy solution here.
To run frontend in debug mode, you can do following steps:

1. Run backend or complete panel in your local PC, ensure that using default port and path.
2. In frontend folder, just run npm run dev.
3. Check http://localhost:3000 for panel view on vite debug mode.
4. Change your desired files and save it. Vite will change it in debug mode imediately.

When you finished the changes and you make sure that it works fine ( in responsive mode as well ), then send me a PR for each step.

Thank you in advance

[tinybug-m]

Hi @alireza0,

I hope you're doing well!

I wanted to follow up on a couple of topics related to the current project:

1. UI Visual Edits

I'm eager to contribute to the visual improvements of the UI. I’ve already tested the manual run, and everything is working perfectly. There are no issues running the frontend in developer mode, and I’m able to interact with it without any problems.

To get started on the visual edits, I was wondering if there’s a task list or specific areas of the UI that you'd like me to focus on first. Having some direction would help me get started efficiently and ensure that I’m addressing the most important visual issues.

If you have any guidance or priorities in mind, please let me know, and I can dive into the necessary changes!

2. API Security for Telegram Bot Integration

I'm also working on a Telegram bot that will communicate with the S-UI backend, and I'm using the same session-based authentication (via cookies) that the frontend uses. My question is: do you think it's safe to make these API calls from another server (my bot server) to the S-UI server, or should I be cautious of any potential security risks?

For context, the bot will interact with the same API endpoints and will rely on session cookies to authenticate users. Here’s an example of the code I’m using for authentication and session management:

import axios from "axios";
import { wrapper } from "axios-cookiejar-support";
import { CookieJar } from "tough-cookie";

const jar = new CookieJar();
const client = wrapper(axios.create({ jar, withCredentials: true }));

async function login(SERVER_URL, USERPASS) {
    try {
        const logged = await client.post(`${SERVER_URL}/login`, USERPASS);
        return true;
    } catch (error) {
        console.error('There was an error when attempting to login:', error.message);
        return false;
    }
}

async function isLoggedIn(SERVER_URL) {
    try {
        await client.get(`${SERVER_URL}/check-session`);
        return true;
    } catch (error) {
        return false;
    }
}

async function getLoads(SERVER_URL, USERPASS) {
    const loggedIn = await isLoggedIn(SERVER_URL);
    if (!loggedIn) {
        const loginSuccess = await login(SERVER_URL, USERPASS);
        if (!loginSuccess) {
            console.log('There is a problem when admin wants to login.');
            return;
        }
    }

    try {
        const response = await client.get(`${SERVER_URL}/load`);
        return response.data;
    } catch (error) {
        console.error('Error fetching loads:', error.message);
    }
}

Thank you in advance for your time, and I look forward to your thoughts on both the UI and API security!

Best regards,