search

ndugdale / osrs-web-greeter-theme

An Old School RuneScape themed login screen for LightDM using Web Greeter or Nody Greeter
https://ndugdale.github.io/osrs-web-greeter-theme/
MIT License
31 stars 0 forks source link

Component reuse for webapp #6

Closed arben777 closed 9 months ago

arben777 commented 1 year ago

Hey Ndugdale I would really like to get in contact. Can you please contact me via twitter @aXXXXX(omitted) or at email aXXXXX(omitted)@me.com and let me know here when you do. I will of course delete this issue. I just have a question about this repo and would really appreciate your swift help.

Thank you

ndugdale commented 1 year ago

Hi arben,

Thank you for reaching out regarding the repository! I prefer to keep communication related to the project within the GitHub issue tracker for transparency and collaboration. Feel free to ask your question or provide feedback here, and I'll be more than happy to try and assist you.

Thanks!

arben777 commented 1 year ago

Understood!

So from my understanding this code allows for the use of the OSRS login page to be used for a compute's login or for a computer's application login, and its use of react /web app components is for design and styling.

I am wanting to have this login page be used as a 'Preloader' / entrance page for a webapp and was having some trouble sorting out how to strip away the OS related code to achieve really just a front end webpage of this OSRS login. For full transparency I was trying to remove authentication / extra functionality like the showing or error, and demo ended pages so that this would just serve as almost an 'Enter' button for website. It seemed like an easy task but has been giving me some trouble.

Thoughts on how much of a shift in this code it really is to achieve this? Also my main webpage is in NextJS using base JS not JSX (which wasn't hard to change) but there are unexpected react errors and such coming up.

Obviously I expect no full or in depth answer for how to do such a conversion from this project you have graciously shared to the entrance style 'login' page I mention, but would love any insight or thoughts on how I may be progress or achieve this.

TLDR: How strip this to just web app page? and in nextjs possible? no actually functionality other than 'enter' button for a site.

♥ Thanks, I appreciate your time

ndugdale commented 1 year ago

I think this is entirely achievable for you.

  1. The majority of the files in the src directory are React code that do not directly interface with the display manager, making them easily portable. Here's some parts of the codebase that do directly interact with the display manager, however, and therefore would likely need to be revised for your project.

    1. You will find statements in the codebase that check for the value of process.env.REACT_APP_ENV. When this value is set to dm (standing for display manager), logic is executed specific to logging in using the display manager API. Any following "else" statements include the logic for the web demo. You will want to remove these bits of logic and replace them with your own logic (perhaps just use the web demo logic as a starting point). src/index.tsx and src/components/FormWrapper.tsx are some files that will need to be adjusted. This is where I think you will make the most changes, since you will want to use these component files in your project.
    2. For context, the process.env.REACT_APP_ENV variable is pulled from either the .env.dm or .env.web file, neither of which you will need, since you no longer need logic to distinguish between when the app is built for full display manager functionality or a web demo.
    3. And some more context: the build script build.sh is triggered when the command npm run build is run, as defined in the package.json file. This build script is only for a display manager build (not web), and so again, you do not need this file.

  2. Porting to NextJS is certainly possible. There are resources online to help with porting from Create React App to NextJS, but given the relatively small size of this repository I would recommend just creating your own NextJS project from scratch and copying over component files as necessary. This will require some file modifications as mentioned above, but will avoid you polluting your codebase with unneeded build scripts and .env files unique to my project.

  3. You can trigger any behaviour you want on the completion of login. Add your desired logic within the onSubmit function in FormWrapper.tsx.

I hope this can help you get started!

arben777 commented 1 year ago

Amazing. This was truly helpful. I did take the approach of copying over components to my NextJS project to avoid unnecessary and unique build scripts.

Understood and very helpful point about the setting of the dm value "triggering" the full login functionality where without it the codes / else statements stand to be the web demo version.

Again I appreciate the depth and the time you took in these replies as well as with this repo in general.

Cheers! 🥂