Need to Cutomise Panel Login Page

Kirby 3
1

Hello,
I need to customize panel login page. I need to add a background image only on this page and also want to add my brand logo above the login form. Kindly please provide a way to do this.

Thanks

2

You can achieve this with custom Panel CSS.

For more complex stuff, you could create a custom login view, but shouldn’t be necessary in this case.

3

Look at https://forum.getkirby.com/t/customize-brand-the-panel-login-form/2294, which is for Kirby 2.x, but on Kirby 3 it is the same css technique with the exception of the option in the config.php file. Add the background picture with css too.

4

@texnixe, I am going with creating custom login view as I will need more customization in future. And also page is not having different set of css classes and ids.
How do I use custom login extension ? As of right now I put those two files index.js and components/LoginScreen.vue inside plugin site/plugins/Loginswap folder. But its not doing anything on Login page.
Thanks

5

You can find an example in this plugin: https://github.com/rtorresn10/kirby-2fa/blob/master/src/index.js

6

Hello @texnixe,
I have tried using this plugin, but its not doing anything. Its just having LoginScreen.vue file in components but it doesn’t swap the original login page. I have made changes in blueprints as well.

7

I have to check it out myself, will do later.

8

@kirbyc What exactly have you done? Installed the plugin or just used parts of it? Don’t forget that you need a build tool when dealing with single file components as described in the Panel plugin documentation. What you use is up to you, but we usually use Parcel.

https://getkirby.com/docs/guide/plugins/plugin-setup-panel#introducing-parcel

9

okay thanks … yes I also build with parcel and installing node modules, I do it for each plugin. Right now we have fixed it with css example you provided.
Now I want to redirect user to a custom page, which I created by plugin, after login, but it always redirects to previous visited page. I tried following code inside site/config/config.php but it did not work :

'routes' => [
        [
          'pattern' => '(:any)',
          'action'  => function ($uid) {
            $page = page($uid);
            if($page && $page->intendedTemplate() == 'site') {
              return go('/panel/plugins/dashboard', 301);
            }
            return $page;
          }
        ]
    ]

(Edited: Please use 3 backticks on a separate line before and after your code blocks to correctly mark up your code!)

10

What is this?

11

this is my plugins dashboard link.I want to redirect on that. Please tell me any solution asap. /
Thanks

12

I don’t really understand what you are trying to do. Where is the logic that redirects after login?

13

I found the above code solution, that is where login redirects on default ‘site’ page, so I make condition in routing that wherever there is ‘site’ page it should redirect to our custom dashboard page.
if($page && $page->intendedTemplate() == 'site') { return go('/panel/plugins/dashboard', 301); }

Kindly tell me any other solution if that doesn’t working. Where can I put the code to redirect after login ?

14

If I had an answer, I would tell you. I don’t know how this can be achieved without a custom login view or loggin in from the frontend. Currently, you cannot redirect from a hook. Your route won’t work, because you want this stuff to happen in the Panel context, but your route looks for a first level page (apart from that the site object is not a page and doesn’t have an intendedTemplate).

15

Okay thanks @texnixe,
Now I have customized the login page by https://getkirby.com/docs/reference/plugins/extensions/panel-login this link.
Now I have created two fields there username and password.
But kindly tell me how can I check authentication ? What need to be paas in login method which is in Vue file.
My code is as follows :
export default { computed: { fields() { return { username: { placeholder: "username", label: "Username", type: "text" },password: { placeholder: "password", label: "Password", type: "password" }, } } }, methods: { login() { /** Send 2FA auth link **/ } } };
What need to pass in send 2FA auth link ?

16

@texnixe,
As you told route looks for First level page, so how I can replace that by my custom dashboard page or how can I create first level page ?
Thanks