add fallbacks to server islands

withstudiocms · Dec 22, 2024 · bba5bf5 · bba5bf5
1 parent b6b4c02
commit bba5bf5
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 4 deletions.
diff --git a/packages/studiocms_dashboard/src/components/DoubleSidebar.astro b/packages/studiocms_dashboard/src/components/DoubleSidebar.astro
@@ -13,6 +13,7 @@ import SidebarLink from './SidebarLink.astro';
 import Admin from './islands/sidebar/Admin.astro';
 import UserAccount from './islands/sidebar/UserAccount.astro';
 import VersionCheck from './islands/sidebar/VersionCheck.astro';
+import VersionCheckPart from './shared-parts/VersionCheck.astro';
 
 const { versionCheck } = dashboardConfig;
 
@@ -27,7 +28,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:sidebar');
         <StudioCMSLogo class={'sidebar-logo'} />
         <div class="sidebar-header-text">
           <span class="sidebar-title">StudioCMS</span>
-          { versionCheck && <VersionCheck server:defer />}
+          { versionCheck && <VersionCheck server:defer><VersionCheckPart slot="fallback" /></VersionCheck>}
         </div>
       </div>
       <Divider background='background-step-1'>{t("category-1-header")}</Divider>

diff --git a/packages/studiocms_dashboard/src/components/SingleSidebar.astro b/packages/studiocms_dashboard/src/components/SingleSidebar.astro
@@ -8,6 +8,7 @@ import SidebarLink from './SidebarLink.astro';
 import Admin from './islands/sidebar/Admin.astro';
 import UserAccount from './islands/sidebar/UserAccount.astro';
 import VersionCheck from './islands/sidebar/VersionCheck.astro';
+import VersionCheckPart from './shared-parts/VersionCheck.astro';
 
 const { versionCheck } = dashboardConfig;
 
@@ -21,7 +22,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:sidebar');
       <StudioCMSLogo class={'sidebar-logo'} />
       <div class="sidebar-header-text">
         <span class="sidebar-title">StudioCMS</span>
-        { versionCheck && <VersionCheck server:defer />}
+        { versionCheck && <VersionCheck server:defer><VersionCheckPart slot="fallback" /></VersionCheck>}
       </div>
     </div>
     <Divider background='background-step-1'>{t("category-1-header")}</Divider>

diff --git a/packages/studiocms_dashboard/src/routes/profile.astro b/packages/studiocms_dashboard/src/routes/profile.astro
@@ -1,5 +1,6 @@
 ---
 // import { useTranslations } from 'studiocms:i18n';
+import { Button, Card, Input } from '@studiocms/ui/components';
 import { Layout } from '../components';
 import PageHeader from '../components/PageHeader.astro';
 import BasicInfo from '../components/islands/profile/BasicInfo.astro';
@@ -18,9 +19,84 @@ const lang = 'en-us';
 
   <div class="page-content">
 
-    <BasicInfo server:defer />
+    <BasicInfo server:defer>
+      <Card slot="fallback" fullWidth class="basic-info-form">
+
+        <div slot="header">
+            <h2>Basic Info</h2>
+
+            <div class="form-header">
+                <Button type='submit' size='sm' variant={'solid'} color='primary' disabled>Save</Button> 
+            </div>
+        </div>
+
+        <div class="form-inputs">
+
+            <Input label='Display Name' placeholder='John Doe' disabled isRequired name='display-name' />
+
+            <Input label='Username' placeholder='johndoe' disabled isRequired name='username' />
+
+            <Input label='Email' placeholder='[email protected]' disabled isRequired name='email' />
+
+            <Input label='Website' placeholder='https://doe.com' disabled name='account-url' />
+
+        </div>
+      </Card>
+    </BasicInfo>
 
-    <UpdatePassword server:defer />
+    <UpdatePassword server:defer>
+      <Card fullWidth slot="fallback" class="password-update-form">
+
+        <div slot="header">
+          <h2>Update Password</h2>
+
+          <div class="form-header">
+              <Button 
+                  type='submit' 
+                  variant='solid' 
+                  color='primary' 
+                  disabled
+                   size='sm'
+                  >Save
+              </Button> 
+          </div>
+      </div>
+
+      <div class="password-form-entries">
+
+          <Input 
+              label='Current Password' 
+              type='password'
+              placeholder='********' 
+              isRequired
+              disabled
+              name='current-password' 
+              autocomplete='current-password'
+              />
+
+          <Input 
+              label='New Password' 
+              type='password'
+              placeholder='********' 
+              isRequired 
+              disabled
+              autocomplete='password new_password'
+              name='new-password' 
+              />
+
+          <Input 
+              label='Confirm New Password' 
+              type='password'
+              placeholder='********' 
+              isRequired 
+              disabled
+              autocomplete='password new_password'
+              name='confirm-new-password' 
+              />
+
+        </div>
+      </Card>
+    </UpdatePassword>
 
   </div>
 </Layout>
@@ -31,4 +107,49 @@ const lang = 'en-us';
     flex-direction: column;
     gap: 1rem;
   }
+
+  .basic-info-form {
+    position: relative;
+  }
+
+  .basic-info-form .form-inputs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+
+    @media screen and (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .form-header {
+    display: block;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+    .password-update-form {
+        position: relative;
+    }
+
+    .password-update-form .password-form-entries {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        @media (max-width: 1024px) {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .form-header {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
 </style>