Merge branch 'main' into i704

Author: usman-khalid

blocks/edit/da-library/da-library.js

@@ -386,7 +386,7 @@ class DaLibrary extends LitElement {
           data-src="${this._blockPreviewPath}"
           src="${this._blockPreviewPath}"
           @load=${this.handlePreviewLoad}
-          allow="clipboard-write *"></iframe>` : html`<div style="margin: 0 24px">${error || 'This block / template has not been previewed.'}</div>`}
+          allow="clipboard-write *"></iframe>` : html`<div style="margin: 0 24px">${error || 'This block/template has not been previewed.'}</div>`}
       </da-dialog>
     `;
   }

blocks/start/start.css

@@ -163,10 +163,16 @@ div.text-container {
 }
 
 p.error-text {
-  color: #d73220;
-  font-weight: 800;
-  margin: 12px;
+  justify-self: center;
+  color: #fff;
+  font-weight: 700;
+  margin-block: 24px;
   text-align: center;
+  background: rgb(215 50 32 / 44%);
+  width: 600px;
+  border-radius: 8px;
+  padding: 6px 0;
+  box-sizing: border-box;
 }
 
 div.template-container {

blocks/start/start.js

@@ -117,8 +117,10 @@ class DaStart extends LitElement {
     showDone: { state: true },
     _goText: { state: true },
     _statusText: { state: true },
+    _errorText: { state: true },
     _templates: { state: true },
     _loading: { state: true },
+    _disableCreate: { state: true },
   };
 
   constructor() {
@@ -156,6 +158,8 @@ class DaStart extends LitElement {
   goToNextStep(e) {
     this.showOpen = false;
     this.showDone = false;
+    this._errorText = undefined;
+    this._disableCreate = undefined;
     e.preventDefault();
     this.activeStep = this.activeStep === 3 ? 1 : this.activeStep += 1;
   }
@@ -164,7 +168,15 @@ class DaStart extends LitElement {
     const { code, content } = this._templates.find((tpl) => tpl.selected) || this._templates[0];
     const hasDemo = !code.includes('aem-boilerplate');
     if (hasDemo) {
-      e.target.disabled = true;
+      this._disableCreate = true;
+
+      const resp = await daFetch(`${DA_ORIGIN}/list/${this.org}/${this.site}`);
+      const json = await resp.json();
+      if (json.length > 0) {
+        this._errorText = 'The target site is not empty. Choose no demo content or a different site.';
+        this._disableCreate = undefined;
+        return;
+      }
 
       const setStatus = (text) => { this._statusText = text; };
 
@@ -288,8 +300,8 @@ class DaStart extends LitElement {
             ${this._loading ? html`<span class="spinner"></span>` : 'Go'}
           </button>
         </form>
+        ${this._errorText ? html`<p class="error-text">${this._errorText}</p>` : nothing}
         <div class="text-container">
-          <p class="error-text">${this._errorText ? this._errorText : nothing}</p>
           <p>Paste your AEM codebase URL above.</p>
           <p>Don't have one, yet? Pick a template below.</p>
         </div>
@@ -335,8 +347,9 @@ class DaStart extends LitElement {
             `)}
           </ul>
         </div>
+        ${this._errorText ? html`<p class="error-text">${this._errorText}</p>` : nothing}
         <div class="step-3-actions">
-          <button class="da-login-button con-button blue button-xl" @click=${this.goToSite}>${this._goText}</button>
+          <button class="da-login-button con-button blue button-xl" @click=${this.goToSite} ?disabled=${this._disableCreate}>${this._goText}</button>
           <p>${this._statusText ? this._statusText : nothing}</p>
         </div>
       </div>