Lovelace Restriction Card - Client-side Security

Stoff · February 20, 2025, 12:39pm

I have the following card setup.

type: entities
entities:
  - type: custom:restriction-card
    lock: false
    restrictions:
      pin:
        code: 1234
        text: Enter Pin Code
    duration: 20
    card_mod:
      style: |
        :host {
           --restriction-blocked-lock-color: red;
           --restriction-success-lock-color: green;
           --restriction-invalid--color: orange;
           --restriction-lock-icon-size: 22px;
           --restriction-lock-margin-left: calc(50% - 18px);
           --restriction-lock-row-margin-top: 10px;
         }       
    card:
      type: custom:paper-buttons-row
      base_config:
        style:
          button:
            font-size: 0.9rem
            background-color: rgba(62, 65, 75, 0.6)
            border-radius: 15px
            "--mdc-icon-size": 18px
      buttons:
        - entity: switch.adguard_home_parental_control
          state_icons:
            "off": mdi:magnify
            "on": mdi:magnify-expand
          state_styles:
            "on":
              button:
                background-color: rgba(13, 160, 53, 0.3)
                color: rgba(20, 200, 60, 1)
            "off":
              button:
                background-color: rgba(62, 65, 75, 0.6)
                color: rgba(132, 135, 145, 1)
          name: Parental Control
          tooltip: false
          layout: icon_name
          tap_action:
            action: call-service
            service: switch.toggle
            service_data:
              entity_id: switch.adguard_home_parental_control
          style:
            button:
              height: 40px
              width: 110px
              margin-left: auto
              margin-right: auto
              margin-bottom: 10px
        - entity: switch.adguard_home_protection
          state_icons:
            "off": mdi:lock-open-variant-outline
            "on": mdi:lock-outline
          state_styles:
            "on":
              button:
                background-color: rgba(13, 160, 53, 0.3)
                color: rgba(20, 200, 60, 1)
            "off":
              button:
                background-color: rgba(62, 65, 75, 0.6)
                color: rgba(132, 135, 145, 1)
          name: AdGuard Protect
          tooltip: false
          layout: icon_name
          tap_action:
            action: call-service
            service: switch.toggle
            service_data:
              entity_id: switch.adguard_home_protection
          style:
            button:
              height: 40px
              width: 110px
              margin-left: auto
              margin-right: auto
              margin-bottom: 10px

WRT card-mod,
–restriction-blocked-lock-color
–restriction-success-lock-color: green
–restriction-lock-row-margin-top: 10px
have no effect.

–restriction-invalid–color: orange
worked before the last update (1.2.18), now reverts to red.

Also, lock icon now dissapears when locked, before the update, it remained when locked.

Have also tried adding to my theme, same result. Am I doing something wrong?
Many thanks…

Ildar_Gabdullin · February 20, 2025, 12:41pm

It is explicitly mentioned in release notes that this variable got a fixed name.
Suggest you use SIMPLER test cards for investigating issues, currently your code contains other custom plugins.

Stoff · February 20, 2025, 12:49pm

Got it. --restriction-invalid-lock-color now works. Thank you…

Will try with a simpler card.

Ildar_Gabdullin · February 20, 2025, 1:31pm

As for card-mod. Using restriction-card with card-mod is described in the main card-mod thread, ask there. To exclude card-mod from your investigation, suggest to place your css variables into a custom theme.

jainpankaj · April 17, 2025, 8:15am

Can someone help me please.

Here is my code to have pin on an Yale lock

type: custom:hui-entities-card
show_header_toggle: false
title: Status
entities:
  - card:
      entity: lock.front_door
    type: custom:restriction-card
    restrictions:
      pin:
        code: 1234
    row: true

After clicking on the lock, I can enter the pin but nothing happens after the numbers are entered.

If I remove the PIN restriction

type: custom:hui-entities-card
show_header_toggle: false
title: Status
entities:
  - card:
      entity: lock.front_door
    type: custom:restriction-card
    row: true

I can lock/unlock the lock

What am I doing wrong?

Ildar_Gabdullin · April 17, 2025, 12:27pm

Why not just “entities”?

Will not affect on custom rows.

The row is unlocked, doesn’t this happen?

toreto04 · July 31, 2025, 12:54pm

Bonjour,

je souhaite verrouiller la carte de l’alarme par un code pin pour l’activation et désactivation de celle ci.
Visiblement mon code ne marche pas, je n’ai pas de restriction.
Si quelqu’un peut m’aider.

type: custom:restriction-card
restrictions:
  pin:
  code:
    - 1001
  text: MDP pour debloquer
card:
  states:
    - arm_night
  type: alarm-panel
  entity: alarm_control_panel.somfy_home_alarm_maison_lespignan
  name: Alarme Maison

Ildar_Gabdullin · July 31, 2025, 9:46pm

Please write in English, thank you.
Also, start with fixing indentation for a “code” line. And the “text” option is definitely not in it’s place.

Mariusthvdb · August 3, 2025, 9:01pm

with 2025.8 we get new Button elements styling in the cards. It reveals something I never noticed before:

      - type: custom:restriction-card
        row: true
        card_mod: !include /config/dashboard/card_mods/restriction_lock.yaml
        card:
          entity: script.reboot_iungo
          action_name: Reboot
        restrictions:
#           block: true
          confirm:
            text: Bevestig Iungo herstart?
      - entity: script.reboot_iungo
        action_name: Reboot

Somehow it takes away from the button elements available space on the right side. Because of that, the text is no longer centered.
Maybe some padding on the row, or another property, I didnt yet inspect too thoroughly.
can set a margin-right on the overlay in Inspector, but that just moves the shorter button, it doesnt make it as wide as the core button

Might be worth a look as it really makes the Buttons look bad

Ildar_Gabdullin · August 3, 2025, 9:10pm

Will take a look when be near a pc.

Both labels are right-aligned, see no issue here:

type: entities
entities:
  - type: custom:restriction-card
    row: true
    card:
      entity: script.test_script
      action_name: test
    restrictions:
      confirm:
        text: confirm?
  - entity: script.test_script
    action_name: test test test

maxym · March 26, 2026, 4:09pm

Hello.
Is it possible to lock toggle (input_boolean) displayed on an entities card, in a way that clicking on the toggle raises a confirmation popup, and a positive answer toggles the toggle?

What I achieved is a confirmation pop-up that releases the lock, and then I need to click the toggle

type: entities
entities:
  - type: custom:restriction-card
    row: true
    condition:
      entity: input_boolean.pv_ctrl_edit_mode
      value: "off"
    restrictions:
      confirm:
        text: Are you sure?
    card:
      entity: input_boolean.pv_ctrl_edit_mode

thank you

plabvas-bot · March 26, 2026, 4:20pm

As expected since these are 2 separate actions - unlock a card, do smth with a card.

Not possible currently since the confirmation is shown for the “Unlock” action.
The card may contain different controls (or could be a control itself - like a Button card), and changing a particular inner control automatically along with unlocking is just a tiny use-case out of many.

Mariusthvdb · March 31, 2026, 11:43am

all of a sudden I see this in console

[RC] render() → bailing early (missing required state)

dont think I touched those configs in ages, so could it be an update took place
~~unless… I moved back to release, and stopped using a manual edited card… It now dawns on me . I think…~~ nope that was another. now where to start looking for an answer to this.

filed it, and downgrading to 1.2.19 fixes

github.com/iantrich/restriction-card

beta throws [RC] render() → bailing early (missing required state)

opened 01:03PM - 31 Mar 26 UTC

Mariusthvdb

bug

**Checklist:** - [X ] I updated to the latest version available - [X ] I cleare…d the cache of my browser **Release with the issue:** beta 2.0.0 b1 **Last working release (if known):** 1.2.19 **Browser and Operating System:** Safari 26.3.1 Mac **Description of problem:** seems to only throw this line in console, not even sure it is an error or warning, but since it mentions missing state it would probably be an issue restrictions popup nicely in modern HA style, asking are you sure and click confirm? <img width="594" height="167" alt="Image" src="https://github.com/user-attachments/assets/fd55d6bf-e955-48f3-8bd6-0aab308a20a2" /> **Javascript errors shown in the web inspector (if applicable):** ``` [RC] render() → bailing early (missing required state) ``` <img width="566" height="37" alt="Image" src="https://github.com/user-attachments/assets/a42c2e9e-400e-4f0b-9fe3-85e1f40d1bbf" /> **Additional information:** yaml used: ``` - type: custom:restriction-card row: true card: entity: script.reboot_iungo action_name: Herstart name: Herstart Iungo restrictions: # block: true confirm: text: Bevestig Iungo herstart? ``` <img width="555" height="70" alt="Image" src="https://github.com/user-attachments/assets/6af49672-d0a8-47b7-8dbe-79885de3e982" /> theme settings: ``` restriction-lock-row-margin-left: calc(90%) #100% - 25px restriction-regular-lock-color: var(--alert-color) restriction-success-lock-color: var(--success-color) restriction-lock-opacity: 0.8 # restriction-lock-icon-size: 20px ``` I can probably safely downgrade to last workin version 1.2.19, as I dont use the GUI although it returns the ugly dialog... <img width="517" height="156" alt="Image" src="https://github.com/user-attachments/assets/2fa251a8-5809-4cf6-a567-48aaeee86eea" />

only downside I see is the ancient confirmation dialog