Login and registration in HTML page

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hello!

Is it possible to have login and registration in HTML page? Not just have links to the current login/registration pages. Basically, an HTML page would be the Home page. It would have 2 options: login or register. Upon option selection you would have the appropriate forms. Only after filling them in you would be brought logged in to the actual forum index.

Would it be possible just by using available templates?
I have a feeling this might not be possible... In that case, what is the best way to have on login/ registration pages same styling as in HTML page?

EDIT: also, upon logout, are you brought to index page or homepage (HTML)?

Hello,

It is possible to make the form for the login. The same for logout. However, it is not possible to do to register, since the registration page is unique and can not be replicated / modified too deeply.

The login form code:

Code:

<form action="/login" method="post" name="form_login">
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" size="25" maxlength="40" />
  </div>
  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" size="25" maxlength="25" />
  </div>
  <div class="form-group">
    <input type="checkbox" name="autologin" id="autologin" checked="checked" />
    <label for="autologin">Auto-login.</label>
  </div>
  <div class="form-group">
    <input type="submit" name="login" id="login" value="Login" />
  </div>
  <div class="text-group">
    <a href="/profile?mode=sendpassword">Password reset.</label>
  </div>
</form>

o/

Oh, that's a great news still )
I will try this code right away.

Regarding, register. I think we can change (maybe have in HTML) the register rules?
And is there a way to change register page style to match headers?
(I assume that would include some JS, done some modifications this way already)
I would mainly want to remove announcement/ header/ footer. Basically to end up with HTML background and the form itself and customised buttons.

EDIT: so the code is working great. Just needed to add this (to enable as homepage):

Code: <a href="https://www.forumlt.com" target="_blank">forumlt.com</a>

Is there a specific setting for logout redirection?
I haven't noticed any.

Okeeey. So in short:

1) How to redirect unsuccessful login to same login screen? (wrong password, nothing inputed)
2) How to redirect logout to the default homepage/ loginscreen?
3) Is it possible to strip registration page from announcements, navigation bar,....

Hi,

1)After the user submits the data, the page is reloaded. After the reload, you want to be taken back to the initial page or you don't want any redirection at all?
2)When you logout, you are taken to a page asking you if you're sure. After clicking on yes, you are redirected to a page saying you're logged out. If you want to be taken to the homepage after click on yes, you'll have to add this JS code with placement on all pages:

Code:

if(/logout/.test(window.location.search)){
$("[name='confirm']").click(function(e){
e.preventDefault();
var tid=$("[name='tid'").val(), key=$("[name='key']").val();
window.location="/login?logout=1&tid="+tid+"&key="+key;
});
};

3.I don't really understand this one.

Hey. Thank you or the reply!

1) Well with the login there are couple outcomes:
- login successful (working perfect now)
- login unsuccessful -> message about wrong details -> 2 options given - link to main page and link to page "help.forumotions.com/login"

In this case I think "/login" page should always redirect to the main page or the HTML login page. I think this could be done with simple if - checking what is current page, if yes, loading desired page.... OR even better outcome would be, to show the error message in the same HTML login page. I think that's not possible...

2) What about the logout option in the nav bar? Will the code work using logout option from there? Also, maybe you could put comments in the code... I don't understand it fully -.-

3) Basically, is it possible to disable annauncement, navigation bar, ... on some desired pages? I assume by using some JS that applies "display:none;".

4) Is there and IF to check if the user is logged in. Example:
- IF webpage = desiredwebpage
- - then IF user isNOT LOGEDIN
- - - DO redirect page
- - ELSE do nothing

Hi,

I made a mistake in the code about the second issue:

Code:


$(function(){ /*Wait for the page to become fully loaded*/
if(/logout/.test(window.location.search)){ /*If the string logout is present in the page link*/
$("[name='confirm']").click(function(e){ /*When user clicks on yes*/
e.preventDefault();/*Prevent the default action(sending the user to the page saying successfull logout*/
var tid=$("[name='tid'").val(), key=$("[name='key']").val();/*Get data that has to be send to the server*/
window.location="/login?logout=1&tid="+tid+"&key="+key;/*Go to the page that automatically logs you out and sends you to the first page*/
});/*Close the click event function*/
};/*Close the if*/
})/*Close the main function*/

About the first issue:

Code:


$(function(){
if(/login/.test(window.location.pathname) && $("a:contains('Click here to try again')").length){
var link_page="link";
$("a:contains('Click here to try again')").attr("href", link_page);
};
})

In

Code: var link_page="link";

replace link(the second appearance) with the link of your custom login page.

The third issue:

Code:

$(function(){
var pages=["page1", "page2"];
var elements=["elem1", "elem2"];
var len1=pages.length, len2=elements.length, j=0;
for(var i=0;i<len1;i++){
if(window.location.pathname==pages[i]){
j=1;
break;
};
};
if(j){
for(var i=0;i<len2;i++){
$(elements[i]).hide();
}
};
})

Edit the array pages so that it contains the pages where you want the elements to be removed. Edit the elements array so that it contains the selectors of the elements.

4.To check if the user is logged in:

Code:

if(_userdata.session_logged_in){
/*The user is logged in*/
} else {
/*The user is logged out*/
}

To check if you are on a specific page:

Code:

if(window.location.pathname=="url"){
/*The user is on the page*/
} else {
/*The user is not on the page*/
}

I haven't tested any of the codes, so if there are any issues with them, let me know.

Oh thanks, some of these parts I have used before. I will test later on and will let you know

You're welcomed. Good luck!

(may I just say.... this was a B*******h to test each time login, logout, login,.... god XD)

1) All good. I now get what you did. Tho had to replace text, as my forum is not in english

2) Couple more questions about the code (I am eager to learn)
"/*Get data that has to be send to the server*/" - so sending to server time of logout, or that user has logged out?

Code: window.location="/login?logout=1&tid="+tid+"&key="+key;

where should I specify the correct end location? (HTML main page/login page). Not sure tbh.

3) This was is not responding for me... Maybe I am adding elements wrong?

Code: var elements=["#fa_toolbar", ".mainmenu", "#fa_ticker_block"];

Previously I used

Code: document.URL.indexOf

(that worked for me with URLs)
EDIT: mainmenu seam to have disappeared after I changed

Code: if(document.URL.indexOf(pages[i]) >= 0){

so I guess using IDs is an issue now...

4) Same issue like in 3rd problem. BUT. After replacing

Code: window.location.pathname

with

Code: document.URL.indexOf

it seamed to work

2)There is a page on every forum that automatically logs you out and than sends you back to the main page. If you want to be send to the login page, I can make a code for that too.

3)I'll look into the code and update that post latter. window.location.pathname or location.pathname is just a part of the link(example:/login?logout here login is the pathname and ?logout is the search)

4.I explained location.pathname at 3

2) well that is what I needed after pressing logout button user should be redirected to HTML login page ;D

3) Okey, let me know how it goes. I will test it a bit as well

EDIT: I found what was the issue with items removed for guests. There were some missing ; for

Code: $(function(){

2)

Code:

$(function() { /*Wait for the page to become fully loaded*/
    if (/logout/.test(window.location.search)) { /*If the string logout is present in the page link*/
        var sending = 0; /*No request sent to the server*/
        $("[name='confirm']").click(function(e) { /*When user clicks on yes*/
            if (sending) return; /*If request has already been sent, don't do anything*/
            sending = 1; /*Update the variable so that we know the request has already been sent*/
            e.preventDefault(); /*Prevent the default action(sending the user to the page saying successfull logout*/
            var tid = $("[name='tid'").val(),
                key = $("[name='key']").val(); /*Get data that has to be send to the server*/
            $.post("/login?logout=1&tid=" + tid + "&key=" + key, function(data) { /*Send a request to the server to log you out*/
                window.location = "link"; /*Redirect you to the page after the request finishes*/
            });
        }); /*Close the click event function*/
    }; /*Close the if*/
}) /*Close the main function*/

You managed to solve 3 yourself?

Oh, amazing, that did the trick!
I will test everything now to see if anything else needs to be adjusted.
So far looks great. I will mark the issue SOLVED when I complete testing

P.S. Yes I solved that one myself. Some clauses were missing and etc

Ok, glad I could help you

Hello,

Is this solved?

-Brandon

I will let you know
Still testing every link, page and etc

I have reset your thread as in progress so staff don't move this
Please only mark as solved if you are 100% sure it is solved.