HylibCMS - ReactJS

IndraBB

New Member
Apr 3, 2019
15
10
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:
Demo:

Download: ,

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


- Laxus.
 
Last edited:

JayC

Always Learning
Aug 8, 2013
5,493
1,398
Looks good. One optional improvement is updating the authentication to utilize a refresh token so users can stay logged in.
 

IndraBB

New Member
Apr 3, 2019
15
10
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:

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

thanks for the feedback!
 

JayC

Always Learning
Aug 8, 2013
5,493
1,398
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:

JavaScript:
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.
 

Raizer

Active Member
Feb 21, 2019
144
76
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 });
 
Last edited:

GooGoo

Active Member
Jan 20, 2021
118
71
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

New Member
Apr 3, 2019
15
10
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:

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:
 
Last edited:

Raizer

Active Member
Feb 21, 2019
144
76
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

New Member
Apr 3, 2019
15
10
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
 
Last edited:

Weasel

👄 I'd intercept me
Nov 25, 2011
4,128
2,456
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

New Member
Apr 3, 2019
15
10
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:

Some improvements were made:
  • Token lifetime;
  • Some clean codes in HylibServer
 
Last edited:

Raizer

Active Member
Feb 21, 2019
144
76
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

New Member
Apr 3, 2019
15
10
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
 

IndraBB

New Member
Apr 3, 2019
15
10
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
 
Last edited:

Users who are viewing this thread

  • New
Top