add attributions and warning for external services in modal, sort statuses

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

apps/dashboard/src/App.vue

@@ -2,7 +2,7 @@
 	<div id="app-dashboard" :style="backgroundStyle">
 		<h2>{{ greeting.text }}</h2>
 		<ul class="statuses">
-			<div v-for="status in registeredStatus"
+			<div v-for="status in sortedRegisteredStatus"
 				:id="'status-' + status"
 				:key="status">
 				<div :ref="'status-' + status" />
@@ -59,6 +59,14 @@
 
 				<h3>{{ t('dashboard', 'Change background image') }}</h3>
 				<BackgroundSettings :background="background" @update:background="updateBackground" />
+
+				<h3>{{ t('dashboard', 'Weather service') }}</h3>
+				<p>
+					{{ t('dashboard', 'For your privacy, the weather data is requested by your Nextcloud server on your behalf so the weather service receives no personal information.') }}
+				</p>
+				<p class="credits--end">
+					<a href="https://api.met.no/doc/TermsOfService" target="_blank" rel="noopener">{{ t('dashboard', 'Weather data from Met.no') }}</a>, <a href="https://wiki.osmfoundation.org/wiki/Privacy_Policy" target="_blank" rel="noopener">{{ t('dashboard', 'geocoding with Nominatim') }}</a>, <a href="https://www.opentopodata.org/#public-api" target="_blank" rel="noopener">{{ t('dashboard', 'elevation data from OpenTopoData') }}</a>.
+				</p>
 			</div>
 		</Modal>
 	</div>
@@ -164,6 +172,9 @@ export default {
 				return indexA - indexB || a.id - b.id
 			})
 		},
+		sortedRegisteredStatus() {
+			return this.registeredStatus.slice().sort((a, b) => a > b)
+		},
 	},
 	watch: {
 		callbacks() {
@@ -494,6 +505,25 @@ export default {
 			padding: 12px 24px;
 			margin: 0;
 		}
+
+		p {
+			max-width: 650px;
+			margin: 0 auto;
+
+			a:hover,
+			a:focus {
+				border-bottom: 2px solid var(--color-border);
+			}
+		}
+
+		.credits--end {
+			padding-bottom: 32px;
+			color: var(--color-text-maxcontrast);
+
+			a {
+				color: var(--color-text-maxcontrast);
+			}
+		}
 	}
 
 	.flip-list-move {