• Dev

  • HTML append to vdom

Hi, so I'm trying to figure out how to add HTML that I've added from my extensions settings modal to the vdom. Doing vdom.children.push(app.forum.w/e it was) just renders out the html as text (encoded), and I can't figure out how to render the html properly.

Here's what I mean:
Settings Modal
JS Code
Rendered

I have a feeling its the XSS protection in action

    Lol this looks interesting i hope you get it to work!
    Do you plan to add widgets? Three columns design or two? Online users, latest posts,topics etc.. widgets?

      7h3ev1l I haven't thought that far ahead, it's just adding some HTML for each part at the moment. But I like your thinking!

        You need to return the HTML in the view function. You will probably need to m.trust() it as well.

        LEOcean1 How do you insert the code into the view?
        I'm guessing you just do {whatever}.
        You need to do {m.trust(whatever)} so it "compiles" as HTML and not text.
        Let me know if that works.

          Berlyn So instead of extending the view, I extend the init and then return the view that way? How about the parent index view?

            Okay never mind. Its working, apart from now I cant use the app.session.user to check if the user is logged in or not

              Main.js (forum)

              import app from 'flarum/app';
import { extend } from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';
import changeIndexPage from 'johnhearfield/landing-page/changeIndexPage';

app.initializers.add('johnhearfield/landing-page', function() {
    changeIndexPage();
});

              ChaingeIndexPage.js (forum)

              import app from 'flarum/app';
import { extend } from 'flarum/extend';
import NewIndexPage from 'johnhearfield/landing-page/components/IndexPage';

export default function () {
    app.routes.index = {path: '/', component: NewIndexPage.component()};
}

              Components/IndexPage.js (Forum)

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

export default class IndexPage extends Page {
    view() {
        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>
        );
    }
}

              Had to change from extending the IndexPage view to a component, and now I cant seem to be able to hook into the user session

              You call the NewIndexPage.component() but never created that.

                Davis NewInexPage.component() is import NewIndexPage from IndexPage (my component)

                    LEOcean1 From what you posted you created IndexPage by extending Page

                    Edit: I see what you did.

                      I've sorted it now. I had to extend IndexPage and add the user check in the view() function, and return super.view() if logged in. Cheers @Davis for the help!

                      You could probably use app.store('user'); or something similar to get the current user. I'm not sure that'll work as I'm on moble and can't test it for you.