Lovelace Restriction Card - Client-side Security

Version 1.0.8 Released

Ability to infer the row type based on the entity. So the example above would now just need to be

type: entities
entities:
    - type: custom:fold-entity-row
      head: input_boolean.cycle1_enable
      entities:
        - type: type: custom:restriction-card
          row: true
          card:
            entity: input_boolean.cycle1_enable

@klogg @DavidFW1960

Thanks, that sorted it. Looking forward to the new code so normal type’s work. Great work

1.0.8 has been released that removed this requirement

Thanks @iantrich, two responses and an new version of the card before I even checked back!

For the record this is what worked or me using a fold-entity-row

        - type: entities
#          title: '-- Morning Cycle --'
          show_header_toggle: false
          entities:

            - # some entities here

            #=== Morning Schedule details
            - type: custom:fold-entity-row
              head: 
                type: custom:restriction-card
                entity: input_boolean.cycle1_enable            
                row: true
                card:
                  entity: input_boolean.cycle1_enable            
              items:
                - entity: sensor.cycle1_next_run_time
                  icon: mdi:clock-start
                - input_select.cycle1_schedule_time
                - input_select.cycle1_watering_days
                - type: divider
                  style:
                    height: 10px
                - type: divider

giving me

image

and

image

1 Like

Follow up question.

The docs say

can the margin be changed?

Not yet for rows. I plan to add some additional customizations for rows

1 Like

Having successfully got everything looking right I decided to actually try using the new lock rows :thinking:

They all work as expected except that as well as unlocking, I get a more info dialog box.

Remove entity from the line above row. I also think you should reverse the restriction-card with the fold-entity-row. Something like this

type: entities
show_header_toggle: false
entities:
  - type: 'custom:restriction-card'
    row: true
    card:
      type: 'custom:fold-entity-row'
      head:
        entity: light.kitchen
      items:
        - entity: light.kitchen
        - light.kitchen
        - light.kitchen

Version 1.0.9 Released

name Default Description
restriction-lock-row-margin-left 24px Manually bump the left margin of the lock icon in rows

Version 1.1.0 Released

name Default Description
restriction-lock-icon-height 24px Lock icon height
restriction-lock-icon-width 24px Lock icon width

Thanks Ian that works except that there is some kind of conflict with the fold-entity-row.

  • It can only be unfolded after first unlocking it. Is that expected and intended because I would have expected the lock to have only affected the toggling.

  • Also it only stays unfolded for as long as it is unlocked.

        - type: entities
            - type: custom:restriction-card
              row: true
              card:
                type: custom:fold-entity-row
                head: 
                  entity: input_boolean.cycle1_enable            
                items:
                  - entity: sensor.cycle1_next_run_time
                    icon: mdi:clock-start
                  - input_select.cycle1_schedule_time
                  - input_select.cycle1_watering_days
                  - type: divider
                    style:
                      height: 10px
                  - type: divider

That is intended if putting it at the top level. It is a row lock, not a toggle lock

Ok, no problem, I can’t argue with that.
I’ll just make the duration a bit longer.

Thanks.

Hi Ian,

Thanks a lot for this card, it has very good options.
I played with few options trying to:

  1. on cards, move the lock to the right side.
  2. on toggle entities, move the lock to be over the toggle

with #1, I used “restriction-lock-margin-left”, in a first moment using the “exact value method” as seen in the documentation (default: 0px), I kept playing with numbers there till it goes to the right side of the card, which I eventually found the number, but the problem was when the card got resized, eg: when I saw the same card in my phone instead of my computer. When I saw the card in a smaller screen, it disappeared because it was setting a high value, which doesnt fit my phone screen. So, I tried % instead of exact value, and it worked (I used “restriction-lock-margin-left: 95%”), so can I suggest you to possibly add this tip/possibility in the documentation? So, people who aren’t good in CSS can know this method (likely it will save many hours of my HASS colleagues trying to find this solution and your time answering question here :slight_smile:

for #2, I tried to use “restriction-lock-row-margin-left”, but it didn’t work. Does restriction-lock-row-margin-left work for toggle entities? If not, is currently there a way to do it? If not, could we have it in a feature request list :smiley:

Thank you! And congrats for all work done!

Thanks.
Good tip on the %
Row margin should work. Note you have to set the option row: true for it to be used

Hi Ian,
I have row: true in my config, ptal. The picture show the lock beside the entity name, I’d like to move it to be over the toggle.
In my theme file I have: restriction-lock-row-margin-left: 90% (which didn’t help).
Thanks for helping.

entities:
  - entities:
      - card:
          entity: switch.rio
          type: 'custom:hui-toggle-entity-row'
        row: true
        type: 'custom:restriction-card'
    head:
      label: Always on
      type: section
    open: true
    type: 'custom:fold-entity-row'
  - duration: 10
    entities:
      - entity: switch.old_scooter_2
      - entity: switch.new_scooter_2
    head:
      label: Others
      type: section
    open: true
    type: 'custom:fold-entity-row'
show_header_toggle: false
title: Kitchen' storage
type: entities

works for me. Make sure you are on the most recent release and clear your browser cache.

Im using the last version (1.1.0).

I cleared my browser cache, only this option (restriction-lock-row-margin-left) doesn’t work or isnt changing what Im expecting as mentioned previously, any other item I change I see the difference in my browser.

did you use the same card config I use or did you use a similar one? if different, could you pls share? so I will compare.

in themes.yaml I have:

Dark - Green:
  ### restriction card
  restriction-lock-margin-left: 95%
  restriction-lock-row-margin-left: 90%
  ### rounded corners on cards
  ha-card-border-radius: '20px'
  ### Main Interface Colors ###
  primary-color: "#03B14B"
  light-primary-color: "#47FC92"
  ha-card-border-radius: '20px'
...
    midnight:
      restriction-lock-row-margin-left: 95%

entities:
  - card:
      entity: light.kitchen
    row: true
    type: 'custom:restriction-card'
show_header_toggle: false
type: entities

Thanks for sharing your config, I’ll try to find out what is wrong here.

fyi:

I used the same config you sent and I got this error:

when I add a “type” under the entity, the card works, but the lock isnt in the correct place.