User login before content

Hello, I would like to know if it’s possible to set up kirby so that the content is only available to users who sign in (with the account created in /panel)

I would like to have a login link that would be link to kirby path (mysite.com/kirby) where would be a login form and after the user signs in he can see the content from kirby.

is this possible to do?

Yes, that is possible, check out the docs:

Wow thanks for a quick reply, the login and logout seem to work, after logging out first time it redirects to /login but when clicking on any of the menu links it is trying to access the main page and it says “mysite.com redirected you too many times.”

Did you do it exactly like in the docs? With a fresh Starterkit? I wonder if the redirect for each template is correct as in this line:

<?php if(!$site->user()) go('/') ?>

// rest of the template

and if it should not rather redirect to the login page?

Yes I followed sections 2-4 in authentication. I’m using a fresh kirby download. And yes the redirect is correct, I included it in each template at top, except for the login template. Here is a screenshot of home template.

What I noticed is that upon refreshing the url changes like so, between the 2: mysite.com/kirby mysite.com/kirby/. So each refresh if there is no slash it will add the slash and if there is a slash it will remove it. That’s probably this redirect at work but something is wrong.

That’s a bit strange. But apart from that, what happens if you change that line in the template to:

<?php if(!$site->user()) go('login') ?>
1 Like

That seems to work, now every page returns to /login. Is it okay to leave it like this?

I have another question regarding the login, is it possible to use the exact same looking login form from /panel on this login page?

Thank you for help.

Do you mean recreate something that looks the same or actually use the panel login form to log in to the frontend? A non-Panel user cannot log in via the Panel login form, so no.

BTW: Please note that you would also have to build the asset firewall to make sure that assets like images or files are not accessible to non-authorized users.

Yes I mean recreate the panel form so it looks and works the same but for the frontend. Thanks for the heads up I will set up the firewall too.

Also as far as I understand it is required to set up a new account role for the visitor too so they can’t access admin panel with the same login information for frontend correct?

Yes, you have to define a user role without panel access.

As regards the form, you could copy the styles from the Panel blueprint to make it look the same. But you would have to build a separate form as described in the docs.

Is there a specific doc showing how to build the separate form? I haven’t been able to find anything about this.

It’s in the authentication article, isn’t it? The form is on the login page:

<form method="post">
  <div>
    <label for="username"><?php echo $page->username()->html() ?></label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password"><?php echo $page->password()->html() ?></label>
    <input type="password" id="password" name="password">
  </div>
  <div>
    <input type="submit" name="login" value="<?php echo $page->button()->html() ?>">
  </div>
</form>

Yes this is the form but I mean how to make it behave like the panel one. I can’t seem to find how to reuse the same form in this template.

Maybe it’s time to get some sleep :sleeping:, I don’t seem to be able to understand correctly anymore :confused:. What exactly do you mean with behavior, the styling or something else?

I’m sorry, I think I confused you with saying behave, my bad, basically what I want is exactly the same looking form for the front end. But I’m not able to figure out how to reuse it.

I found this code which if I’m not wrong is responsible for the form but just copying the code doesn’t work. I’m not very good with PHP.

<?php 

return function() {

  $form = new Kirby\Panel\Form(array(
    'username' => array(
      'label'     => 'login.username.label',
      'type'      => 'text',
      'icon'      => 'user',
      'required'  => true,
      'autofocus' => true,
      'default'   => s::get('kirby_panel_username')
    ),
    'password' => array(
      'label'     => 'login.password.label',
      'type'      => 'password',
      'required'  => true
    )
  ));

  $form->attr('autocomplete', 'off');
  $form->data('autosubmit', 'native');
  $form->style('centered');
  
  $form->buttons->submit->value = l('login.button');

  return $form;

};

No, you can’t use that code to produce the form. It’s Panel code which will not work unless you include the Panel class(es) which would be a bit overkill for a simple form (it wouldn’t give you the styling, anyway). I’d create the form, if you want with the same classes as in the Panel, and then copy the styles from the Panel CSS into your frontend CSS. But maybe it’s a lot quicker to style your form yourself to look like the one Panel form then to try and find all the relevant styles.

Good night and good luck :wink:

Yes I figured, I tried to load only the form class but couldn’t get the path to work. Anyway I just copied the panel’s form html and replaced it.

You are right, it would be easier to just create my own form. I thought the panel was more modular and the login was separated from it but it’s all part of the panel, styles and even the js.

So 1 way around it would be to just include panel css and js on the frontend same way it is in the panel so I don’t have to serve 2 different versions. Is there a way to serve these files on the frontend?

Good night and thanks for all your help so far :slight_smile:

You could reference the path to the Panel styles, yes, but don’t do it :worried:. Just too much stuff you don’t need at all. The final Panel CSS file is created from a long list of modular SASS files, you can find in /panel/assets/scss. _form.scss contains all form related styles. So if any, I would compile those into CSS, if you are not using SASS anyway.

Yes that’s true. Oh I had no idea there are SASS files for the components on github, thanks alot for this!. It’s much more easier to just compile this than look through the whole css file. Maybe it wouldn’t be a bad idea to include the full package for download on the main page? Just a thought.

Thanks for help :slight_smile: