added notes to api section

api/classes/organizr.class.php

@@ -2209,7 +2209,7 @@ class Organizr
 			),
 			'API' => array(
 				array(
-					'type' => 'password-alt',
+					'type' => 'password-alt-copy',
 					'name' => 'organizrAPI',
 					'label' => 'Organizr API',
 					'value' => $this->config['organizrAPI']
@@ -2220,7 +2220,8 @@ class Organizr
 					'class' => 'newAPIKey',
 					'icon' => 'fa fa-refresh',
 					'text' => 'Generate'
-				)
+				),
+				$this->settingsOption('notice', null, ['title' => 'API Documentation', 'body' => 'The documentation for Organizr\'s API is included with this installation.  To access the docs, use the button below.', 'bodyHTML' => '<br/><br/><div class="row"><div class="col-lg-2 col-sm-4 col-xs-12"><a href="' . $this->getServerPath() . 'docs/" target="_blank" class="btn btn-block btn-primary text-white" lang="en">Organizr Docs</a></div></div>'])
 			),
 			'Authentication' => array(
 				array(

api/functions/option-functions.php

@@ -141,6 +141,7 @@ trait OptionsFunction
 									<div class="panel-wrapper collapse in" aria-expanded="true">
 										<div class="panel-body">
 											<span lang="en">' . ($extras['body'] ?? '') . '</span>
+											<span>' . ($extras['bodyHTML'] ?? '') . '</span>
 										</div>
 									</div>
 								</div>

css/organizr.css

@@ -4602,4 +4602,7 @@ td.mouse-grab.sort-tabs-handle {
 .multi-selected,
 .tabEditor.multi-selected:hover {
     background: rgba(0,0,0,.25) !important;
+}
+.input-group-btn:not(:last-child) .btn{
+    border-radius: 0;
 }

js/custom.js

@@ -1454,8 +1454,8 @@ $(document).on("click", ".testEditTab", function () {
 });
 // new api key
 $(document).on("click", ".newAPIKey", function () {
-    $('#settings-main-form [name=organizrAPI]').val(generateCode());
-    $('#settings-main-form [name=organizrAPI]').change();
+	let newCode = generateCode();
+    $('#settings-main-form [name=organizrAPI]').val(newCode).change().parent().find('.clipboard').attr('data-clipboard-text',newCode);
 });
 // purge log
 $(document).on("click", ".purgeLog", function () {

js/functions.js

@@ -1119,6 +1119,9 @@ function buildFormItem(item){
 		case 'password-alt':
 			return smallLabel+'<div class="input-group">'+pwgMgr+'<input data-changed="false" lang="en" type="password" class="password-alt form-control'+extraClass+'"'+placeholder+value+id+name+disabled+type+label+attr+' autocomplete="new-password" /><span class="input-group-btn"> <button class="btn btn-default showPassword" type="button"><i class="fa fa-eye passwordToggle"></i></button></span></div>';
 			break;
+		case 'password-alt-copy':
+			return smallLabel+'<div class="input-group">'+pwgMgr+'<input data-changed="false" lang="en" type="password" class="password-alt form-control'+extraClass+'"'+placeholder+value+id+name+disabled+type+label+attr+' autocomplete="new-password" /><span class="input-group-btn"> <button class="btn btn-primary clipboard" type="button" data-clipboard-text="'+item.value+'"><i class="fa icon-docs"></i></button></span><span class="input-group-btn"> <button class="btn btn-inverse showPassword" type="button"><i class="fa fa-eye passwordToggle"></i></button></span></div>';
+			break;
 		case 'hidden':
 			return '<input data-changed="false" lang="en" type="hidden" class="form-control'+extraClass+'"'+placeholder+value+id+name+disabled+type+label+attr+' />';
 			break;