Enh: add TOS links and acknowledgement

app/src/App.vue

@@ -138,6 +138,13 @@ onMounted(() => {
           >
             <YIcon iname="life-ring" /> {{ $t('footer.help') }}
           </BNavItem>
+          <BNavItem
+            href="https://yunohost.org/terms_of_services"
+            target="_blank"
+            link-classes="text-secondary"
+          >
+            <YIcon iname="legal" /> {{ $t('footer.tos') }}
+          </BNavItem>
           <BNavItem
             href="https://donate.yunohost.org/"
             target="_blank"

app/src/components/globals/formItems/CheckboxItem.vue

@@ -26,6 +26,6 @@ const modelValue = defineModel<boolean>()
     :state="state"
     switch
   >
-    {{ label || $t(labels[modelValue ? 'true' : 'false']) }}
+    <span v-html="label || $t(labels[modelValue ? 'true' : 'false'])" />
   </BFormCheckbox>
 </template>

app/src/helpers/validators/customValidators.ts

@@ -56,6 +56,8 @@ const unique = (items: MaybeRef<any[] | null>) =>
     return items_ ? !helpers.req(item) || !items_.includes(item) : true
   })
 
+const checked = (value: boolean) => value === true
+
 export {
   alphalownumdot_,
   domain,
@@ -67,4 +69,5 @@ export {
   appRepoUrl,
   name,
   unique,
+  checked,
 }

app/src/i18n/locales/en.json

@@ -326,7 +326,8 @@
     "footer": {
         "documentation": "Documentation",
         "donate": "Donate",
-        "help": "Need help?"
+        "help": "Need help?",
+        "tos": "Terms of Service"
     },
     "footer_version": "Powered by <a href='https://yunohost.org'>YunoHost</a> {version} ({repo}).",
     "form": {
@@ -337,6 +338,7 @@
         "alphalownumdot_": "Value must be lower-case alphanumeric, dots and underscore characters only.",
         "appRepoUrl": "YunoHost app repository URLs are expected to look like https://domain.tld/path/to/repo_ynh",
         "between": "Value must be between {min} and {max}.",
+        "checked": "Checkbox must be checked.",
         "domain": "Invalid domain name: Must be lower-case alphanumeric, dot and dash characters only",
         "dynDomain": "Invalid domain name: Must be lower-case alphanumeric and dash characters only",
         "email": "Invalid email: must be alphanumeric and <code>_.-</code> characters only (e.g. someone@example.com, s0me-1@example.com)",
@@ -649,6 +651,12 @@
     },
     "tools_webadmin_settings": "Web-admin settings",
     "tools_yunohost_settings": "YunoHost settings",
+    "tos": {
+        "acknowledgement": "TOS acknowledgement",
+        "i_agree": "I agree",
+        "i_have_read": "I have read the <a href='https://yunohost.org/terms_of_services' target='_blank'>Terms of service</a>",
+        "postinstall_acknowledgement": "The YunoHost project is a team of volunteers who have made common cause to create a free operating system for servers, called YunoHost. YunoHost is published under the [GNU Affero General Public License v3](https://www.gnu.org/licenses/agpl-3.0.txt).  In connection with this software, the project administers and makes available several technical and community services for various purposes.  By using these services, you agree to be bound by the following [Terms of service](https://yunohost.org/terms_of_services)."
+    },
     "traceback": "Traceback",
     "udp": "UDP",
     "unauthorized": "Unauthorized",

app/src/views/PostInstall.vue

@@ -31,6 +31,7 @@ if (installed.value) {
 type Steps = 'start' | 'domain' | 'user' | 'rootfsspace-error' | 'login'
 const step = ref<Steps>('start')
 const serverError = ref('')
+const tosAcknowledged = ref(false)
 const domain = ref('')
 const dyndns_recovery_password = ref<string | undefined>()
 
@@ -150,17 +151,30 @@ async function performPostInstall(force = false) {
   <div class="post-install">
     <!-- START STEP -->
     <template v-if="step === 'start'">
-      <p class="alert alert-success">
-        <YIcon iname="thumbs-up" /> {{ $t('postinstall_intro_1') }}
-      </p>
+      <YAlert variant="success" icon="thumbs-up">
+        {{ $t('postinstall_intro_1') }}
+      </YAlert>
 
-      <p class="alert alert-info">
+      <YAlert variant="info">
         <span v-t="'postinstall_intro_2'" />
         <br />
         <span v-html="$t('postinstall_intro_3')" />
-      </p>
-
-      <BButton size="lg" variant="success" @click="goToStep('domain')">
+      </YAlert>
+
+      <YAlert variant="warning">
+        <MarkdownItem
+          :label="t('tos.postinstall_acknowledgement')"
+          class="mb-2"
+        />
+        <CheckboxItem v-model="tosAcknowledged" :label="t('tos.i_agree')" />
+      </YAlert>
+
+      <BButton
+        size="lg"
+        variant="success"
+        :disabled="!tosAcknowledged"
+        @click="goToStep('domain')"
+      >
         {{ $t('begin') }}
       </BButton>
     </template>

app/src/views/_partials/DomainForm.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useForm } from '@/composables/form'
 import {
+  checked,
   domain,
   dynDomain,
   minLength,
@@ -51,13 +52,15 @@ type Form = {
   dynDomain: AdressModelValue
   dynDomainPassword: string
   dynDomainPasswordConfirmation: string
+  tosAcknowledged: boolean
   localDomain: AdressModelValue
 }
 const form = ref<Form>({
   domain: '',
   dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
   dynDomainPassword: '',
   dynDomainPasswordConfirmation: '',
+  tosAcknowledged: false,
   localDomain: { localPart: '', separator: '.', domain: 'local' },
 })
 const fields = {
@@ -118,6 +121,18 @@ const fields = {
     },
   }) satisfies FieldProps<'InputItem', Form['dynDomainPasswordConfirmation']>,
 
+  tosAcknowledged: reactive({
+    component: 'CheckboxItem',
+    label: t('tos.acknowledgement'),
+    rules: computed(() =>
+      selected.value === 'dynDomain' ? { checked } : undefined,
+    ),
+    cProps: {
+      id: 'tos-acknowledged',
+      label: t('tos.i_have_read'),
+    },
+  }) satisfies FieldProps<'CheckboxItem', Form['tosAcknowledged']>,
+
   localDomain: reactive({
     component: 'AdressItem',
     label: t('domain_name'),
@@ -150,6 +165,7 @@ const dynKeys = [
   'dynDomain',
   'dynDomainPassword',
   'dynDomainPasswordConfirmation',
+  'tosAcknowledged',
 ] as (keyof Form)[]
 
 const domainIsVisible = computed(() => {