From ac2007715fd76fc8ec751ff52e002e64507ec54a Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 19 Nov 2024 13:14:15 +0000
Subject: [PATCH 1/4] Update copy for wiki creation page

---
 src/components/Cards/CreateWiki.vue | 47 +++++++++++++++++------------
 src/components/Pages/CreateWiki.vue |  2 +-
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/Cards/CreateWiki.vue b/src/components/Cards/CreateWiki.vue
index f3d347f1..cec89dfe 100644
--- a/src/components/Cards/CreateWiki.vue
+++ b/src/components/Cards/CreateWiki.vue
@@ -6,7 +6,7 @@
       </v-toolbar>
       <v-card-text>
 
-        <h3>Site Name
+        <h3>Site name
           <v-tooltip right>
             <template v-slot:activator="{ on }">
               <v-icon v-on="on">mdi-information-outline</v-icon>
@@ -21,21 +21,20 @@
         id="inputSiteName"
         prepend-icon="mdi-format-title"
         name="sitename"
-        label="E.g., Goat Collective"
+        label="e.g., Goat Collective"
         v-model="sitename"
         :disabled="inFlight"
         :error-messages="error['sitename']"
         />
 
-        <h3>Site Domain
+        <h3>Site domain
           <v-tooltip right>
             <template v-slot:activator="{ on }">
               <v-icon v-on="on">mdi-information-outline</v-icon>
             </template>
-            <span>A domain name is the site address people type into their browser to visit your site</span><br/>
-            <span>If you already own a domain you can use it by selecting "Custom Domain"</span><br/>
-            <span>If not you can use a "Free Subdomain"</span><br/>
-            <span>The subdomain must be at least five characters long, and can consist of small Latin letters, digits and hyphens</span><br/>
+            <span>A domain name is what people type into their browser to visit your site.</span><br/>
+            <span>If you own your own domain, you can use it for Wikibase Cloud by selecting "Custom Domain".</span><br/>
+            <span>Otherwise, choose your own name to be a subdomain of wikibase.cloud (five characters minimum, only a-z, 0-9 and "-") by selecting "Free Subdomain". Example: your-name-here1.wikibase.cloud</span><br/>
           </v-tooltip>
         </h3>
 
@@ -48,18 +47,19 @@
                       id="inputSubdomain"
                       prepend-icon="mdi-web"
                       name="subdomain"
-                      label="E.g. goat-collective"
+                      label="e.g., goat-collective"
                       v-model="subdomain"
                       :suffix="SUBDOMAIN_SUFFIX"
                       :disabled="inFlight"
                       :error-messages="error['siteaddress']"
+                      :hint="errorMessages.domainFormat"
         />
 
         <v-text-field v-if="domainRadioChoice === 'own'"
                       id="inputDomain"
                       prepend-icon="mdi-web"
                       name="domain"
-                      label="E.g. goat-collective.com"
+                      label="e.g., goat-collective.com"
                       v-model="domain"
                       :disabled="inFlight"
                       :error-messages="error['siteaddress']"
@@ -68,7 +68,7 @@
         <p v-if="domainRadioChoice === 'own'">This domain should have a CNAME record pointing to:</p>
         <p v-if="domainRadioChoice === 'own'">"{{ CNAME_RECORD }}"</p>
 
-        <h3>Your User
+        <h3>Your user
           <v-tooltip right>
             <template v-slot:activator="{ on }">
               <v-icon v-on="on">mdi-information-outline</v-icon>
@@ -82,13 +82,13 @@
         id="inputUsername"
         prepend-icon="mdi-account"
         name="username"
-        label="E.g., Addshore"
+        label="e.g., Addshore"
         v-model="username"
         :disabled="inFlight"
         :error-messages="error['username']"
         />
 
-        <h3>Terms of Use</h3>
+        <h3>Terms of use</h3>
         <v-checkbox
         v-model="terms"
         :disabled="inFlight"
@@ -105,12 +105,10 @@
                     @click.stop
                     v-on="on"
                   >
-                    Terms of Use
-                  </a>
+                    Terms of Use</a>
                 </template>
                 Opens in new window
-              </v-tooltip>
-              .
+              </v-tooltip>.
             </div>
           </template>
         </v-checkbox>
@@ -156,7 +154,11 @@ export default {
       error: [],
       inFlight: false,
       SUBDOMAIN_SUFFIX: config.SUBDOMAIN_SUFFIX,
-      CNAME_RECORD: config.CNAME_RECORD
+      CNAME_RECORD: config.CNAME_RECORD,
+      errorMessages: {
+        domainTaken: "The domain has already been taken.",
+        domainFormat: "The subdomain must be at least five characters long and may contain only lowercase Latin letters (a-z), digits (0-9) and hyphens (-)."
+      }
     }
   },
   created () {
@@ -220,7 +222,11 @@ export default {
       }
       if (errors.domain) {
         this.hasError = true
-        this.error.siteaddress = errors.domain[0]
+        if (errors.domain[0] === "The domain has already been taken.") {
+          this.error.siteaddress = this.errorMessages.domainTaken
+        } else {
+          this.error.siteaddress = this.errorMessages.domainFormat
+        }
       }
       if (errors.username) {
         this.hasError = true
@@ -262,5 +268,8 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+>>> .v-messages__message {
+  margin-bottom: 10px;
+}
 </style>
diff --git a/src/components/Pages/CreateWiki.vue b/src/components/Pages/CreateWiki.vue
index ce93e04c..fcf585f8 100644
--- a/src/components/Pages/CreateWiki.vue
+++ b/src/components/Pages/CreateWiki.vue
@@ -3,7 +3,7 @@
       <v-container class="fill-height" fluid >
         <v-row align="center" justify="center">
           <v-col class="card-column">
-            <CreateWikiCard title="Create a Wiki" buttonText="Create Wiki"/>
+            <CreateWikiCard title="Create a wiki" buttonText="Create Wiki"/>
           </v-col>
         </v-row>
       </v-container>

From e3e61a1851ee227e56adcf7a860a576a9033941f Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 19 Nov 2024 13:19:15 +0000
Subject: [PATCH 2/4] Fix linting errors

---
 src/components/Cards/CreateWiki.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Cards/CreateWiki.vue b/src/components/Cards/CreateWiki.vue
index cec89dfe..61195cb4 100644
--- a/src/components/Cards/CreateWiki.vue
+++ b/src/components/Cards/CreateWiki.vue
@@ -156,8 +156,8 @@ export default {
       SUBDOMAIN_SUFFIX: config.SUBDOMAIN_SUFFIX,
       CNAME_RECORD: config.CNAME_RECORD,
       errorMessages: {
-        domainTaken: "The domain has already been taken.",
-        domainFormat: "The subdomain must be at least five characters long and may contain only lowercase Latin letters (a-z), digits (0-9) and hyphens (-)."
+        domainTaken: 'The domain has already been taken.',
+        domainFormat: 'The subdomain must be at least five characters long and may contain only lowercase Latin letters (a-z), digits (0-9) and hyphens (-).'
       }
     }
   },
@@ -222,7 +222,7 @@ export default {
       }
       if (errors.domain) {
         this.hasError = true
-        if (errors.domain[0] === "The domain has already been taken.") {
+        if (errors.domain[0] === 'The domain has already been taken.') {
           this.error.siteaddress = this.errorMessages.domainTaken
         } else {
           this.error.siteaddress = this.errorMessages.domainFormat

From 829d1c6fb56ba9ebeffc8f3d5e866e8145d705f4 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 27 Nov 2024 15:05:22 +0000
Subject: [PATCH 3/4] Set VUE_APP_SUBDOMAIN_SUFFIX

---
 .env.development.local | 1 +
 .env.development.mock  | 1 +
 .env.development.prod  | 1 +
 .env.development.test  | 1 +
 4 files changed, 4 insertions(+)

diff --git a/.env.development.local b/.env.development.local
index f193b8c9..08d2bbb8 100644
--- a/.env.development.local
+++ b/.env.development.local
@@ -4,3 +4,4 @@ VUE_APP_API_MOCK=0
 VUE_APP_RECAPTCHA_SITE_KEY="6LeHzbMUAAAAABjNp0vILaWr5ZeYHmteF7rGuZNV" # todo replace with test key
 VUE_APP_BUILD_FOR_DOCKER_IMAGE=0
 VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.localhost
+VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.localhost"
diff --git a/.env.development.mock b/.env.development.mock
index bf8669dc..a7f2dd73 100644
--- a/.env.development.mock
+++ b/.env.development.mock
@@ -4,3 +4,4 @@ VUE_APP_API_MOCK=1
 VUE_APP_RECAPTCHA_SITE_KEY="6LeHzbMUAAAAABjNp0vILaWr5ZeYHmteF7rGuZNV"
 VUE_APP_BUILD_FOR_DOCKER_IMAGE=0
 VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.localhost
+VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.localhost"
diff --git a/.env.development.prod b/.env.development.prod
index f51e4aa3..c67741d9 100644
--- a/.env.development.prod
+++ b/.env.development.prod
@@ -4,3 +4,4 @@ VUE_APP_API_MOCK=0
 VUE_APP_RECAPTCHA_SITE_KEY="6LeHzbMUAAAAABjNp0vILaWr5ZeYHmteF7rGuZNV"
 VUE_APP_BUILD_FOR_DOCKER_IMAGE=0
 VUE_APP_CNAME_RECORD=sites-1.dyna.wbstack.com
+VUE_APP_SUBDOMAIN_SUFFIX=".wikibase.cloud"
diff --git a/.env.development.test b/.env.development.test
index d7ab00b5..0b641226 100644
--- a/.env.development.test
+++ b/.env.development.test
@@ -4,3 +4,4 @@ VUE_APP_API_MOCK=0
 VUE_APP_RECAPTCHA_SITE_KEY="6LeHzbMUAAAAABjNp0vILaWr5ZeYHmteF7rGuZNV" # todo replace with test key
 VUE_APP_BUILD_FOR_DOCKER_IMAGE=0
 VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.localhost
+VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.localhost"

From f944e6d2e2e5476304c42434eb33c992d40fc364 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 27 Nov 2024 15:39:26 +0000
Subject: [PATCH 4/4] Set max-width for tooltips

---
 src/components/Cards/CreateWiki.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Cards/CreateWiki.vue b/src/components/Cards/CreateWiki.vue
index 61195cb4..b3516e47 100644
--- a/src/components/Cards/CreateWiki.vue
+++ b/src/components/Cards/CreateWiki.vue
@@ -272,4 +272,7 @@ export default {
 >>> .v-messages__message {
   margin-bottom: 10px;
 }
+.v-tooltip__content {
+  max-width: 448px;
+}
 </style>