How to add a label to sign-up field?

flaremeup

Hi everyone
I'm setting up a forum where I'm using fof/doorman extension to allow only people with 'invite code' to sign up.

New users need to make a small one-time membership fee to get the invite code. I want to add a label below the 'invite code' field that says something like, 'Click here to get an invite code' which will lead them to the payment landing page.

How do I add a label to it?

@SychO suggested on Discord that we can either use an extension or use CSS to add the sentence. Can someone help me out with the CSS bit and where to add it?

Would be of great help.

SychO

You could do something like this, but you won't be able to have clickable links.

.SignUpModal .Form-group:last-child::before {
  .Alert();
  color: @alert-color;
  content: "My Custom Message!";
  display: block;
  margin-bottom: 8px;
}

flaremeup

SychO Thank you so much for the reply.

I am wondering if there's a hack-y way of achieving this for my MVP. Maybe use 'HTML Head Items' extension and include a self-hosted javascript file where I inject the label with clickable link dynamically. What say? Anything easier than this method?

Justoverclock

flaremeup if you can do a custom js file then you can do a simple extension to add this 🙂 . You can use Flarum-cli and we are here to assist you.

https://github.com/justoverclockl/flarum-ext-pwgen

Here an example for signupmodal extender

flaremeup

Justoverclock I have never created an extension for Flarum. Although I'm a computer engineer & can code if my life depended on it 😅, I am looking to quickly ship my mvp and test my idea on real users. Is the learning curve steep for creating a flarum extension? I've made plugins & themes for Wordpress, so have some hands on PHP experience and can navigate my way around Javascript too. But not a pro, Stackoverflow is my bro. What do you suggest?

Braden

Justoverclock you are good with css, how can i display none, the word signup , not affecting the login word.

edited Later
Uh, i just disabled it. But dunno if now the google login will register a user with success.

It does not

Justoverclock

flaremeup with Flarum-cli you will be able to make extension in a minute with your experience

If you have problem I can help you with this extension

clarkwinkelmann

You could use FoF Terms extension, and use the terms of use page link to explain how to get the code. Only downside is you can't hide or make the checkbox optional so users will have to check it during registration.

flaremeup

clarkwinkelmann That's a nice hack, let me check if it generates friction in the register process or not. Thank you so much!

Edit: Tried it, but the process becomes confusing for a new user. Would go with the self-created extension route to add a sentence. Let's see how it goes. Will update you.

flaremeup

clarkwinkelmann I realized that we can add code to extend.php in the forum's root if I don't want to make an extension. What would be the easiest way to add a label below the 'Invite code' with extend.php?
I want to add this sentence only ↓
<a href="#" target="_blank">Click here</a> to get your invite code.
And creating an extension just for it is sounding like an overkill. Please guide.

ctml

It may not meet your requirements as it would change the entire process, but you could leverage monetization extension to place users that pay into a group which get premium access. Regular members and guest can be provided access to only 1 tag that includes information about your premium subscription with links & info. You can remove that tag from the premium groups access so they don't have to see that information when they subscribe. Doing this means payments would have to be done through stripe though, and all existing users would need to be added to that group.

flaremeup

ctml I looked at the monetization extension and it makes sense if Stripe would have been fully functional in my country. ☹️ Hence, will be using a local payment gateway provider.

clarkwinkelmann

flaremeup you will need to use the javascript extension API and extend SignUpModal.fields, so you will have to setup the javascript compilation whether you use an extension or just the local extend.php.

There isn't much difference between a local extension (using a Composer workbench/packages folder) and the local extend.php when it comes to javascript. The benefit of doing it as an extension would be that you can use one of the extension generators to create the stating files.

It's possible to write the javascript without compilation if you know how to manually type every import in their expanded form, but that's not something that's explained anywhere.

flaremeup

clarkwinkelmann Thanks a lot for explaining it. I just installed a local Flarum on my Windows PC on XAMPP. Which extension generator would you recommend? Should I use this one? https://github.com/FriendsOfFlarum/extension-generator

SychO

flaremeup Flarum CLI https://discuss.flarum.org/d/28427-flarum-cli-v10

after install, run in your new extension dir

flarum-cli init

flaremeup

SychO Thanks a lot. I tried installing it and my system didn't have yarn, so I ran it again. The second time it completed successfully but now when I login to my Flarum admin, it's not working properly. All the extensions are gone. Clicking on signup doesn't work etc. I'm deleting everything and starting fresh. Let me update you shortly.

Also should I include a PATH in the flarum-cli init command? Because I ran it in the root earlier. Is that a problem?

Justoverclock

Let me know if you have problems, I will do this extension for you. But first…try 🙂 you have much more experience than me 🙂

Justoverclock

flaremeup first of all u need to create a workbench
https://discuss.flarum.org/d/1608-extension-development-using-composer-repositories-path

and inside this workbench u can create a folder, and inside a folder u can run flarum-cli

flaremeup

Justoverclock Awesome, thanks a lot. The extension is up! 😄

The only problem is when I enable it & try to navigate to the forum, it throws an error:
An error occurred while trying to load this page.

If I disable the extension, everything works fine.

The extend.php in the extension folder says ->js(__DIR__.'/js/dist/forum.js') while the directory structure doesn't have the dist folder. The forum.js file is in the __DIR__.'/js/forum.js' instead. What's wrong?

Justoverclock

flaremeup you need to transpile javascript, so in the js folder run npm run dev, and keep the console opened until you finish

flaremeup

Justoverclock Okay, I think I'm getting the hang of it. Transpiling it created the dist folder. Correct me if I'm wrong, but I need to make changes to the index.js file under js/src/forum, right? And once done, transpile it again?

Justoverclock

flaremeup if you keep che terminal opened you do not need to transpile everytime, he will do it for you in real time.

yes u take a look here
https://github.com/justoverclockl/flarum-ext-pwgen/blob/main/js/src/forum/index.js

Stylix58

flaremeup Yes, it's right! (the transpiration is automatic, as long as you keep the console open)