It’s easy to accidentally toggle an entity in lovelace - especially on mobile.
Here’s a solution to that problem.
- type: entities
entities:
- entity: light.my_lamp
name: A lamp
type: custom:toggle-lock-entity-row
Clicking the lock will make it fade away for five seconds, and then the toggle can activated with a second click - just like how the custom-ui lock used to work.
As a bonus, you can select which users can remove the lock.
Nice! Loving all the stuff you are making for Lovelace 
Sooo, you fixed an issue I didn’t knew I had haha. This will come in handy for my PC on/off button.
Thanks for you sharing!
Fantastic!
Can you make the wait adjustable?
Does this also work for locking the header toggle on cards?
No, it only works for single entities.
Wonderful! Thanks for sharing. Can you recommend a way to enable the visibility of a switch or group by entering a password?
I love this custom element, I use it to prevent my main pc to be shut down by accident, it works flawlessly on Chrome and on mobile, but on the new edge it doesn’t work I get custom element doesn’t exist.
I don’t know why
It is a great idea. I tryed with my garage covers, but it was converted to a button instead of the up and down arrows. Is it possible to keep the arrows? Garage is something very suitable for your solution.
Thanks.
Very useful, thank you!
One issue: I’ve noticed that both on desktop and on mobile (Android, Opera) it’s still possible to accidentally toggle a locked switch without unlocking it, by clicking or tapping on the very left or right edge of the switch. The switch toggles and the lock is never triggered or removed. Seems like the lock’s clickable area needs to be slightly wider in both directions.
Definitely useful, thanks!
Amazing, Thomas.
It is very useful and make HA much better to fit multiple situations.
It would be great if you could fix what Martso mentioned about the sides bypassing the lock.
Thank you!!!
How does one easily install this? I’m a bit baffled.
I did manage to trigger it, so i corrected the #lock to:
#lock {
opacity: 1;
-webkit-animation-duration: 5s;animation-duration 5s;
-webkit-animation-fill-mode: both;animation-full-mode: both;
width: 70px;
height: 45px;
background-color:
border-radius: 15px;
padding: 2px;
margin: -5px 5px 5px -20px;
}
I know it’s huge - but i actually like the large icon 
