Card mod and protected function

Configuration Frontend
1

I used some button with password protect just a simple pincode to protect unwanted activation as they can really mess up with our energy systems.

Due to the energy issues in our country we need to run a business at a 3x40A power distribution while we actually need 3x160A to run it. So we’ve got a lot of challanges and while most of the protection is handled at the battery system and EMS we also need some manual override in some cases.

So the actual button itself can trigger an lot in our system by shutting down several outlets in the building to preserve energy in case of low battery capacity but also to reserve energy for other systems when needed.

Switching this status by accident means an production machine running 3D prints can be shut down hard by the press of a key on our dashboard.

So thats why we need an simple pin code protection so no one can accidantly hit these buttons.

Well in the button-card option i could easily assing a protect function and setup an pincode protection.

But I’m looking to upgrade to the better looking and more custumizable mushroom cards with card mod. As most of the functions i’ve already got working it wont let me use protect or any other pin code option as far as I could find on the internet.

Is there any work around or solution for this to protect these buttons?

2

Custom restriction card.
Card-mod has nothing with pin code protection.

3

Thanks was some trying and stuff but basics got fixed now. Only strange thing is that it some times load as an config error but after refreshing the page it all works again.

Well need some fine tuning anyway still so will look deeper in to it.

type: custom:restriction-card
restrictions:
  pin:
    code: 1234
card:
  type: custom:mushroom-entity-card
  entity: input_select.vermogen
  grid_options:
    columns: 12
    rows: 1
  fill_container: false
  name: Evenement
  icon: mdi:account-group-outline
  tap_action:
    action: perform-action
    perform_action: input_select.select_option
    target:
      entity_id: input_select.vermogen
    data:
      option: evenement
  secondary_info: none
  card_mod:
    name: Evenement
    icon: mdi:account-group
    secondary_info: none
    icon_color: green
    style: |
      ha-card {
        /* ===== LOGIC & SETTINGS ===== */
        {% set state = states(config.entity) %}
        /* 1. Get the Grass Sensor Data */
        {% set grass = states('eniris_hacs_heydivojaurqdjbk_247_foxess_h1_stateofcharge_frac') %}
        
        /* 2. Define Colors based on state */
        {% if state in ['high', 'very-high', 'red'] %}
          {% set c1 = '255, 65, 108' %}  /* Red RGB */
          {% set c2 = '255, 75, 43' %}   /* Orange RGB */
          {% set speed = '4s' %}
        {% elif state in ['moderate', 'medium', 'orange'] %}
          {% set c1 = '247, 151, 30' %}  /* Orange RGB */
          {% set c2 = '255, 210, 0' %}   /* Yellow RGB */
          {% set speed = '7s' %}
        {% else %}
          {% set c1 = '0, 242, 96' %}    /* Green RGB */
          {% set c2 = '5, 117, 230' %}   /* Blue RGB */
          {% set speed = '12s' %}
        {% endif %}

        /* 3. Pass variables to CSS */
        --aura-color-1: rgba({{ c1 }}, 0.6);
        --aura-color-2: rgba({{ c2 }}, 0.6);
        --speed: {{ speed }};
        
        /* 4. Card Body Styling */
        background: #101010 !important;
        border-radius: 25px;
        border: 1px solid rgba(255,255,255,0.08);
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
      }

      ha-card::before {
        content: "";
        position: absolute;
        top: -50%; left: -50%;
        width: 200%; height: 200%;
        z-index: 0;
        
        /* Two radial gradients in one element */
        background-image: 
          radial-gradient(circle at 50% 50%, var(--aura-color-1) 0%, transparent 50%),
          radial-gradient(circle at 80% 80%, var(--aura-color-2) 0%, transparent 50%);
        
        filter: blur(60px);
        opacity: 0.8;
        animation: rotate-aura var(--speed) linear infinite;
      }



      /* --- GLASS SURFACE OVERLAY --- */
      mushroom-shape-icon {
         --icon-size: 68px;
         --icon-color: rgba(var(--voc-rgb),1) !important;
        display: flex;
        margin: 0px 0 10px -15px !important;
        padding-right: 22px;
        padding-bottom: 10px;
      }
      ha-card {
        height: 60px !important;
        clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));

        --card-primary-font-size: 1.2rem !important;
        --card-primary-line-height: 1.3 !important;
      }

      /* Typography */
      .mushroom-state-info span.primary {
        color: white !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      }
      .mushroom-state-info span.secondary {
        color: rgba(255,255,255,0.8) !important;
      }

      /* Icon Styling */
      mushroom-shape-icon {
        --icon-size: 60px;
        --icon-color: white !important;

      }
      ha-state-icon {
        color: white !important;
      }

      /* Animation */
      @keyframes rotate-aura {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }