Need help with Landing Page code

0E800

I like customizing the Landing Page. Its great for having a splash or intro.
However, if I set display:none;in the .app::before CSS to remove the Flarum Title bar / Login / Register header, I have no way of getting the guests to the main Flarum forum page.

What I would like to do is have the Landing Page either do its splash animation and redirect th guest to the Flarum main index, or have button that takes the guest to the main Flarum index.

Here is the Landing Page extension source:
https://github.com/johnhearfield/flarum-ext-landing-page

Here is the file I am pretty sure I need to modify:
https://github.com/johnhearfield/flarum-ext-landing-page/blob/master/js/forum/src/components/NewIndexPage.js

Here is the code:

import { extend } from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';

export default class NewIndexPage extends IndexPage {
    view() {
        if(!app.session.user) {
            return (
                <div class="newIndex page">
                    <div class="newIndex header">
                        {m.trust(app.forum.attribute('johnhearfield-landing-page.header'))}
                    </div>
                    <div class="newIndex content">
                        {m.trust(app.forum.attribute('johnhearfield-landing-page.container'))}
                    </div>
                </div>
            );
        } else {
            return super.view();
        }
    }
}

From my limited understanding of the code, its saying:
If the user is not logged in, take them to the Landing Page Index,
If the user has logged in, take them to the Main Flarum Index.

What I would like it to say is:
If the user is not logged in, take them to the Landing Page Index, wait X-seconds,
then take them to the Main Flarum Index.
If the user is logged in, then take them to the Main Flarum Index (no changes).

Any help or advice would be greatly appreciated.

Thank you.

0E800

Sorry to bump, but does anyone with a Lil Js experience able to help me modify this IF statement to show newIndex for only a few seconds before redirecting to super.view?

I think I need something like:

if(!app.session.user) {

    window.setTimeout(function(){
return (
                <div class="newIndex page">
                    <div class="newIndex header">
                        {m.trust(app.forum.attribute('johnhearfield-landing-page.header'))}
                    </div>
                    <div class="newIndex content">
                        {m.trust(app.forum.attribute('johnhearfield-landing-page.container'))}
                    </div>
                </div>
        return super.view()

    }, 5000);
      );
        } else {
            return super.view();
        }
}

Just need help with formatting and proper placement of code.

Kyrne

0E800 Several things wrong with the code:
1. You are checking app.session.user that is fine, but when you set a timeout, it doesn't set the if statement to false, meaning the super.view won't trigger.
2. Timeouts don't work on return, return will stop the function in its tracks.
3. Because of the above, you can't have 2 return statements in the same if statement

This should help you fix your code, apologizes if you wanted a response with your code fixed, I'm not into spoon-feeding code, you won't learn that way.

0E800

I appreciate it. I wasn't looking for any spoon feeding, just a solution to something I have very limited experience with. Thank you for pointing me in the right direction.

Kyrne

0E800 if you need more help feel free to contact me on the Flarum Discord or Gitter

AdemarMoraisBarbosa

Kyrne So you have to exclude the "return" from the top and leave the last? I am wanting to create landign page as well and do not know where to put the file. Is it in the body html or header html? Thank you!