src/app/modules/pro/pro.service.ts

@@ -68,6 +68,27 @@ export class ProService {
     return true;
   }
 
+  async domainCheck(
+    domain: string,
+    remoteUser: string | null = null
+  ): Promise<{ isValid: boolean }> {
+    const endpoint = ['api/v2/pro/settings/domain'];
+
+    if (remoteUser) {
+      endpoint.push(remoteUser);
+    }
+
+    const { isValid } = (await this.client.get(
+      endpoint.join('/'),
+      {
+        domain,
+      },
+      { cache: false }
+    )) as any;
+
+    return { isValid };
+  }
+
   async upload(type: string, file, remoteUser: string | null = null) {
     const endpoint = ['api/v2/pro/settings/assets', type];
 

src/app/modules/pro/settings/settings.component.html

@@ -406,12 +406,32 @@
 
               <div class="m-proSettings__field">
                 <label for="domain" i18n>Domain</label>
+
                 <input
+                  class="m-proSettingsField__input--hasIcon"
                   type="text"
                   id="domain"
                   name="domain"
                   [(ngModel)]="settings.domain"
+                  (keydown)="domainValidationSubject.next($event)"
                 />
+
+                <m-tooltip
+                  *ngIf="isDomainValid !== null"
+                  [icon]="isDomainValid ? 'check' : 'close'"
+                  class="m-proSettingsDomain__validIcon"
+                  [class.m-proSettingsDomain__validIcon--true]="isDomainValid"
+                  [class.m-proSettingsDomain__validIcon--false]="!isDomainValid"
+                >
+                  <ng-container *ngIf="isDomainValid; else notValidDomain" i18n>
+                    This domain is available
+                  </ng-container>
+                  <ng-template #notValidDomain>
+                    <ng-container i18n>
+                      This domain is taken
+                    </ng-container>
+                  </ng-template>
+                </m-tooltip>
               </div>
 
               <div class="m-proSettings__field">

src/app/modules/pro/settings/settings.component.scss

@@ -61,6 +61,10 @@
 
       @media screen and (max-width: 768px) {
         max-width: 100%;
+
+        &.m-proSettingsField__input--hasIcon {
+          max-width: calc(100% - 24px);
+        }
       }
 
       @include m-theme() {
@@ -156,6 +160,36 @@
     }
   }
 
+  .m-proSettingsDomain__validIcon {
+    position: relative;
+    top: -1px;
+    margin-left: 4px;
+
+    i.material-icons {
+      font-size: 18px;
+      line-height: 18px;
+      vertical-align: middle;
+    }
+
+    .m-tooltip--bubble {
+      width: 150px;
+      left: auto;
+      right: 0;
+    }
+
+    &.m-proSettingsDomain__validIcon--true i.material-icons {
+      @include m-theme() {
+        color: themed($m-green);
+      }
+    }
+
+    &.m-proSettingsDomain__validIcon--false i.material-icons {
+      @include m-theme() {
+        color: themed($m-red);
+      }
+    }
+  }
+
   .m-proSettings__previewBtn {
     margin-left: 0.35em;
 

src/app/modules/pro/settings/settings.component.ts

@@ -7,12 +7,13 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
 import { ProService } from '../pro.service';
 import { Session } from '../../../services/session';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MindsTitle } from '../../../services/ux/title';
-import { Subscription } from 'rxjs';
 import { SiteService } from '../../../common/services/site.service';
+import { debounceTime } from 'rxjs/operators';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
@@ -38,10 +39,16 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
 
   user: string | null = null;
 
+  isDomainValid: boolean | null = null;
+
   error: string;
 
+  domainValidationSubject: Subject<any> = new Subject<any>();
+
   protected param$: Subscription;
 
+  protected domainValidation$: Subscription;
+
   @ViewChild('logoField', { static: false })
   protected logoField: ElementRef<HTMLInputElement>;
 
@@ -67,10 +74,15 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
 
       this.load();
     });
+
+    this.domainValidation$ = this.domainValidationSubject
+      .pipe(debounceTime(300))
+      .subscribe(() => this.validateDomain());
   }
 
   ngOnDestroy() {
     this.param$.unsubscribe();
+    this.domainValidation$.unsubscribe();
   }
 
   async load() {
@@ -92,6 +104,25 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
     this.detectChanges();
   }
 
+  async validateDomain() {
+    this.isDomainValid = null;
+    this.detectChanges();
+
+    try {
+      const { isValid } = await this.service.domainCheck(
+        this.settings.domain,
+        this.user
+      );
+
+      this.isDomainValid = isValid;
+    } catch (e) {
+      this.isDomainValid = null;
+      this.error = (e && e.message) || 'Error checking domain';
+    }
+
+    this.detectChanges();
+  }
+
   onAssetFileSelect(type: string, files: FileList | null) {
     if (!files || !files.item(0)) {
       this.settings[type] = null;