Adding Terms and Condition Link to Portal Modal

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

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 :slight_smile:

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?

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.

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

Yes, correct.