Lovelace Restriction Card - Client-side Security

VdR · January 3, 2021, 6:05pm

This is absolutely fabulous. Any intention to make the popup a bit more stylish? A simple numeric keyboard to enter a pin would be great.

gregtd · January 14, 2021, 8:13pm

This card is exactly what I was looking for!

I’m setting up a Sprinkler system to replace my current watering controller with Home Assistant and ESPHome. Most of the logic is done on the esp board but I wanted to restrict some actions from Home Assistant when the sprinkler schedule is running. So easy using this card with conditions.

                entities:
                  - card:
                      entity: switch.sprinkler_relay_1
                    row: true
                    type: 'custom:restriction-card'
                    restrictions:
                      block: true
                    condition:
                      value: 'on'
                      entity: group.sprinkler_running_status
                  - card:
                      entity: switch.sprinkler_relay_2
                    row: true
                    type: 'custom:restriction-card'
                    restrictions:
                      block: true
                    condition:
                      value: 'on'
                      entity: group.sprinkler_running_status
                  - card:
                      entity: switch.sprinkler_relay_3
                    row: true
                    type: 'custom:restriction-card'
                    restrictions:
                      block: true
                    condition:
                      value: 'on'
                      entity: group.sprinkler_running_status
                  - card:
                      entity: switch.sprinkler_relay_4
                    row: true
                    type: 'custom:restriction-card'
                    restrictions:
                      block: true
                    condition:
                      value: 'on'
                      entity: group.sprinkler_running_status
                show_header_toggle: false
                title: Manual Control

ElJee · January 27, 2021, 10:44pm

Hello, was that issue ever logged/looked at/fixed? I love that card and would like to see the size being trickled down when using stacks or grids. Thanks!

karaspr · January 30, 2021, 6:55pm

I’m trying to copy your code (to get icon on right hand side) but for sure I made some error, could you please point me where?

type: entities
entities:
  - card:
      entity: switch.led
      style: |
        :host {
            --restriction-lock-row-margin-left: 95%;
        }
    type: 'custom:restriction-card'
    row: true

iantrich · January 30, 2021, 7:19pm

Card does not support style field

karaspr · January 30, 2021, 7:39pm

But I guess there is some way to move icon to the right. can you share proper code?

iantrich · January 30, 2021, 9:14pm

I already did, you referenced it. You put that in your theme.

arganto · January 31, 2021, 5:55pm

This is not the ideal solution for different devices, screen sizes, etc. I prefer (in my devices, browsers, etc.)

 --restriction-lock-row-margin-left: calc(100% - 25px);

noxx · March 8, 2021, 8:10am

why i get this message here (red box)?

sparkydave · March 8, 2021, 8:34am

Because there is no visual editor available for this custom card, as per the first words of the error message…

It’s nothing to worry about, as per the last words of the error message

noxx · March 18, 2021, 10:39am

possible to lock a switch in a glance card?

this here dont work

type: glance
title: Schlafzimmer
entities:
  - entity: switch.on_off_plug_in_unit_4
    type: 'custom:restriction-card'
    row: true
    name: Licht
    icon: 'mdi:lightbulb'
    tap_action:
      action: toggle
state_color: true
show_icon: true
show_name: true
show_state: true

Mariusthvdb · April 19, 2021, 12:29pm

trying to 'restrict my garage door, as per suggestion of Thomas, I started with the core row on an entity cover:

      - type: entities
        entities:
          - type: custom:restriction-card
            row: true
            condition:
              entity: cover.garage_deur
              value: closed
            restrictions:
              confirm:
                text: 'Garagedeur openen?'
              pin:
                text: 'Voer Pincode in:'
                code: !secret tahoma_secret
                max_retries: 3
                max_retries_delay: 30
            card:
              entity: cover.garage_deur
              secondary_info: last_changed

however, just to be sure, please let me ask: this makes the pin text appear first, and, after successfully entering the code, makes the confirm text appear. Which is the other way round from what I expected

is this as per design, or did I make a user error?

in the repo, there’s an ‘Invalid pin entered’ dialogue video, but no instruction how to do that… Would anyone know which confirmation text that is? Right now, with the above code, simply nothing happens except for the icon to flash.

the last_changed isnt displayed on the entity. Since there is plenty space, that can’t be it. Does the lock overlay prevent displaying secondary_info? Would be really appreciated if this could be done.

Though I realize we can set the position of the icon in a theme, and I do use the relative setting to do so, I need the lock to be on a different spot using the cover, than when using eg a single toggle.

Would it be possible to do so?

thanks for having a look.

btw, I also added the restriction on a core entity card, but that seems futile, because clicking that simply opens the more-info, where the lock is not displayed?

thanks for having a look.

iantrich · April 19, 2021, 2:29pm

however, just to be sure, please let me ask: this makes the pin text appear first, and, after successfully entering the code, makes the confirm text appear. Which is the other way round from what I expected

The design is to use one restriction. The example is just for show. Sounds pretty unfriendly to put so many clicks in the way. The the order is what it is, I have no intention of changing it.

in the repo, there’s an ‘Invalid pin entered’ dialogue video, but no instruction how to do that… Would anyone know which confirmation text that is? Right now, with the above code, simply nothing happens except for the icon to flash.

That was removed

the last_changed isnt displayed on the entity. Since there is plenty space, that can’t be it. Does the lock overlay prevent displaying secondary_info ? Would be really appreciated if this could be done.

No, it doesn’t. You are not using the correct option; last-changed

Though I realize we can set the position of the icon in a theme, and I do use the relative setting to do so, I need the lock to be on a different spot using the cover, than when using eg a single toggle.

I will not be changing it

btw, I also added the restriction on a core entity card, but that seems futile, because clicking that simply opens the more-info, where the lock is not displayed?

I’m not following what you’re saying here

Mariusthvdb · April 19, 2021, 3:00pm

yes! thank you for spotting that…

I tried the lock on

      - type: entity
        entity: cover.garage_deur

but it didnt work, probably because of a wrong config, didnt see an error though, just the more info clicking the entity. Using:

      - type: custom:restriction-card
        <<: *restrict
        card:
          type: entity
          entity: cover.garage_deur

now makes it happen.

was only asking, so cool, not an issue at all. thanks for your time and effort replying in such short notice!

Ildar_Gabdullin · May 27, 2021, 10:15am

Good day!
Started testing this card.

Questions:

Regarding "restrictions::hide".
Here is a card:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: sun.sun
      - type: 'custom:restriction-card'
        restrictions:
          hide:
            condition:
              entity: input_boolean.test_boolean_4
              operator: ==
              value: 'on'
        action: hold
        row: true
        card:
          entity: sun.sun
      - type: 'custom:restriction-card'
        action: hold
        duration: 10
        row: true
        card:
          entity: sun.sun
  - type: entities
    entities:
      - entity: input_boolean.test_boolean_4
        name: hide

There are 3 entity rows:

1st - not restricted
2nd - restricted with the "hide" option;
3nd - restricted.

If the toggle button ("input_boolean.test_boolean_4") is ON then the 2nd row is supposed to be hidden.
But it happens only after manual refresh (F5):

Is it a bug?

The restriction card is supposed to be used in different places of HA GUI.
That is why it is better to have a PIN defined in one place.
I tried to specify smth like "pin: !secret my_pin" (no success).
What is the best practice of storing the PIN ?
The same question about user id.

Of course, there is a walkaround - we can create a "decluttering-card" template for this:

  decl_restriction_card_row:
    default:
      - VALUE_ROW: false
    card:
      type: 'custom:restriction-card'
      restrictions:
        pin:
          code: 1234
          text: Введите PIN для разблокировки
          retry_delay: 3
          max_retries: 3
          max_retries_delay: 10
      action: hold
      duration: 10
      row: '[[VALUE_ROW]]'
      card: '[[CARD_OR_ROW]]'

The idea is to define a restriction-card with required settings (presumably same settings for all HA views) in ONE place (with specified pin & user id data) and then use this template in all views.
How to use the template for a row:

type: entities
entities:
  - type: 'custom:decluttering-card'
    template: decl_restriction_card_row
    variables:
      - VALUE_ROW: true
      - CARD_OR_ROW:
          entity: sun.sun

How to use the template for a card:

type: 'custom:decluttering-card'
template: decl_restriction_card_row
variables:
  - CARD_OR_ROW:
      type: entities
      entities:
        - entity: input_boolean.test_boolean

iantrich · May 27, 2021, 1:54pm

Yeah, I see the bug right away in restriction-card/restriction-card.ts at 1f56db9270450cb717c4e2819a10c411b77f6a64 · iantrich/restriction-card · GitHub and I’m really surprised no one has came across it till now
I do not have a recommendation on storing your pin.

Ildar_Gabdullin · May 27, 2021, 3:00pm

Hello Ian, thank you very much for your card and a quick reply!

Great that you found a reason of that behaviour. Looking forward for an update, will test it when released. Probably this “hide” option could be useful.
Every time I start learning a new card, I am usually trying to test it with some test cases (may find some new issues).
Regarding PIN - basically this is not about a privacy (“someone can steal my PIN !!!”), this is about reducing a code (“define it in one place, call it from many places”).
So I will proceed (and recommend it to other people) with decluttering-card. Together these two cards will help a lot.

Ildar_Gabdullin · May 27, 2021, 11:15pm

Some card-mod styling (including for "decluttering-card") is described here.

Dal · June 28, 2021, 9:59am

How do change the placement of the lock, or what color it has?
I have this code:

type: custom:restriction-card
restrictions:
  confirm:
    text: Sikker??
card:
  type: entities
  entities:
    - switch.05301030f4cfa2341de5
  state_color: true

And it looks like this:

But no matter where I put lines like:
restriction-regular-lock-color
or
restriction-lock-margin-left

Nothing seems to change.

So what am I doing wrong?

Thanks.

tom_l · June 28, 2021, 10:12am

The theming options, surprisingly enough, go in your theme. Not the card.