Lovelace Restriction Card - Client-side Security

iantrich · October 24, 2019, 9:37pm

That tells me that you are 100% using an older version then as that was changed in release 1.0.8. Try opening with a different browser or private session to confirm.

Edit: I just put out version 1.1.1 that will print out to the browser console which version is running

Fabricio_Pimenta · October 24, 2019, 11:09pm

interesting.
I had checked the version installed via HACS, and it was showing 1.1.10, then I did cmd+shift+f5 to reload, which I supposed was going to ignore the cache, but the lock/card wasnt ok, but reading your last comment I did what you suggested, I opened in a private session and it shows correctly.

so, to understand why cmd+shift+f5 didn’t work, I learned something new:

Hard reload is not exposed directly in the UI of the browser. You activate the function with the keyboard shortcut Ctrl-Shift-R, Shift-F5, or by holding down Shift before you activate the reload button.

Chrome ignores the cache and will load all resources from the web page again.

Google Chrome supports a third reload option and a somewhat hidden reload menu as well. You need to open the browser’s Developer Tools with the keyboard shortcut F12 first as it is a prerequisite for it.

Right-click on the reload button afterward to display the reload menu. It includes the empty cache and hard reload option that you may use. What it does, is clear the browser cache before the hard reload is activated.

Google Chrome: hard reload vs. normal reload - gHacks Tech News

so, it might help other people reading the forum.

Thanks again!!!

HITChris · November 2, 2019, 5:52am

Anyone else getting console errors after updating to 1.1.1?

klogg · February 15, 2020, 12:23pm

I am having trouble applying styles to this card. I am using a custom:button-card which is embedded in the restriction-card via an !include using lovelace-mod.

This is my not working config:

              - type: custom:restriction-card
                row: true
                card:
                  !include
                  - includes/button_boolean_check_box_with_entity_icon.yaml
                  - entity: input_boolean.announcement_in_progress
                    name: Announcement<br>in progress
                    size: 60%
                    card_font_size: 14px
                style: |
                  :host {
                    --restriction-regular-lock-color: red;
                  }

Which results in this:

The style works with a simple entity:

This is the included button ‘template’;

type: custom:button-card
entity: {{ entity }}
icon: {{ icon | default('') }}
name: {{ name | default('') }}
size: {{ size | default('40%') }}
lock:
  enabled: {{ lock_enabled | default('false') }}
styles:
  lock:
    - color: {{ lock_color | default('red') }}
  grid:
    - grid-template-areas: '"i n" "l l"'
    - grid-template-columns: 25% min-content
  card:
    - height: {{ card_height | default('') }}
    - font-size: {{ card_font_size | default('12px') }}
    - border-radius: {{ card_border_radius | default('10px') }}
state:
  - value: 'on'
    styles:
      card:
        - background-color: {{ card_background_on_color | default('var(--primary-background-color)') }}
  - value: 'off'
    styles:
      card:
        - color: {{ card_off_color | default('var(--secondary-text-color)') }}
        - box-shadow: 0px 0px 1px 2px {{ box_shadow_off_color | default('var(--primary-background-color)') }}
      icon:
        - color: {{ icon_off_color | default('var(--secondary-text-color)') }}

iantrich · February 20, 2020, 3:29am

0.106 Support

not_a_coder · February 24, 2020, 3:52am

Is the background color of the dialogue box that asks for the pin set by the card or by the theme of HA? No matter which dark theme I choose I still get a prompt with a white background. Is there a way to fix that and have the background dark and the text light for the dialogue box?

maxym · March 4, 2020, 11:10am

Hello.
I installed this card as replacement of toggle-lock-entity-row extension which stopped working recently.

And the newone seemed to work well at the first glance. But I cannot unprotect the switch. When I click (or double click depending on action settings) the lock icon is pulsing a few times, but that’s all. The switch remains locked.

Can I lock/unlock it on demand? I don’t need to use PINs or so.

Here is how I’m using it:

type: 'custom:hui-entities-card'
show_header_toggle: false
state_color: true
title: test
entities:
  - card:
      entity: input_boolean.home_occupied
    restrictions:
      block: true
    type: 'custom:restriction-card'
    row: true
    action: double_tap

iantrich · March 4, 2020, 12:20pm

block:true literally blocks it. Remove the restrictions section

maxym · March 4, 2020, 4:25pm

Yep, now it works. Thank you.

I’m thinking about changing appearance of locked switch. Is it possible to replace icon of a switch by lock icon? So switch appears only when is really unlocked. Otherwise locked is shown.

iantrich · March 4, 2020, 4:47pm

The restriction is just an overlay, it doesn’t modify the card below in anyway; so no, you can’t update the icon of the switch using this

maxym · March 4, 2020, 4:52pm

Can I change overlay image to cover the switch then?

iantrich · March 4, 2020, 5:05pm

Yes, take a look at the theme variables: https://github.com/iantrich/restriction-card#theme-variables

maxym · March 4, 2020, 6:55pm

I meant to make the switch invisible by covering it by non-transparent object. It might be lock icon but it has transparent background so it’s not what I’m looking for.

thanks for your help.

finity · March 4, 2020, 10:43pm

Where would I put that bit of code to add it to the default theme?

I use yaml mode. I tried to put it in right before views but it doesn’t seem to take.

...
title: Home Assistant 
restriction-lock-row-margin-left: 95%
views:
  - !include '/config/lovelace_views/lovelace_main_view.yaml'
...

If I put it into a separate theme file it works fine. I just don’t know how to modify the default theme with one change.

iantrich · March 4, 2020, 11:23pm

no, that is not an option

iantrich · March 4, 2020, 11:24pm

You should be able to put it in a css file and include it in resources I think…I think I tried that once before but am on mobile right now and unable to test.

finity · March 4, 2020, 11:44pm

Do you know of any documentation on that anywhere? I looked around in the docs (nothing at all) and on the forums (nothing definitive) but I haven’t found a god explanation on how that is done in HA.

iantrich · March 5, 2020, 5:26am

You could try using https://github.com/thomasloven/lovelace-card-mod
Haven’t tested that

finity · March 5, 2020, 5:08pm

It doesn’t seem to work on the card or entity level.

I’ve tried it a couple of ways:

  - type: entities
    title: Urgent Announcements
    show_header_toggle: false
    style: |
      ha-card {
        restriction-lock-row-margin-left: 95%;
      }
    entities:
      - type: 'custom:restriction-card'
        card:
          entity: input_boolean.tts_announce_1
        row: true
      - type: 'custom:restriction-card'
        card:
          entity: input_boolean.tts_announce_2
        row: true

and:

- type: entities
    title: Urgent Announcements
    show_header_toggle: false
    entities:
      - type: 'custom:restriction-card'
        card:
          entity: input_boolean.tts_announce_1
          style: |
            :host {
              restriction-lock-row-margin-left: 95%;
            }
        row: true
      - type: 'custom:restriction-card'
        card:
          entity: input_boolean.tts_announce_2
        row: true

the lock icon always stays on the left.

iantrich · March 5, 2020, 5:31pm

should be

--restriction-lock-row-margin-left: 95%;