Add the "server info" settings

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

lib/private/Settings/Admin/ServerInfo.php

+<?php
+
+namespace OC\Settings\Admin;
+
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\Settings\ISettings;
+
+/**
+ * Class ServerInfo
+ *
+ * @package OC\Settings\Admin
+ */
+class ServerInfo implements ISettings {
+
+	/**
+	 * @return TemplateResponse
+	 */
+	public function getForm() {
+		$parameters = [];
+		return new TemplateResponse('settings', 'settings/admin/server-info', $parameters, '');
+	}
+
+	/**
+	 * Returns the server info section id.
+	 *
+	 * @return string
+	 */
+	public function getSection() {
+		return 'server-info';
+	}
+
+	/**
+	 * Returns the server info settings priority.
+	 *
+	 * @return int whether the form should be rather on the top or bottom of
+	 * the admin section. The forms are arranged in ascending order of the
+	 * priority values. It is required to return a value between 0 and 100.
+	 */
+	public function getPriority() {
+		return 20;
+	}
+
+}

lib/private/Settings/Manager.php

@@ -231,6 +231,8 @@ class Manager implements IManager {
 			$forms[$form->getPriority()] = [$form];
 			$form = $this->container->query(Admin\Mail::class);
 			$forms[$form->getPriority()] = [$form];
+			$form = $this->container->query(Admin\ServerInfo::class);
+			$forms[$form->getPriority()] = [$form];
 		}
 		if ($section === 'security') {
 			/** @var ISettings $form */

lib/private/Settings/Personal/PersonalInfo.php

@@ -141,7 +141,7 @@ class PersonalInfo implements ISettings {
 			'twitterVerification' => $userData[AccountManager::PROPERTY_TWITTER]['verified'],
 			'groups' => $this->getGroups($user),
 			'dataLocation' => 'Germany',
-			'provider' => 'Hetzner Online GmbH',
+			'provider' => 'Mustermann GmbH',
 			'providerLink' => 'https://www.hetzner.de/',
 			'providerPrivacyLink' => 'https://www.hetzner.de/rechtliches/datenschutz',
 			'encryptionEnabled' => true || $this->encryptionManager->isEnabled(),

settings/css/_server-info.scss

+.server-info-settings {
+	.label {
+		display: block;
+	}
+
+	.form-input {
+		margin-bottom: 10px;
+		width: 100%;
+	}
+
+	.margin-bottom {
+		margin-bottom: 15px;
+	}
+
+	.form-actions {
+		text-align: right;
+
+		.button {
+			align-items: center;
+			display: inline-flex;
+			margin: 0;
+			transition: background-color 500ms linear;
+
+			.default-label,
+			.working-label,
+			.success-label,
+			.error-label {
+				align-items: center;
+				gap: 4px;
+			}
+
+			.working-label,
+			.success-label,
+			.error-label {
+				display: none;
+			}
+		}
+
+		.button-working,
+		.button-success,
+		.button-error {
+			background-color: $color-background-dark;
+			color: $color-text-lighter;
+			opacity: 1;
+
+			.default-label {
+				display: none;
+			}
+		}
+
+		.button-working {
+			.working-label {
+				display: inline-flex;
+			}
+		}
+
+		.button-success {
+			background-color: $color-success;
+			border-color: darken($color-success, 10%);
+			color: $color-primary-text-dark;
+
+			.success-label {
+				display: inline-flex;
+			}
+		}
+
+		.button-error {
+			background-color: $color-error;
+			border-color: darken($color-error, 10%);
+			color: $color-primary-text-dark;
+
+			.error-label {
+				display: inline-flex;
+			}
+		}
+	}
+
+	@media (min-width: 1000px) {
+		.label {
+			display: inline-block;
+			text-align: right;
+			width: 175px;
+		}
+
+		.form-input {
+			margin-left: 5px;
+			width: 225px;
+		}
+
+		.form-actions {
+			margin-left: 180px;
+			width: 225px;
+		}
+	}
+}

settings/css/_where-is-your-data.scss

+.where-is-your-data {
+	// @todo replace by common link style as soon as available
+	a:not(.icon-info) {
+		border-bottom: 1px dotted;
+	}
+}

settings/css/settings.scss

@@ -2,6 +2,9 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
+@import "server-info";
+@import "where-is-your-data";
+
 input {
 	&#openid, &#webdav {
 		width: 20em;
@@ -1624,10 +1627,3 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 		}
 	}
 }
-
-.where-is-your-data {
-	// @todo replace by common Nextcloud link style as soon as available
-	a {
-		border-bottom: 1px dotted;
-	}
-}

settings/templates/settings/admin/server-info.php

+<?php ?>
+
+<div class="section server-info-settings">
+	<h2><?php p($l->t('Server info')); ?></h2>
+	<p class="settings-hint">
+		<?php p($l->t('Enter common info about your Nextcloud instance here. These info are visible to all users.')) ?>
+	</p>
+	<form>
+		<div class="margin-bottom">
+			<label class="label" for="location"><?php p($l->t('Server location')); ?></label>
+			<input
+				class="form-input"
+				id="location"
+				name="location"
+				type="text"
+				maxlength="100"
+				placeholder="<?php p($l->t('country')); ?>">
+		</div>
+		<div>
+			<label class="label" for="provider"><?php p($l->t('Service provider')); ?></label>
+			<input
+				class="form-input"
+				id="provider"
+				name="provider"
+				type="text"
+				maxlength="100"
+				placeholder="<?php p($l->t('company or person')); ?>">
+		</div>
+		<div>
+			<label class="label" for="providerWebsite"><?php p($l->t('Website')); ?></label>
+			<input
+				class="form-input"
+				id="providerWebsite"
+				name="providerWebsite"
+				type="url"
+				maxlength="200"
+				placeholder="<?php p($l->t('link to website')); ?>">
+		</div>
+		<div class="margin-bottom">
+			<label class="label" for="providerPrivacyLink"><?php p($l->t('Link to privacy policy')); ?></label>
+			<input
+				class="form-input"
+				id="providerPrivacyLink"
+				name="providerPrivacyLink"
+				type="url"
+				maxlength="200"
+				placeholder="<?php p($l->t('link to privacy policy')); ?>">
+		</div>
+		<div class="margin-bottom">
+			<label class="label" for="admin"><?php p($l->t('Admin contact')); ?></label>
+			<select class="form-input" name="admin">
+				<option>Michael Weimann</option>
+				<option>Max Mustermann</option>
+				<option>Peter Petrowski</option>
+			</select>
+		</div>
+		<div class="form-actions">
+			<button id="test123" class="button">
+				<span class="default-label">
+					<?php p($l->t('Save')); ?>
+				</span>
+				<span class="working-label">
+					<span class="icon-loading-small-dark"></span>
+					<?php p($l->t('saving…')); ?>
+				</span>
+				<span class="success-label">
+					<span class="icon-checkmark-white"></span>
+					<?php p($l->t('saved')); ?>
+				</span>
+				<span class="error-label">
+					<span class="icon-error-white"></span>
+					<?php p($l->t('error saving settings')); ?>
+				</span>
+			</button>
+			<script>
+				const button = $('#test123');
+				button.on('click', (event) => {
+					event.stopImmediatePropagation();
+					event.preventDefault();
+					button.prop('disabled', true);
+					button.addClass('button-working');
+					setTimeout(() => {
+						button.removeClass('button-working');
+						button.addClass('button-success');
+					}, 1500);
+				});
+			</script>
+		</div>
+	</form>
+</div>