jacobgrillo You can use the following custom styling to achieve that:

@media @phone {
  .App-content, #content, .PrivateFacade, .PrivateFacade-container {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .PrivateFacade-AuthView {
    flex-direction: column-reverse !important;
  }

  .PrivateFacade-AuthView-interface {
    display: none !important;
  }
}
    6 days later

    This looks really nice! Well done.

    I wonder if this works with extensions the replace the login flow entirely such as https://github.com/spookygames/flarum-ext-auth-keycloak. When you click login button the modal popup takes you directly to the keycloak login page.

    Also I hope you consider making this free at somepoint. I wouldn't mind donating but I can't do subscription and closed source.

      6 days later

      hey,

      my forum is not set up as a main page, but is in a subdir. If I now try to call up https://domain.de/forum, I automatically land on the page https://domain.de/login, which then throws me a 404 error. Is there a solution for this?

      UPDATE:
      Okay if I disable Force Redirect Guests to Login/Signup Interface it works, but as soon as I hyperlink to /forum/login I end up back on the home page if I'm logged in with the browser. When I then log in, I end up on the start page again and not under /forum

        Spooonky Fixed in v0.1.5, run composer update sycho/flarum-private-facade and it should be properly working!

          Is there any chance you could add the feature to disable the left (orange) and center the login area?

          I currently solved it with CSS, but it now looks a bit strange in the mobile version.

            You do not really need this extension to do what you're wanting to do. You could just use Landing Page instead and click the LogIn button when the page loads. The Modal is dismissable though that's the only difference - doing it with this extension and CSS is simple enough though:

            .PrivateFacade-AuthView-interface,.PrivateFacade-AuthView-interface::before{display:none;}
            .App--privateFacade--primaryBg .Header-title{float:left;}
            .PrivateFacade-AuthView-interface, .PrivateFacade-AuthView-form{width:100%;}
            .PrivateFacade .Modal{margin:0 auto;}

            I already had "Landing Page" in mind.
            However, this is not what I am looking for.
            "Facade" allows to redirect directly to /login and the rest of the forum is "hidden".
            I would also like to use CSS to customize the log-in area later, for which Facade is far more suitable.

            Spooonky You can use the following:

            .PrivateFacade-AuthView-interface {
              display: none;
            }
            
            .PrivateFacade-AuthView-form {
              align-items: center;
              width: 100%;
            }

            Your requirements could not be resolved to an installable set of packages.

            Problem 1
            - Root composer.json requires sycho/flarum-private-facade, it could not be found in any version, there may be a typo in the package name.

            Potential causes:

            Read https://getcomposer.org/doc/articles/troubleshooting.md for further common problems.

            Installation failed, reverting ./composer.json and ./composer.lock to their original content.

              21 days later

              Great extension! and very beautiful!

              However, It occurs errors in landing page, it's not effecting to use but showing a banner says need to refresh

              Here is the console report:

              sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              login:119 Uncaught Error: [ItemList] Cannot set content of Item. Key signUp is not present.
              at t.e.setContent (ItemList.tss:147:13)
              at e.<anonymous> (index.tsxx:67:13)
              at e.Mr.forEach.t.<computed> (extend.tss:39:16)
              at e.Mr.forEach.t.<computed> (extend.tss:37:41)
              at e.Mr.forEach.t.<computed> (extend.tss:37:41)
              at e.Mr.forEach.t.<computed> [as items] (extend.tss:37:41)
              at e.n.view (HeaderSecondary.jss:20:60)
              at e.<anonymous> (index.tsxx:29:16)
              at e.Rr.forEach.t.<computed> [as view] (extend.tss:86:24)
              at Function.a (render.jss:30:16)
              3sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.
              3sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              mount-redraw.jss:15 TypeError: Cannot read properties of undefined (reading 'onbeforeupdate')
              at render.jss:929:60
              at p (render.jss:407:8)
              at f (render.jss:302:11)
              at render.jss:964:4
              at a (mount-redraw.jss:14:10)
              at mount-redraw.jss:25:5
              a @ mount-redraw.jss:15
              7sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              5sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              (anonymous) @ sw:57
              mount-redraw.jss:15 TypeError: Cannot read properties of undefined (reading 'onbeforeupdate')
              at render.jss:929:60
              at p (render.jss:407:8)
              at f (render.jss:302:11)
              at render.jss:964:4
              at a (mount-redraw.jss:14:10)
              at mount-redraw.jss:25:5
              a @ mount-redraw.jss:15
              (anonymous) @ mount-redraw.jss:25
              requestAnimationFrame (async)
              u @ mount-redraw.jss:23
              L.handleEvent @ render.jss:890
              sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              (anonymous) @ sw:57
              mount-redraw.jss:15 TypeError: Cannot read properties of undefined (reading 'onbeforeupdate')
              at render.jss:929:60
              at p (render.jss:407:8)
              at f (render.jss:302:11)
              at render.jss:964:4
              at a (mount-redraw.jss:14:10)
              at mount-redraw.jss:25:5
              a @ mount-redraw.jss:15
              (anonymous) @ mount-redraw.jss:25
              requestAnimationFrame (async)
              u @ mount-redraw.jss:23
              m @ router.jss:111
              Promise.then (async)
              t @ router.jss:126
              E @ router.jss:95
              setTimeout (async)
              n @ router.jss:143
              d @ router.jss:20
              y.set @ router.jss:182
              onclick @ PrivateFacade.tsxx:83
              L.handleEvent @ render.jss:888
              sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              (anonymous) @ sw:57
              mount-redraw.jss:15 TypeError: Cannot read properties of undefined (reading 'onbeforeupdate')
              at render.jss:929:60
              at p (render.jss:407:8)
              at f (render.jss:302:11)
              at render.jss:964:4
              at a (mount-redraw.jss:14:10)
              at mount-redraw.jss:25:5
              a @ mount-redraw.jss:15
              (anonymous) @ mount-redraw.jss:25
              requestAnimationFrame (async)
              u @ mount-redraw.jss:23
              L.handleEvent @ render.jss:890
              sw:57 Uncaught ReferenceError: fetchEvent is not defined
              at sw:57:18
              (anonymous) @ sw:57
              mount-redraw.jss:15 TypeError: Cannot read properties of undefined (reading 'onbeforeupdate')
              at render.jss:929:60
              at p (render.jss:407:8)
              at f (render.jss:302:11)
              at render.jss:964:4
              at a (mount-redraw.jss:14:10)
              at mount-redraw.jss:25:5
              a @ mount-redraw.jss:15
              (anonymous) @ mount-redraw.jss:25
              requestAnimationFrame (async)
              u @ mount-redraw.jss:23
              m @ router.jss:111
              Promise.then (async)
              t @ router.jss:126
              E @ router.jss:95
              setTimeout (async)
              n @ router.jss:143
              d @ router.jss:20
              y.set @ router.jss:182
              onclick @ PrivateFacade.tsxx:83
              L.handleEvent @ render.jss:888
              mount-redraw.jss:15 TypeError: Cannot read properties of undefined (reading 'onbeforeupdate')
              at render.jss:929:60
              at p (render.jss:407:8)
              at f (render.jss:302:11)
              at render.jss:964:4
              at a (mount-redraw.jss:14:10)
              at mount-redraw.jss:25:5!<

                Teddan Can you give me a link to your forum so I can track where the error is coming from?

                  SychO
                  www.xn--fmrv2rkpbv8uymm.cn

                  Thank you for help!

                    Teddan Oh I see where the issue is, it should be fixed in v0.1.6, just run composer update sycho/flarum-private-facade

                      14 days later

                      SychO After using this extension, when i disable the extension my forum doesn't work correctly without it.