Plugin branding of the login form

Kirby 3 Solved ✅
#1

Hello everyone!

At a meeting dedicated to the release of Kirby 3.5 https://youtu.be/a8BykUxjFZY?t=4711, I saw a branded login form. I tried to copy it.
Since this is the input to the panel, I’m afraid to make a mistake in the code.
Created the face-login directory in plugins.

File index.php

<?php

Kirby::plugin('obrsk/face-login', [
  'login' => [
  ]
]);

File index.js

panel.plugin('obrsk/face-login', {
  login: {
    template: `
      <div class="face-login-form">
        <h1>Brand text</h1>
        <k-login />
      </div>
    `
  }
})

File index.css

.face-login-form {
  background: white;
  padding: 15px 25px 0 25px;
  min-width: 365px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.face-login-form h1 {
  margin: 0 0 30px 0;
  background: repeating-linear-gradient(white, white 2px, #3383c2 2px, #277dc1 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #183d58;
}

Please tell me if everything is correct in the code?
And another question. How to place between h1 tags
<?= $site->nameOrg() ?>

Thanks.

#2

The plugin name needs to be the same as in in your index.php.

1 Like
#3

OK. although in my version the plugin works. Now I’ll try with the plugin name.

#4

Ok. Everything works. Thank You Sonja
And one more question, Sonja
How to place between h1 tags
<?= $site->nameOrg() ?>

Is it possible?

#5

It’s definitely possible, but I don’t know if there is any default stuff that you can use here if if you need to get this information from a custom endpoint.

#6

By default, the field is empty. Then in this field I write the name of the organization (text) and it does not change. If I understood the question correctly.

#7

Yes, I understand what you want to achieve, but I don’t know if this is possible without creating a Vue method that fetches this information via an endpoint. Or if it is possible to access this data from the $store in the Panel or any other way. Not really familiar with the Vue part.

1 Like
#8

Well. Thanks.
Perhaps this is even superfluous. I will enter the text once. And that’s good.
Thank you again, Sonja.

1 Like
#9

If you want a specific field (e.g. nameOrg) anf not just the site‘s title, you would need to make your own API call to get it

#10

And how would we get the site title without an API call, @distantnative?

#11

I’m not 100% sure if it is available before the login but I think it is:

panel.plugin('obrsk/face-login', {
  login: {
    computed: {
      title() {
        return this.$store.state.system.info.title;
      }
    },
    template: `
      <div class="face-login-form">
        <h1>{{ title }}</h1>
        <k-login />
      </div>
    `
  }
})
3 Likes
#12

Yes! That works. Thanks!

#13

I’m trying to style my login page with an additional logo text, following the second approach explained here: Panel login | Kirby

So I have three files:

// site/plugins/theme/index.php
<?php 

Kirby::plugin('bruno/theme', [
    'login' => [
    ]
]);

// site/plugins/theme/index.js
import LoginScreen from ".components/LoginScreen.vue";

panel.plugin('bruno/theme', {
  login: LoginScreen,
});

and copy-pasted the LoginScreen.vue code into site/plugins/theme/components/LoginScreen.vue.

This doesn’t seem correct, because nothing new is happening on the login page.

I then found this thread and left out the import LoginScreen JavaScript bit, instead doing

login: { template: `<div> etc, etc </div>`}

like OP demonstrated. This works, and I can use site/plugins/theme/style.css to add custom styling.

I then tried to import a Google Font here, but it isn’t loading. So I downloaded the font’s ttf file into the plugin folder and declared a relative URL to it inside a @font-face rule. That also doesn’t do anything.

What am I doing wrong in all these cases?

#14

As soon as you start importing stuff you need a build process as explained in the docs.

#15

Excuse me, but why do you need an additional font for the login form?
Or will this font be used in the panel as well? It is easier to use some common font built into the system.
For the panel, an additional font is already superfluous.
Although I love PragmataPro. I use it everywhere. Where you can and where you can’t. :slightly_smiling_face:

#16

Could you maybe point me to where this is explained? Does this also count for importing Google Fonts, shouldn’t those be available via the provided external URL, no matter if build process or not?

Edit: I guess you’re referring to this: Plugin setup for Panel plugins | Kirby

#17

Just for the sake of it :man_shrugging: I know that system fonts are better performance wise, but my client’s logo is not set in Times unfortunately. I also know that I could just export an svg… but where’s the fun in that :upside_down_face:

#18

Why Google fonts don’t connect in this component, I don’t know. Perhaps it’s better to ask Nico @distantnative how to do it.

#19

Yes.

And assets: Plugin Basics | Kirby

I somehow doubt it is a good idea to load a font just to display a logo…

#20

Yes. This was discussed above.

Why complicate the login form so much?
Beat the design with CSS.
No need to pull up a bunch of third-party downloads for the login form.