Improved: Sharing/Integration configuration (#4269)

* stick plus button to select list

* HTML improved very much

* drag and drop improved

* add URL button

* fix remove button behavior

* prepare for PR#4238

* improve length of inputs

* First draft of documentation of the sharing services

* new config option: depricated

* i18n for depricated text

* Doc: Blogotext depricated to 2023

* dropdown menu with config link and depricated sign

* Update entry_bottom.phtml

* Update 08_sharing_services.md

* Update template.rtl.css

* Typo Deprecated/Depricated

* typo

* updated the documentation comment

* Update shares.php

* Update app/i18n/fr/conf.php

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update p/scripts/draggable.js

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update p/scripts/draggable.js

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Documentation: services from #4270

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

1 files changed, 80 insertions, 44 deletions

diff --git a/app/views/configure/integration.phtml b/app/views/configure/integration.phtml
index c8d299f44..15dbb48ed 100644
--- a/app/views/configure/integration.phtml
+++ b/app/views/configure/integration.phtml
@@ -11,21 +11,28 @@
 	<h1><?= _t('conf.sharing') ?></h1>
 
 	<form method="post" action="<?= _url('configure', 'integration') ?>"
-		data-simple='<div class="form-group" id="group-share-##key##"><label class="group-name">##label##</label><div class="group-controls"><div class="stick">
-			<input type="text" id="share_##key##_name" name="share[##key##][name]" class="extend" value="##label##" placeholder="<?= _t('conf.sharing.share_name') ?>" size="64" />
-			<input type="url" id="share_##key##_url" name="share[##key##][url]" class="extend" value="" placeholder="<?= _t('gen.short.not_applicable') ?>" size="64" disabled="disabled" />
-			<a href="#" class="remove btn btn-attention"><?= _i('close') ?></a></div>
-			<input type="hidden" id="share_##key##_type" name="share[##key##][type]" value="##type##" /></div></div>'
-		data-advanced='<div class="form-group" id="group-share-##key##"><label class="group-name">##label##</label><div class="group-controls">
+		data-simple='<formgroup><legend>##label##</legend>
+			<input type="hidden" id="share_##key##_type" name="share[##key##][type]" value="##type##" />
+			<div class="form-group" id="group-share-##key##">
+			<label class="group-name" for="share_##key##_name"><?= _t('conf.sharing.share_name') ?></label><div class="group-controls">
+			<input type="text" id="share_##key##_name" name="share[##key##][name]" value="##label##" />
+			</div>
+			</div></formgroup>'
+		data-advanced='<formgroup class="group-share"><legend>##label##</legend>
 			<input type="hidden" id="share_##key##_type" name="share[##key##][type]" value="##type##" />
 			<input type="hidden" id="share_##key##_method" name="share[##key##][method]" value="##method##" />
 			<input type="hidden" id="share_##key##_field" name="share[##key##][field]" value="##field##" />
-			<div class="stick">
-			<input type="text" id="share_##key##_name" name="share[##key##][name]" class="extend" value="" placeholder="<?= _t('conf.sharing.share_name') ?>" size="64" />
-			<input type="url" id="share_##key##_url" name="share[##key##][url]" class="extend" value="" placeholder="<?= _t('conf.sharing.share_url') ?>" size="64" />
-			<a href="#" class="remove btn btn-attention" title="<?= _t('conf.sharing.remove') ?>"><?= _i('close') ?></a></div>
-			<a target="_blank" rel="noreferrer" class="btn" title="<?= _t('conf.sharing.more_information') ?>" href="##help##"><?= _i('help') ?></a>
-			</div></div>' class="draggableList">
+			<div class="form-group" id="group-share-##key##"><label class="group-name" for="share_##key##_name"><?= _t('conf.sharing.share_name') ?></label><div class="group-controls">
+			<input type="text" id="share_##key##_name" name="share[##key##][name]" value="" />
+			</div>
+			<div class="form-group" id="group-share-##key##"><label class="group-name" for="share_##key##_url"><?= _t('conf.sharing.share_url') ?></label><div class="group-controls">
+			<input type="url" id="share_##key##_url" name="share[##key##][url]" class="long" value="" required />
+			<p class="help"><?= _i('help') ?> <a href="##help##" target="_blank" rel="noreferrer"><?= _t('conf.sharing.more_information') ?></a></p>
+			</div><div class="form-group">
+				<div class="group-controls">
+					<button type="button" class="remove btn btn-attention" title="<?= _t('conf.sharing.remove') ?>"><?= _t('gen.action.remove') ?></button>
+				</div>
+			</div></formgroup>' class="draggableList">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 
 		<?php
@@ -33,46 +40,75 @@
 				$share = FreshRSS_Share::get($share_options['type']);
 				$share->update($share_options);
 		?>
-			<div class="form-group group-share" id="group-share-<?= $key ?>" draggable="true">
-				<label class="group-name">
-					<?= $share->name(true) ?>
+		<formgroup class="group-share dragbox" id="group-share-<?= $key ?>">
+			<legend draggable="true"><?= $share->name(true) ?></legend>
+			<input type="hidden" id="share_<?= $key ?>_type" name="share[<?= $key ?>][type]" value="<?= $share->type() ?>" />
+			<input type="hidden" id="share_<?= $key ?>_method" name="share[<?= $key ?>][method]" value="<?= $share->method() ?>" />
+			<input type="hidden" id="share_<?= $key ?>_field" name="share[<?= $key ?>][field]" value="<?= $share->field() ?>" />
+			
+			<?php if ($share->isDeprecated()) { ?>
+			<div class="prompt alert alert-warn">
+				<p><?= _t('conf.sharing.deprecated') ?></p>
+			</div>
+			<?php } ?>
+
+			<div class="form-group">
+				<label class="group-name" for="share_<?= $key ?>_name">
+					<?= _t('conf.sharing.share_name') ?>
 				</label>
 				<div class="group-controls">
-					<input type='hidden' id='share_<?= $key ?>_type' name="share[<?= $key ?>][type]" value='<?= $share->type() ?>' />
-					<input type='hidden' id='share_<?= $key ?>_method' name="share[<?= $key ?>][method]" value='<?= $share->method() ?>' />
-					<input type='hidden' id='share_<?= $key ?>_field' name="share[<?= $key ?>][field]" value='<?= $share->field() ?>' />
-					<div class="stick">
-						<input type="text" id="share_<?= $key ?>_name" name="share[<?= $key ?>][name]" class="extend" value="<?= $share->name() ?>"
-							placeholder="<?= _t('conf.sharing.share_name') ?>" size="64" data-leave-validation="<?= $share->name() ?>"/>
-					<?php if ($share->formType() === 'advanced') { ?>
-						<input type="url" id="share_<?= $key ?>_url" name="share[<?= $key ?>][url]" class="extend" value="<?= $share->baseUrl() ?>"
-							placeholder="<?= _t('conf.sharing.share_url') ?>" size="64" data-leave-validation="<?= $share->baseUrl() ?>"/>
-					<?php } else { ?>
-						<input type="url" id="share_<?= $key ?>_url" name="share[<?= $key ?>][url]" class="extend" value="<?= $share->baseUrl() ?>"
-							placeholder="<?= _t('gen.short.not_applicable') ?>" size="64" disabled="disabled" />
-					<?php } ?>
-						<a href='#' class='remove btn btn-attention' title="<?= _t('conf.sharing.remove') ?>"><?= _i('close') ?></a>
+					<input type="text" id="share_<?= $key ?>_name" name="share[<?= $key ?>][name]" value="<?= $share->name() ?>"
+							data-leave-validation="<?= $share->name() ?>" />
+				</div>
+			</div>
+			
+			<div class="form-group">
+				<?php if ($share->formType() === 'advanced') { ?>
+					<label class="group-name" for="share_<?= $key ?>_url">
+						<?= _t('conf.sharing.share_url') ?>
+					</label>
+					
+					<div class="group-controls">
+						<div class="stick">
+							<input type="url" id="share_<?= $key ?>_url" name="share[<?= $key ?>][url]" class="long" value="<?= $share->baseUrl() ?>"
+								data-leave-validation="<?= $share->baseUrl() ?>" required />
+							<a class="btn open-url" target="_blank" rel="noreferrer" href="<?= $share->baseUrl() ?>" title="<?= _t('gen.action.see_url') ?>" data-input="share_<?= $key ?>_url"><?= _i('link') ?></a>
+						</div>
+						<p class="help"><?= _i('help') ?> <a href="<?= $share->help() ?>" target="_blank" rel="noreferrer"><?= _t('conf.sharing.more_information') ?></a></p>
 					</div>
-					<?php if ($share->formType() === 'advanced') { ?>
-						<a target="_blank" rel="noreferrer" class="btn" title="<?= _t('conf.sharing.more_information') ?>" href="<?= $share->help() ?>"><?= _i('help') ?></a>
-					<?php } ?>
+				<?php } ?>
+			</div>
+			
+			<div class="form-group">
+				<div class="group-controls">
+					<button type="button" class="remove btn btn-attention" title="<?= _t('conf.sharing.remove') ?>"><?= _t('gen.action.remove') ?></button>
 				</div>
 			</div>
+
+
+		</formgroup>
 		<?php } ?>
 
-		<div class="form-group">
-			<div class="group-controls">
-				<select>
-					<?php foreach (FreshRSS_Share::enum() as $share) { ?>
-					<option value='<?= $share->type() ?>' data-form='<?= $share->formType() ?>' data-help='<?= $share->help() ?>'
-						data-method='<?= $share->method() ?>' data-field='<?= $share->field() ?>'>
-						<?= $share->name(true) ?>
-					</option>
-					<?php } ?>
-				</select>
-				<a href='#' class='share add btn' title="<?= _t('conf.sharing.add') ?>"><?= _i('add') ?></a>
+		<formgroup>
+			<legend>
+				<?= _t('conf.sharing.add') ?>
+			</legend>
+			<div class="form-group">
+				<div class="group-controls">
+					<div class="stick">
+						<select>
+							<?php foreach (FreshRSS_Share::enum() as $share) { ?>
+							<option value='<?= $share->type() ?>' data-form='<?= $share->formType() ?>' data-help='<?= $share->help() ?>'
+								data-method='<?= $share->method() ?>' data-field='<?= $share->field() ?>'>
+								<?= $share->name(true) ?>
+							</option>
+							<?php } ?>
+						</select>
+						<a href='#' class='share add btn' title="<?= _t('conf.sharing.add') ?>"><?= _i('add') ?></a>
+					</div>
+				</div>
 			</div>
-		</div>
+		</formgroup>
 
 		<div class="form-group form-actions">
 			<div class="group-controls">