Use umb-radiobutton in public access overlay (umbraco#6612)

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js

@@ -22,6 +22,7 @@
 </pre>
 
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the radiobutton to checked or unchecked.
+@param {string} inputId Set the <code>id</code> of the radiobutton.
 @param {string} value Set the value of the radiobutton.
 @param {string} name Set the name of the radiobutton.
 @param {string} text Set the text for the radiobutton label.
@@ -55,6 +56,7 @@
         controllerAs: 'vm',
         bindings: {
             model: "=",
+            inputId: "@",
             value: "@",
             name: "@",
             text: "@",

src/Umbraco.Web.UI.Client/src/less/hacks.less

@@ -111,11 +111,10 @@ iframe, .content-column-body {
 }
 
 .pa-select-type label {
-    padding: 0 20px;
+    padding: 0 15px;
 }
 
 .pa-access-header {
-    font-weight: bold;
     margin: 0 0 3px 0;
     padding-bottom: 0;
 }

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html

@@ -1,12 +1,13 @@
 <label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
     <input type="radio"
-        name="{{vm.name}}"
-        value="{{vm.value}}"
-        class="umb-form-check__input"
-        ng-model="vm.model"
-        ng-disabled="vm.disabled"
-        ng-required="vm.required"
-        ng-change="vm.change()" />
+           id="{{vm.inputId}}"
+           name="{{vm.name}}"
+           value="{{vm.value}}"
+           class="umb-form-check__input"
+           ng-model="vm.model"
+           ng-disabled="vm.disabled"
+           ng-required="vm.required"
+           ng-change="vm.change()" />
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check"></span>

src/Umbraco.Web.UI.Client/src/views/content/protect.html

@@ -18,31 +18,29 @@
                         <localize key="publicAccess_paHowWould" tokens="[currentNode.name]">Choose how to restrict access to this page</localize>
                     </p>
 
-                    <umb-pane>
-                        <div class="pa-select-type">
-                            <input id="protectionTypeMember" type="radio" name="protectionType" value="member" ng-model="vm.type">
-
-                            <label for="protectionTypeMember">
-                                <h5 class="pa-access-header"><localize key="publicAccess_paMembers">Specific members protection</localize></h5>
-                                <p><localize key="publicAccess_paMembersHelp">If you want to grant access to specific members</localize></p>
-                            </label>
-                        </div>
+                    <div class="pa-select-type">
+                        <umb-radiobutton input-id="protectionTypeMember" name="protectionType" value="member" model="vm.type" text="" />
 
-                        <div class="pa-select-type">
-                            <input id="protectionTypeGroup" type="radio" name="protectionType" value="group" ng-model="vm.type">
+                        <label for="protectionTypeMember" class="flex flex-column flex-auto">
+                            <strong class="pa-access-header bold"><localize key="publicAccess_paMembers">Specific members protection</localize></strong>
+                            <span class=""><localize key="publicAccess_paMembersHelp">If you want to grant access to specific members</localize></span>
+                        </label>
+                    </div>
 
-                            <label for="protectionTypeGroup">
-                                <h5 class="pa-access-header"><localize key="publicAccess_paGroups">Group based protection</localize></h5>
-                                <p><localize key="publicAccess_paGroupsHelp">If you want to grant access to all members of specific member groups</localize></p>
-                            </label>
-                        </div>
-                    </umb-pane>
+                    <div class="pa-select-type">
+                        <umb-radiobutton input-id="protectionTypeGroup" name="protectionType" value="group" model="vm.type" />
+
+                        <label for="protectionTypeGroup" class="flex flex-column flex-auto">
+                            <strong class="pa-access-header bold"><localize key="publicAccess_paGroups">Group based protection</localize></strong>
+                            <span><localize key="publicAccess_paGroupsHelp">If you want to grant access to all members of specific member groups</localize></span>
+                        </label>
+                    </div>
                 </div>
 
                 <div ng-show="vm.step && !vm.loading && !vm.removing">
                     <div ng-if="vm.step === 'member'">
                         <p><localize key="publicAccess_paSelectMembers" tokens="[currentNode.name]">Select the members that should have access to this page</localize></p>
-                        <umb-pane>
+                        <div>
                             <umb-node-preview ng-repeat="member in vm.members | orderBy:'name'"
                                               icon="'icon-user'"
                                               name="member.name"
@@ -52,7 +50,7 @@ <h5 class="pa-access-header"><localize key="publicAccess_paGroups">Group based p
                             <a href ng-click="vm.pickMember()" class="umb-node-preview-add" prevent-default>
                                 <localize key="general_add">Add</localize>
                             </a>
-                        </umb-pane>
+                        </div>
                     </div>
 
                     <div ng-show="vm.step === 'group' && !vm.hasGroups">
@@ -61,7 +59,7 @@ <h5 class="pa-access-header"><localize key="publicAccess_paGroups">Group based p
 
                     <div ng-show="vm.step === 'group' && vm.hasGroups">
                         <p><localize key="publicAccess_paSelectGroups" tokens="[currentNode.name]">Select the groups that should have access to this page</localize></p>
-                        <umb-pane>
+                        <div>
                             <umb-node-preview ng-repeat="group in vm.groups | orderBy:'name'"
                                               icon="'icon-users'"
                                               name="group.name"
@@ -71,12 +69,12 @@ <h5 class="pa-access-header"><localize key="publicAccess_paGroups">Group based p
                             <a href ng-click="vm.pickGroup()" class="umb-node-preview-add" prevent-default>
                                 <localize key="general_add">Add</localize>
                             </a>
-                        </umb-pane>
+                        </div>
                     </div>
 
                     <div ng-show="vm.step === 'member' || vm.hasGroups">
                         <p class="mt4"><localize key="publicAccess_paSelectPages">Select the pages that contain login form and error messages</localize></p>
-                        <umb-pane>
+                        <div>
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
                                     <label>
@@ -111,16 +109,14 @@ <h5 class="pa-access-header"><localize key="publicAccess_paGroups">Group based p
                                     </umb-node-preview>
                                 </div>
                             </div>
-                        </umb-pane>
+                        </div>
                     </div>
                 </div>
 
                 <div ng-show="vm.removing">
                     <p><localize key="publicAccess_paRemoveProtectionConfirm" tokens="[currentNode.name]">Are you sure you want to remove the protection from this page?</localize></p>
                 </div>
 
-                <!--<pre>{{vm | json}}</pre>-->
-
             </umb-pane>
 
             <umb-pane ng-show="vm.success">