HylibCMS - ReactJS

[IndraBB]

CMS developed using ReactJS and NodeJS as back end server and authentication with JWT (JSON Web Token). You will need to create a reverse proxy to use the backend as node js runs on port other than 80 and 443. (on localhost you don't need to, just edit the apiUrl to localhost:3333).

It is easily edited, in the configuration.json file it has practically all styles of colors and images. Find for "cmsStyles"

Is it compatible with Comet Emulator.

If you liked the content, favorite it on github

Preview:

You must be registered for see links

Demo:

You must be registered for see links

Download:

You must be registered for see links

,

You must be registered for see links

Join the discord community to ask questions and see all new updates:

You must be registered for see links

- Laxus.

 

[DDDDec]

i love it, thanks for the release!

 

[IndraBB]

i love it, thanks for the release!

I'm glad you liked it

 

[Salvy]

Cool stuff thanks for sharing!
Will mess with it a bit.

 

[JayC]

Looks good. One optional improvement is updating the authentication to utilize a refresh token so users can stay logged in.

 

[IndraBB]

Looks good. One optional improvement is updating the authentication to utilize a refresh token so users can stay logged in.

i didn't set a time for the token to expire, the session will never expire.

you can set a time easily in LoginController like this:

function generateToken(params = {}) {
    return jwt.sign(params, auth.jwt_secret_key, {
        expiresIn: '1d' //1 day
    });
}

thanks for the feedback!

 

[JayC]

i didn't set a time for the token to expire, the session will never expire.

you can set a time easily in LoginController like this:

function generateToken(params = {}) {
    return jwt.sign(params, auth.jwt_secret_key, {
        expiresIn: '1d' //1 day
    });
}

thanks for the feedback!

This isn't the same though. Setting a token to never expire is a security concern. If the token is stolen or compromised, you could login impersonating that user (your server would never invalidate after a certain amount of time). With a refresh token can use their current auth token (before expiration) to regenerate a new token, with an expiration time.

So you could set the expiration to be short (maybe just 12 hours) and then in the background you just refresh their token while their logged-in. On the same day, they would never need to refresh their credentials, but their authentication is validated.

 

[BearKuda]

I really enjoy this design!

 

[Raizer]

Why seperate file for loading client? You could create a iframe in react self?

Also code wise it can be better.. for example

const consultShowedBadges1 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 0,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges2 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 1,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges3 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 2,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges4 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 3,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges5 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 4,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT });

 

[GooGoo]

I asked ChatGPT for you.

Separating the client-loading script into its own file can provide several benefits. Here are a few reasons why it might be preferable:

1. Separation of concerns: By having the client-loading code in a separate file, you can keep your React code focused on rendering the UI and handling user interactions. The client-loading script can handle the responsibility of connecting to the server and fetching the necessary data.
2. Code reuse: If you need to load the client in multiple places throughout your application, having a separate file for the client-loading code can make it easier to reuse that code. You can simply import the client-loading script wherever it's needed.

Regarding the code you provided, there are a few ways you can improve it. Here's one way to simplify the code and avoid repeating yourself:


const consultShowedBadges = [];
for (let i = 0; i < 5; i++) {
const badge = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT ?,1", {
replacements: [userId, i],
type: sequelize.QueryTypes.SELECT
});
if (badge.length > 0) {
consultShowedBadges.push(badge[0].badge_code);
}
}

This code uses a loop to fetch the badges from the database, rather than repeating the same code block five times. It also checks whether a badge was actually returned from the query before pushing it onto the 'consultShowedBadges' array.

Regarding using an iframe instead of a separate client-loading script in React, it's certainly possible to do so. However, it may not be the best approach depending on your specific use case. If you have a large or complex application, using an iframe could result in slower performance or other issues. Additionally, using a separate client-loading script can give you more control over how the client is loaded and how it interacts with your React code.

Why seperate file for loading client? You could create a iframe in react self?

Also code wise it can be better.. for example

const consultShowedBadges1 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 0,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges2 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 1,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges3 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 2,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges4 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 3,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges5 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 4,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT });

 

[IndraBB]

This isn't the same though. Setting a token to never expire is a security concern. If the token is stolen or compromised, you could login impersonating that user (your server would never invalidate after a certain amount of time). With a refresh token can use their current auth token (before expiration) to regenerate a new token, with an expiration time.

So you could set the expiration to be short (maybe just 12 hours) and then in the background you just refresh their token while their logged-in. On the same day, they would never need to refresh their credentials, but their authentication is validated.

Yess,I know. I will fix this soon.

Post automatically merged: Mar 17, 2023

Why seperate file for loading client? You could create a iframe in react self?

Also code wise it can be better.. for example

const consultShowedBadges1 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 0,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges2 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 1,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges3 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 2,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges4 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 3,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT }); const consultShowedBadges5 = await db.query("SELECT badge_code FROM player_badges WHERE player_id = ? AND slot != 0 LIMIT 4,1", { replacements: [userId], type: sequelize.QueryTypes.SELECT });

In reactjs I make an iframe that will be directed to the url configured in the configuration.json file, because you can use php inside the file to do your inserts, etc. And yes this code that got a little confusing, but I'll make it better. Thank you for feedback!

Post automatically merged: Mar 17, 2023

 

[Raizer]

The layout is also not responsive, language wise horrible to modify because it’s hard coded in files.

It needs a lot of improvements.

 

[IndraBB]

The layout is also not responsive, language wise horrible to modify because it’s hard coded in files.

It needs a lot of improvements.

it's very easy to modify, you have the open source and you don't need to edit the encoded code. I'll be working on making it responsive too, it's just the first version.

And the community can pull requests to help too

 

[Weasel]

This is a great start. Fantastic, you're doing it open-source. The code looks decent but can indeed get some improvements. But that's also why doing this is a great thing, as it's an excellent way to learn. I'll see if I can review some bits of code, even though I'm not a JS expert.

Don't let the overly negative comments above influence your motivation. Burning someone down is easy, instead, they could just give you actionable feedback. Probably just some form of jealousy.

 

[IndraBB]

This is a great start. Fantastic, you're doing it open-source. The code looks decent but can indeed get some improvements. But that's also why doing this is a great thing, as it's an excellent way to learn. I'll see if I can review some bits of code, even though I'm not a JS expert.

Don't let the overly negative comments above influence your motivation. Burning someone down is easy, instead, they could just give you actionable feedback. Probably just some form of jealousy.

thank you, I will not be discouraged.

Post automatically merged: Mar 18, 2023

Some improvements were made:

• Token lifetime;
• Some clean codes in HylibServer

 

[Raizer]

it's very easy to modify, you have the open source and you don't need to edit the encoded code. I'll be working on making it responsive too, it's just the first version.

And the community can pull requests to help too

It’s not because you have to modified every single page, use i18n instead for example..

 

[IndraBB]

It’s not because you have to modified every single page, use i18n instead for example..

you don't necessarily need to edit all pages, most import components such as header, footer and others, just edit them. Using i18n is a good idea for the texts, I will use this idea, ty

 

[TheNotorious]

Live demo wouldnt download so far, so theres not a review at all.

Ill hope its good.

 

[IndraBB]

New updates:

• implements languages portuguese,english and spanol;
• new style profile;
• recovery account and pin code access (staffs)
• create reverse proxy tutorial on discord

Preview images on

You must be registered for see links

 

[Benden]

Not going to join a Discord server to view some images. Put them in the thread