✨ Add domain settings

This is the UI for staart/api#114

Author: AnandChowdhary

locales/en.ts

@@ -75,7 +75,12 @@ export default {
     "billing-subscription-updated": "Your subscription has been updated",
     "billing-source-created": "Your payment method has been created",
     "billing-source-updated": "Your payment method has been updated",
-    "billing-source-deleted": "Your payment method has been deleted"
+    "billing-source-deleted": "Your payment method has been deleted",
+    "domain-unable-to-verify": "We weren't able to verify your domain",
+    "domain-missing-file": "We couldn't find the verification file",
+    "domain-missing-dns": "We didn't find the DNS record",
+    "domain-already-verified": "This domain is already verified",
+    "cannot-invite-domain": "You cannot invite a member from this domain"
   },
   membershipRoles: {
     1: "Owner",

pages/manage/_team/domains/_id.vue

@@ -1,6 +1,6 @@
 <template>
   <main>
-    <Loading v-if="loading" />
+    <Loading v-if="loading" :message="loading" />
     <div v-else-if="domain">
       <div class="row">
         <div>
@@ -47,6 +47,13 @@
               Add a DNS record to your domain
             </label>
           </div>
+          <div v-if="hasError" style="margin-bottom: 2rem">
+            <p>
+              <strong>Error:</strong> We weren't able to verify your domain. If
+              you've just added a DNS record, it may take up to 24 hours to
+              propogate.
+            </p>
+          </div>
           <div v-if="verifyOption === 'file'" class="card card--type-padded">
             <h3>Steps to verify your domain</h3>
             <ol>
@@ -117,6 +124,12 @@
           </div>
         </form>
       </div>
+      <LargeMessage
+        v-else
+        img="undraw_confirmation_2uy0.svg"
+        heading="Domain verified"
+        text="Nothing to do here, you've already verified your domain successfully"
+      />
     </div>
   </main>
 </template>
@@ -134,6 +147,7 @@ import {
   faArrowLeft
 } from "@fortawesome/free-solid-svg-icons";
 import download from "downloadjs";
+import LargeMessage from "@/components/LargeMessage.vue";
 import Loading from "@/components/Loading.vue";
 import Country from "@/components/Country.vue";
 import TimeAgo from "@/components/TimeAgo.vue";
@@ -146,6 +160,7 @@ library.add(faTrash, faPencilAlt, faSync, faArrowLeft);
 @Component({
   components: {
     Country,
+    LargeMessage,
     TimeAgo,
     Loading,
     Input,

pages/manage/_team/settings.vue

@@ -34,6 +34,20 @@
         help="Changing your username can have unintended side effects"
         @input="val => (organization.username = val)"
       />
+      <Checkbox
+        :value="organization.autoJoinDomain"
+        label="Allow users with verified domain emails to automatically join this team"
+        help="You can set up verified domains below to make it easy for your team to join"
+        :question-mark="true"
+        @input="val => (organization.autoJoinDomain = val)"
+      />
+      <Checkbox
+        :value="organization.onlyAllowDomain"
+        label="Only allow users with verified domain emails to join this team"
+        help="We won't let managers invite users with emails from other domains"
+        :question-mark="true"
+        @input="val => (organization.onlyAllowDomain = val)"
+      />
       <button class="button">
         Update settings
       </button>

types/manage.ts

@@ -5,6 +5,8 @@ export interface Organization extends IdRow {
   name?: string;
   stripeCustomerId?: string;
   username: string;
+  autoJoinDomain: boolean;
+  onlyAllowDomain: boolean;
 }
 
 export interface Membership extends IdRow {
@@ -132,7 +134,9 @@ export const emptyOrganization: Organization = {
   updatedAt: new Date().toString(),
   name: "",
   username: "",
-  stripeCustomerId: ""
+  stripeCustomerId: "",
+  autoJoinDomain: false,
+  onlyAllowDomain: false
 };
 export const emptyPagination = {
   data: [],