Adding Terms and Condition Link to Portal Modal

Developer help
1

Latest version (4.3.0).

I am in the process of adding an additional DIV-tag to the portal whereof I need to add extra text with a link.

Looking at the source code (minified), we see this:

at.createElement("div",{className:"gh-portal-signup-message"},at.createElement("div",null,"Already a member?"),at.createElement("button",{className:"gh-portal-btn gh-portal-btn-link",style:{color:n},onClick:function(){return t("switchPage",{page:"signin"})}},at.createElement("span",null,"Sign in")))}},{key:"renderForm",value:function(){var e=this,n=this.getInputFields({state:this.state}),t=this.context;return 0===Ve({site:t.site,pageQuery:t.pageQuery}).length?at.createElement("section",null,at.createElement("div",{className:"gh-portal-section"},at.createElement("p",{className:"gh-portal-invite-only-notification"},"This site is invite-only, contact the owner for access.")))

My idea was to add another message using code like this: at.createElement("div",null,"By subscribing, you agree to our Terms and Conditions."), whereof after my custom message, after adding a “
”, the “Already a member? Sign in” comes on a new row.

If anyone is willing to help, this is what I need (which most likely can help others):

<div style="css here">By subscribing, you agree to our <a href="https://example.com/tac/" target="_blank">Terms and Conditions</a></div>.

1 Like
2

Hello @thebear.dev,

I wanted to achive something similar. I’ve figured out how to do it!

You need something like (this is react.js example, because Portal is built with it):

<button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor}} onClick={(e) => { e.preventDefault(); window.location.href='/faq'; }}><span>FAQ</span></button>

The key part in the above code snippet is:

onClick={(e) => { e.preventDefault(); window.location.href='/faq'; }}

which allows to open FAQ link.

obraz

I’ve pasted the code snippet into:

  • SigninPage.js in renderSignupMessage() function
  • SignupPage.js in renderLoginMessage() function

and recompiled portal.min.js with yarn build command :)

3

Cool, thanks!

I’m wondering, since I’m loading the portal from my theme by overriding the portal.min.js file using config.production.json - if it would not be easier to just add that button where I want it inside the portal.min.js file instead?

Have you tried that?

4

No, minified portal.min.js is unreadable for me and it is hard to merge changes when new Portal version is released.

I prefer to use Portal repo, which is much more readable. I can generate minified portal.min.js with single yarn build command. Then I can just copy generated portal.min.js to my theme. This approach is easier for me. Also, it is much easier to merge changes with new Portal release.

5

Yes, I understand that - but the end result is the same. The code is added to the portal.min.js file, right?

6

Yes, correct.