Fix edit of AKAs for a system. Fix css usage of label for= for the yes/no radio inputs

public/css/fixes.css

@@ -139,3 +139,9 @@ h1>small.success:after {
 	margin-right: 0;
 	margin-left: 0;
 }
+
+/* Usage of label for radio icons, but using span instead */
+span.label.form-label {
+    font-size: 75%;
+    margin-bottom: 1px;
+}

resources/views/system/widget/form-address.blade.php

@@ -138,7 +138,7 @@
 
 			<!-- Hub Checkbox -->
 			<div class="col-2 d-none" id="hub-checkbox">
-				<label for="hub" class="form-label">Hub</label>
+				<span class="label form-label">Hub</span>
 				<div class="input-group">
 					<div class="btn-group" role="group">
 						<input type="radio" class="btn-check" name="hub" id="hub_yes" value="1" required @cannot('admin',$o)disabled @endcannot @if(old('hub',$o->hub))checked @endif>
@@ -224,19 +224,19 @@
 			});
 
 			$('#zone_id').on('change',function() {
-				$(this).parent().find('i').addClass('spinner-grow spinner-grow-sm');
+				// Hide all our other input boxes
-				$('#region_id').prop('disabled',true);
+				if (! $('#region-select').hasClass('d-none'))
-				$('#region_id').children().remove();
+					$('#region-select').addClass('d-none');
 
 				if (! $('#region-address').hasClass('d-none'))
 					$('#region-address').addClass('d-none');
 
-				if (! $('#host-address').hasClass('d-none'))
-					$('#host-address').addClass('d-none');
-
 				if (! $('#host-select').hasClass('d-none'))
 					$('#host-select').addClass('d-none');
 
+				if (! $('#host-address').hasClass('d-none'))
+					$('#host-address').addClass('d-none');
+
 				if (! $('#hub-select').hasClass('d-none'))
 					$('#hub-select').addClass('d-none')
 
@@ -246,7 +246,16 @@
 				if (! $('#node-address').hasClass('d-none'))
 					$('#node-address').addClass('d-none');
 
+				if (! $('#sec-level').hasClass('d-none'))
+					$('#sec-level').addClass('d-none')
+
+				var icon = $(this).parent().find('i');
+				icon.addClass('spinner-grow spinner-grow-sm');
+
 				$.get('{{ url('domain/api/regions') }}'+'/'+this.value,function(data) {
+					$('#region_id').prop('disabled',true);
+					$('#region_id').children().remove();
+
 					$('#region_id').append('<option value=""></option>');
 					$('#region_id').append('<option value="0">No Region</option>');
 					$('#region_id').append('<option value="new">New Region</option>');
@@ -258,16 +267,33 @@
 					$('#region_id').prop('disabled',false);
 					$('#region_id').show();
 
-					if (modify.responseJSON.region_id)
+					if (modify && modify.responseJSON.region_id)
 						$('#region_id').val(modify.responseJSON.region_id).change();
-				});
 
-				$('#region-select').removeClass('d-none');
+					$('#region-select').removeClass('d-none');
-				$(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm');
+					icon.removeClass('spinner-grow spinner-grow-sm');
+				});
 			});
 
 			$('#region_id').on('change',function() {
+				// Hide all our other input boxes
+				if (! $('#host-select').hasClass('d-none'))
+					$('#host-select').addClass('d-none');
+
+				if (! $('#host-address').hasClass('d-none'))
+					$('#host-address').addClass('d-none');
+
+				if (! $('#hub-select').hasClass('d-none'))
+					$('#hub-select').addClass('d-none');
+
+				if (! $('#hub-checkbox').hasClass('d-none'))
+					$('#hub-checkbox').addClass('d-none');
+
+				if (! $('#node-address').hasClass('d-none'))
+					$('#node-address').addClass('d-none');
+
 				switch(this.value) {
+					// Not selected - everything off
 					case '':
 						if (! $('#region-address').hasClass('d-none'))
 							$('#region-address').addClass('d-none');
@@ -275,68 +301,48 @@
 						if (! $('#host-select').hasClass('d-none'))
 							$('#host-select').addClass('d-none');
 
-						if (! $('#host-address').hasClass('d-none'))
+						if (! $('#sec-level').hasClass('d-none'))
-							$('#host-address').addClass('d-none');
+							$('#sec-level').addClass('d-none')
 
-						if (! $('#hub-select').hasClass('d-none'))
-							$('#hub-select').addClass('d-none');
-
-						if (! $('#hub-checkbox').hasClass('d-none'))
-							$('#hub-checkbox').addClass('d-none');
-
-						if (! $('#node-address').hasClass('d-none'))
-							$('#node-address').addClass('d-none');
 						break;
 
+					// New Region - ask address/security
 					case 'new':
-						if (! $('#host-select').hasClass('d-none'))
-							$('#host-select').addClass('d-none');
-
-						if (! $('#host-address').hasClass('d-none'))
-							$('#host-address').addClass('d-none');
-
 						if ($('#region-address').hasClass('d-none'))
 							$('#region-address').removeClass('d-none');
 
-						if (! $('#hub-select').hasClass('d-none'))
+						if ($('#sec-level').hasClass('d-none'))
-							$('#hub-select').addClass('d-none');
+							$('#sec-level').removeClass('d-none')
-
-						if (! $('#hub-checkbox').hasClass('d-none'))
-							$('#hub-checkbox').addClass('d-none');
-
-						if (! $('#node-address').hasClass('d-none'))
-							$('#node-address').addClass('d-none');
 
 						$('#action').val('region');
+
 						break;
 
+					// No region - next Host Select
 					case '0':
+					// Existing entry selected - next Host Select
 					default:
 						// Find Hosts
-						if ($('#host-select').hasClass('d-none'))
-							$('#host-select').removeClass('d-none');
-
 						if (! $('#region-address').hasClass('d-none'))
 							$('#region-address').addClass('d-none');
 
-						if (! $('#hub-select').hasClass('d-none'))
-							$('#hub-select').addClass('d-none');
-
-						if (! $('#hub-checkbox').hasClass('d-none'))
-							$('#hub-checkbox').addClass('d-none');
-
 						if (! $('#host-address').hasClass('d-none'))
 							$('#host-address').addClass('d-none');
 
 						if (! $('#node-address').hasClass('d-none'))
 							$('#node-address').addClass('d-none');
 
-						$(this).parent().find('i').addClass('spinner-grow spinner-grow-sm');
+						if (! $('#sec-level').hasClass('d-none'))
-						$('#host_id').prop('disabled',true);
+							$('#sec-level').addClass('d-none')
-						$('#host_id').children().remove();
+
 						var that = this;
+						var icon = $(this).parent().find('i');
+						icon.addClass('spinner-grow spinner-grow-sm');
 
 						$.get('{{ url('domain/api/hosts') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) {
+							$('#host_id').prop('disabled',true);
+							$('#host_id').children().remove();
+
 							$('#host_id').append('<option value=""></option>');
 							if (that.value !== '0')
 								$('#host_id').append('<option value="0">No Host</option>');
@@ -349,66 +355,80 @@
 							$('#host_id').prop('disabled',false);
 							$('#host_id').show();
 
-							if (modify.responseJSON.host_id)
+							if (modify && modify.responseJSON.host_id)
 								$('#host_id').val(modify.responseJSON.host_id).change();
-						});
 
-						$('#host-select').removeClass('d-none');
+							$('#host-select').removeClass('d-none');
-						$(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm');
+							icon.removeClass('spinner-grow spinner-grow-sm');
+						});
 				}
 			});
 
 			$('#host_id').on('change',function() {
+				if (! $('#hub-select').hasClass('d-none'))
+					$('#hub-select').addClass('d-none');
+
 				switch(this.value) {
+					// Not selected - everything off
 					case '':
 						if (! $('#host-address').hasClass('d-none'))
 							$('#host-address').addClass('d-none');
 
-						if (! $('#hub-select').hasClass('d-none'))
-							$('#hub-select').addClass('d-none');
-
 						if (! $('#hub-checkbox').hasClass('d-none'))
 							$('#hub-checkbox').addClass('d-none');
 
 						if (! $('#node-address').hasClass('d-none'))
 							$('#node-address').addClass('d-none');
+
+						if (! $('#sec-level').hasClass('d-none'))
+							$('#sec-level').addClass('d-none')
+
 						break;
 
+					// New Host - ask address/security
 					case 'new':
 						if ($('#host-address').hasClass('d-none'))
 							$('#host-address').removeClass('d-none');
 
-						if (! $('#hub-select').hasClass('d-none'))
-							$('#hub-select').addClass('d-none');
-
 						if (! $('#hub-checkbox').hasClass('d-none'))
 							$('#hub-checkbox').addClass('d-none');
 
 						if (! $('#node-address').hasClass('d-none'))
 							$('#node-address').addClass('d-none');
 
+						if ($('#sec-level').hasClass('d-none'))
+							$('#sec-level').removeClass('d-none')
+
 						$('#action').val('host');
+
 						break;
 
+					// No host - next Hub Select
 					case '0':
+					// Existing entry selected - next Hub Select
 					default:
+						$('#node_id').prop('disabled',true);
+						$('#point_id').prop('disabled',true);
+
 						if (! $('#host-address').hasClass('d-none'))
 							$('#host-address').addClass('d-none');
 
-						if ($('#hub-select').hasClass('d-none'))
-							$('#hub-select').removeClass('d-none');
-
 						if ($('#hub-checkbox').hasClass('d-none'))
 							$('#hub-checkbox').removeClass('d-none');
 
 						if ($('#node-address').hasClass('d-none'))
 							$('#node-address').removeClass('d-none');
 
-						$(this).parent().find('i').addClass('spinner-grow spinner-grow-sm');
+						if ($('#sec-level').hasClass('d-none'))
-						$('#hub_id').prop('disabled',true);
+							$('#sec-level').removeClass('d-none')
-						$('#hub_id').children().remove();
+
+						var icon = $(this).parent().find('i');
+						icon.addClass('spinner-grow spinner-grow-sm');
 
 						$.get('{{ url('domain/api/hubs') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) {
+							$('#hub_id').prop('disabled',true);
+							$('#hub_id').children().remove();
+
 							$('#hub_id').append('<option value="">No Hub</option>');
 
 							data.forEach(function(item) {
@@ -418,13 +438,15 @@
 							$('#hub_id').prop('disabled',false);
 							$('#hub_id').show();
 
-							if (modify.responseJSON.hub_id)
+							if (modify && modify.responseJSON.hub_id)
 								$('#host_id').val(modify.responseJSON.hub_id).change();
-						});
 
-						$('#hub-select').removeClass('d-none');
+							$('#hub-select').removeClass('d-none');
-						$('#sec-level').removeClass('d-none');
+							$('#node_id').prop('disabled',false);
-						$(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm');
+							$('#point_id').prop('disabled',false);
+
+							icon.removeClass('spinner-grow spinner-grow-sm');
+						});
 
 						if (modify && modify.responseJSON) {
 							$('#submit').val(id);
@@ -437,12 +459,18 @@
 			});
 
 			$('#hub_id').on('change',function() {
+				if ($('#sec-level').hasClass('d-none'))
+					$('#sec-level').removeClass('d-none')
+
 				switch(this.value) {
+					// Not selected - enter a normal node
 					case '':
 						if ($('#hub-checkbox').hasClass('d-none'))
 							$('#hub-checkbox').removeClass('d-none');
+
 						break;
 
+					// Existing entry selected - next Address input
 					default:
 						if (! $('#hub-checkbox').hasClass('d-none'))
 							$('#hub-checkbox').addClass('d-none');

resources/views/system/widget/system.blade.php

@@ -228,7 +228,7 @@ use App\Models\{Mailer,User};
 			<!-- Active -->
 			<div class="col-6">
 				@can($action,$o)
-					<label for="active" class="form-label">Active</label>
+					<span class="label form-label">Active</span>
 					<div class="input-group">
 						<div class="btn-group" role="group">
 							<input type="radio" class="btn-check" name="active" id="active_yes" value="1" required @if(old('active',$o->active))checked @endif>
@@ -246,7 +246,7 @@ use App\Models\{Mailer,User};
 			<!-- Hold -->
 			<div class="col-6">
 				@can('admin',$o)
-					<label for="hold" class="form-label">Hold Mail <i class="bi bi-info-circle" title="Dont give the node any mail regardless of poll mode"></i></label>
+					<span class="label form-label">Hold Mail <i class="bi bi-info-circle" title="Dont give the node any mail regardless of poll mode"></i></span>
 					<div class="input-group">
 						<div class="btn-group" role="group">
 							<input type="radio" class="btn-check" name="hold" id="hold_yes" value="1" required @if(old('hold',$o->hold))checked @endif>
@@ -264,7 +264,7 @@ use App\Models\{Mailer,User};
 			<!-- Poll Mode -->
 			<div class="col-12">
 				@can($action,$o)
-					<label for="pollmode" class="form-label">Poll Mode <i class="bi bi-info-circle" title="Poll node when mail available, poll on a schedule or hold mail for collection"></i></label>
+					<span class="label form-label">Poll Mode <i class="bi bi-info-circle" title="Poll node when mail available, poll on a schedule or hold mail for collection"></i></span>
 					<div class="input-group has-validation">
 						<div class="btn-group @error('pollmode') is-invalid @enderror" role="group">
 							<input type="radio" class="btn-check" name="pollmode" id="poll_crash" value="2" @if((int)old('pollmode',($o->pollmode === TRUE) ? 2 : 0) === 2)checked @endif>
@@ -410,7 +410,7 @@ use App\Models\{Mailer,User};
 		<!-- Notes -->
 		<div class="col-12">
 			<label for="notes" class="form-label">Notes</label>
-			<textarea class="form-control" rows=3 name="notes" placeholder="Notes...">{{ old('notes',$o->notes) }}</textarea>
+			<textarea class="form-control" rows=3 id="notes" name="notes" placeholder="Notes...">{{ old('notes',$o->notes) }}</textarea>
 		</div>
 	</div>
 @endcan