Goblue Registration Page Download 6.1dev6

German Michael Zülsdorff 1 year ago

Goblue Registration Page

A component showcase in response to
Home page: transform registration form into a link which will
1. Create a separate (standalone) registration page as a first step (dev1)
2. Replace the core index.php file by a customized copy (dev2)
3. Add a login dialog to the index page and center the output (dev3)
4. Utilize Ossn's language files to replace a default translation (dev4)
5. Create a customized widget without header derived from Ossn's default widget (dev5)
6. Replace the core login2.php file (login form) by a customized copy (dev6)

Comments
au David Booth Replied 5 months ago

Thanks Michael for a very helpful series of exercises. It remains for me to tackle my own component! On a test install with backup and all due diligence.

German Michael Zülsdorff Replied 5 months ago

Ok, as a further exercise
dev6 is altering Ossn's default login form to the layout shown in the screenshot David provided some days ago.


enter image description here


Again, we don't want to change an Ossn's core file, but apply our changes to a copy inside of this component to circumvent being overwritten with upcoming Ossn releases.
So the next step is to find the file with the code of the original login form, and there is already a hint in our index.php

ossn_view_form('login2',....

That's: The function ossn_view_form expects some input from a file named login2.php in order to return the HTML <form>....</form> element we need to login.

Like all other Ossn core plugins, login2.php is located in a subdirectory of ~/system/..., specifically in ~system/plugins/default/forms.

Now that there is already a GoblueRegistrationPage/plugins/default/ directory, all we have to do is create a forms subdirectory and copy login2.php into it. To distinguish it from the original, we simply rename login2.php to GoblueRegistrationPageLogin.php here. Of course, we must then also pass the changed file name to the ossn_view_form function, and change the call to

ossn_view_form('GoblueRegistrationPageLogin',....

Compare login2.php to GoblueRegistrationPageLogin.php and see what has been changed...
And in case your not happy: There's a lot of examples in https://mdbootstrap.com/docs/standard/extended/login/ and other bootstrap tutorials. All this is no longer Ossn specific, so please don't ask which way to make a green button red and stuff. ;)

German Michael Zülsdorff Replied 5 months ago

Correct.
Either to YOUR_THEME/plugins/default/forms/
or THIS_COMPONENT/plugins/default/forms/

dev6 will make use of the latter option

au David Booth Replied 5 months ago

It'd be pretty if the two fields were about 80 char wide, the 'reset password' link as a button and all three buttons on one line.

au David Booth Replied 5 months ago

Found it! ./system/plugins/default/forms/login2.php
But that one is not for editing. It needs to be replicated in my theme, right?
I'll wait for dev6.
This is exciting!

German Michael Zülsdorff Replied 5 months ago

Uhh ... still difficulties to locate login2.php in the source tree?!?

Use the find command again, because we need to customize it with dev6 to get closer to your layout idea. ;)

au David Booth Replied 5 months ago

Sweet. So display the bare form.
Which is somewhere?
and loaded somehow? into
$contents = ossnviewform('login2', array(
'id' => 'ossn-login',
'action' => ossnsiteurl('action/user/login'),
));

German Michael Zülsdorff Replied 5 months ago

Ok, before procceeding it worth to have a look into the widgets code located in

~/YOUR_THEME/plugins/default/widget/view.php

on one hand and additionally use the browser's developer console to look into the resulting HTML.
As we see it's just a simple structure:

<div class="ossn-widget">
    <div class="widget-heading">... the title part ...</div>
    <div class="widget-contents">
        ... the content part ... (in this case the login form)
    </div>
</div>

And of course we can add the same structure (without the heading part) into our own index.php instead of calling ossn_plugin_view('widget/view')

Right that's what dev5 is doing - plus moving the Sign Up button inside of the widget-contents div.

enter image description here

German Michael Zülsdorff Replied 5 months ago

Yeah, commenting out that line 41 is a good idea at first sight, but unfortunately the widget refuses to display if no title string is passed. :(

To understand why, let's locate it ...
Called as echo ossn_plugin_view('widget/view', ....
it must be part of a plugins/default subdirectory
and if you have shell access, just run

find . -name widget

inside of your Ossn installation and you'll see: it's part of any Ossn theme!
The next idea might be to change the logic inside of view.php - but since these widgets are used in several other places it needs a different solution. I'll try to implement it with dev5 tomorrow ...

German Michael Zülsdorff Replied 5 months ago

Perfect? Hmm ... but didn't you want to replace "Create an account" by "Sign Up" ?

Let's take the chance and have a closer look into Ossn's localization part...

Very similar to the plugin mechanism I explained in my first comment, translations are retrieved by

  1. first looping through all the files located in ~/locale/.....
  2. next looping through all the files located in ~/ANY_ENABLED_THEME/locale/.....
  3. next looping through all the files located in ~/ANY_ENABLED_COMPONENT/locale/.....

Thus, if you want "Create an account" to be replaced by something different, instead of editing the core language file, you just have to create your own language file inside of your component and apply the change there. This way you never have to care about upcoming core updates - your own translation will stay safe in place as long as your component is enabled.

See the changes made in dev4 and for more details about translating Ossn read https://www.opensource-socialnetwork.org/wiki/view/2132/how-to-translate-ossn

Component

Developer: Michael
License GPL v2
Type: Uncategorized
Requires Ossn Version : 6.1
Latest Version: 6.1dev6
Last Updated 5 months ago
Repository Url View Repository

Versions