Need to make adjustments to login screen

Mateo XRP Posted in Technical Support 6 days ago

My OSSN site is using Coil for web monetization which requires the user install a browser extension to function. I would like my login page adjusted so that the login and signup forms are not displayed if the extension is not installed. The following code will accomplish the task and has been tested to work in a static html file. I just need to get OSSN to generate the same result. I would think this shouldn't be too difficult.

In the head section I need to add:

<script>
function showExclusiveContent () {
document.getElementById('exclusive').classList.remove('hidden')
document.getElementById('loading').classList.add('hidden')
document.getElementById('cta').classList.add('hidden')
document.getElementById('exclusive1').classList.remove('hidden')
document.getElementById('loading1').classList.add('hidden')
document.getElementById('cta1').classList.add('hidden')
}
function showCTA () {
document.getElementById('loading').classList.add('hidden')
document.getElementById('cta').classList.remove('hidden')
}
function showLoading () {
document.getElementById('loading').classList.remove('hidden')
}
if (document.monetization) {
document.monetization.addEventListener('monetizationstart', () => {
showExclusiveContent()
})
}
window.addEventListener('load', () => {
if (!document.monetization) {
showCTA()
} else {
showLoading()
}
})
</script>
<style>
.hidden {
display: none;
}
</style>

Replies
us Mateo XRP Replied 5 days ago

Yup that was it ~Z~ Man! Thanks for your help!

German ~Z~ Man Replied 5 days ago

Following the guide at https://www.opensource-socialnetwork.org/wiki/view/1137/how-to-find-something-a-word-pattern-in-the-source-code
and having a look onto your site
the code of interest appears to be in theme/page/elements/topbar.php
I think

us Mateo XRP Replied 6 days ago

I don't see it in there either.

us Roman Lohov Replied 6 days ago

Check it out over here /system/plugins/default/pages/contents

Should be in here if Awesome is anything like goBlue.

us Mateo XRP Replied 6 days ago

Ok I'm trying to do this for both <div class col-md-8> (login form) and <div class col-md-5> (signup form)

I was able to find <div class col-md-5> in public_html/themes/Awesome/plugins/default/pages/contents/index.php

I edited the file to include the code and tested it is in fact working.

Now I just need to do the same thing for <div class col-md-8> but I can't seem to find what file it is in. So I am halfway to getting this done.

If anyone can point me to the location of <div class col-md-8> I should be able to get it working for the login box also. Thanks.

us Mateo XRP Replied 6 days ago

Awesome theme.

German Arsalan Shah Replied 6 days ago

Which theme you are using?

us Mateo XRP Replied 6 days ago

Roman,

I'm not sure what file I need to edit in OSSN to make the needed changes the login screen. Does it depend on the theme being used? Can you point me to the file and I'll see if I can figure it out? Thanks.

us Roman Lohov Replied 6 days ago

So what is the problem? You have the script, you know where it goes, you have html layout of hidden element selected. You good to go?

us Mateo XRP Replied 6 days ago

In the <div class col-md-8> section (login form) I need to add:

<div class="col-md-8 text-right">
<div id="cta" class="hidden1">Please purchase a Coil subscription and install and configure the Coil browser extension to signup or login!</div>
<div id="loading1" class="hidden">Loading login page...</div>
<div id="exclusive1" class="hidden">
<form id="ossn-login" class="ossn-form ossn-login-form text-right" format="format" action="https://mg.social/action/user/login" method="post" enctype='multipart/form-data'><fieldset> <input type="hidden" name="ossnts" value="1590140978" />
<input type="hidden" name="ossn
token" value="0ff1a05e8a4768a9b621848a1c0192e0" /> <input type="text" name="username" class="form-control" placeholder="Username" />
<input type="password" name="password" class="form-control" placeholder="Password" />
<input type="submit" value="Login" class="btn btn-outline-primary" />
<a class="reset-login-topbar hidden" href="https://mg.social/resetlogin"Reset your password</a>
</fieldset></form> </div> </div>