Refactor profile.astro to improve form structure and remove unnecessa…

…ry code
withstudiocms · Dec 22, 2024 · bb2abc4 · bb2abc4
1 parent b0bb6d4
commit bb2abc4
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 75 deletions.
diff --git a/packages/studiocms_dashboard/src/components/islands/profile/BasicInfoFallback.astro b/packages/studiocms_dashboard/src/components/islands/profile/BasicInfoFallback.astro
@@ -0,0 +1,40 @@
+---
+import { Button, Card, Input } from '@studiocms/ui/components';
+---
+<Card 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>
+
+<style>
+    .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;
+    }
+</style>
diff --git a/packages/studiocms_dashboard/src/components/islands/profile/UpdatePasswordFallback.astro b/packages/studiocms_dashboard/src/components/islands/profile/UpdatePasswordFallback.astro
@@ -0,0 +1,44 @@
+---
+import { Button, Card, Input } from '@studiocms/ui/components';
+---
+
+<Card fullWidth 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>
+
+<style>
+    .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>
diff --git a/packages/studiocms_dashboard/src/routes/profile.astro b/packages/studiocms_dashboard/src/routes/profile.astro
@@ -1,10 +1,11 @@
 ---
 // 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';
+import BasicInfoFallback from '../components/islands/profile/BasicInfoFallback.astro';
 import UpdatePassword from '../components/islands/profile/UpdatePassword.astro';
+import UpdatePasswordFallback from '../components/islands/profile/UpdatePasswordFallback.astro';
 
 const lang = 'en-us';
 // const t = useTranslations(lang, '@studiocms/dashboard:index');
@@ -20,38 +21,13 @@ const lang = 'en-us';
   <div class="page-content">
 
     <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>
+      <BasicInfoFallback slot="fallback" />
     </BasicInfo>
 
     <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>
+      <UpdatePasswordFallback slot="fallback" />
     </UpdatePassword>
-    
+
   </div>
 </Layout>
 
@@ -61,49 +37,4 @@ 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>
diff --git a/packages/studiocms_dashboard/src/routes/test.astro b/packages/studiocms_dashboard/src/routes/test.astro
@@ -9,7 +9,7 @@ const lang = 'en-us';
 
 <Layout 
   title="Test Page"
-  requiredPermission="visitor"
+  requiredPermission="admin"
   {lang}
 >
   Sus
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ const lang = 'en-us'; @@
     <Layout
       title="Test Page"
-      requiredPermission="visitor"
+      requiredPermission="admin"
       {lang}
     >
       Sus
@@ Expand Down @@