studiocms 0.1.0-beta.10

package/dist/components/dashboard/islands/profile/BasicInfo.astro

@@ -0,0 +1,140 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Button, Card, Icon, Input } from 'studiocms:ui/components';
+
+const data = await getUserData(Astro);
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:profile');
+---
+
+<Card fullWidth as="form" id="basic-info-form" class="basic-info-form" action={StudioCMSRoutes.endpointLinks.profile}>
+
+    <div slot="header">
+        <h2>
+            <t-profile-basic key="basic-info-header">{t('basic-info-header')}</t-profile-basic>
+        </h2>
+    
+        <div class="form-header">
+            <Button type='submit' size='sm' variant={'solid'} color='primary'>
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                <t-profile-basic key="basic-info-save-button">
+                    {t('basic-info-save-button')}
+                </t-profile-basic>
+            </Button> 
+        </div>
+    </div>
+
+    <div class="form-inputs">
+
+        <Input label={t('basic-info-display-name')} placeholder='John Doe' value={data.user?.name} isRequired name='display-name' />
+
+        <Input label={t('basic-info-username')} placeholder='johndoe' value={data.user?.username} isRequired name='username' />
+    
+        <Input label={t('basic-info-email')} placeholder='john@doe.com' value={data.user?.email} isRequired name='email' />
+    
+        <Input label={t('basic-info-website')} placeholder='https://doe.com' value={data.user?.url} name='account-url' />
+
+    </div>
+
+</Card>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+        updateElmLabel,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:profile';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+    
+    i18n.subscribe(comp => {
+        updateElmLabel('display-name', comp['basic-info-display-name']);
+        updateElmLabel('username', comp['basic-info-username']);
+        updateElmLabel('email', comp['basic-info-email']);
+        updateElmLabel('account-url', comp['basic-info-website']);
+    });
+
+    if (!customElements.get('t-profile-basic')) {
+        customElements.define('t-profile-basic', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+
+<script>
+    import { toast } from "studiocms:ui/components";
+
+    const basicInfoForm = document.getElementById('basic-info-form') as HTMLFormElement;
+        basicInfoForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(basicInfoForm);
+
+            const data = {
+                mode: 'basic',
+                data: {
+                    name: formData.get('display-name') as string,
+                    username: formData.get('username') as string,
+                    email: formData.get('email') as string,
+                    url: formData.get('account-url') ?? null,
+                }
+            }
+
+            const response = await fetch(basicInfoForm.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data)
+            })
+
+            const res = await response.json();
+
+            if (response.status !== 200) {
+                toast({
+                    title: 'Error',
+                    description: res.error,
+                    type: 'danger'
+                })
+            }
+
+            if (response.status === 200) {
+                toast({
+                    title: 'Success',
+                    description: res.message,
+                    type: 'success'
+                })
+            }
+
+        });
+</script>
+
+<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>

package/dist/components/dashboard/islands/profile/BasicInfoFallback.astro

@@ -0,0 +1,43 @@
+---
+import { Button, Card, Icon, 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>
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                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='john@doe.com' 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>

package/dist/components/dashboard/islands/profile/SocialSignin.astro

@@ -0,0 +1,181 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { useTranslations } from 'studiocms:i18n';
+import studioCMS_SDK from 'studiocms:sdk';
+import type { CombinedUserData } from 'studiocms:sdk/types';
+import { Button, Card, Center, Icon } from 'studiocms:ui/components';
+import { providerData } from './oAuthButtonProviders.js';
+
+const { user } = await getUserData(Astro);
+
+let userOAuthData: CombinedUserData['oAuthData'] | undefined;
+
+if (user) {
+	const userFullData = await studioCMS_SDK.GET.databaseEntry.users.byId(user.id);
+
+	if (userFullData) {
+		userOAuthData = userFullData.oAuthData;
+	}
+}
+
+const hasOAuthData = userOAuthData && userOAuthData.length > 0;
+
+const connectedAccounts: { provider: string }[] = [];
+
+if (hasOAuthData) {
+	for (const provider in userOAuthData) {
+		connectedAccounts.push({ provider });
+	}
+}
+
+const socialProviders = providerData.map((providerData) => ({
+	...providerData,
+	connected: connectedAccounts.some(
+		({ provider }) => provider === providerData.label.toLowerCase()
+	),
+}));
+
+const connectedProviders = socialProviders.filter(({ connected }) => connected);
+const unconnectedProviders = socialProviders.filter(({ connected }) => !connected);
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:profile');
+---
+<Card fullWidth class="social-signin-options">
+
+    <div slot="header">
+        <h2>
+            <t-profile-socials key="social-accounts-header">{t('social-accounts-header')}</t-profile-socials>
+        </h2>
+    </div>
+
+    <div class="social-signin-cards">
+
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>
+                    <t-profile-socials key="social-accounts-connected">{t('social-accounts-connected')}</t-profile-socials>
+                </h3>
+            </div>
+
+            <div class="button-holder">
+                {
+                    connectedProviders.map(({ enabled, href, image, label }) => enabled && (
+                        <Button as="a" href={href} variant="solid" size="md" fullWidth class="oauth-button">
+                            <div class="icon-and-label">
+                                <Fragment set:html={image} />
+                                <span>{label}</span>
+                            </div>
+                            <Icon name="minus-circle" width={24} height={24} />
+                        </Button>
+                    ))
+                }
+
+                {
+                    connectedProviders.length === 0 && (
+                        <Center><div>
+                            <t-profile-socials key="social-accounts-no-connected">{t('social-accounts-no-connected')}</t-profile-socials>    
+                        </div></Center>
+                    )
+                }
+            </div>
+    
+        </Card>
+    
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>
+                    <t-profile-socials key="social-accounts-other">{t('social-accounts-other')}</t-profile-socials>
+                </h3>
+            </div>
+
+            <div class="button-holder">
+                {
+                    unconnectedProviders.map(({ enabled, href, image, label }) => enabled && (
+                        <Button as="a" href={href} variant="solid" size="md" fullWidth class="oauth-button">
+                            <div class="icon-and-label">
+                                <Fragment set:html={image} />
+                                <span>{label}</span>
+                            </div>
+                            <Icon name="plus-circle" width={24} height={24} />
+                        </Button>
+                    ))
+                }
+
+                {
+                    unconnectedProviders.length === 0 && (
+                        <Center><div>
+                            <t-profile-socials key="social-accounts-no-other">{t('social-accounts-no-other')}</t-profile-socials>    
+                        </div></Center>
+                    )
+                }
+            </div>
+    
+        </Card>
+    
+    </div>
+
+</Card>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:profile';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+
+    if (!customElements.get('t-profile-socials')) {
+        customElements.define('t-profile-socials', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<style>
+    .social-signin-options {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .social-signin-cards {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        height: 100%;
+    }
+
+    @media screen and (max-width: 768px) {
+        .social-signin-cards {
+            flex-direction: column;
+        }
+    }
+
+    .social-signin-bg {
+        background-color: hsl(var(--background-step-1));
+        height: auto;
+    }
+
+    .oauth-button {
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between !important;
+        width: 100%;
+        margin-button: 1rem;
+    }
+
+    .icon-and-label {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .button-holder {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+</style>

package/dist/components/dashboard/islands/profile/SocialSigninFallback.astro

@@ -0,0 +1,83 @@
+---
+import { Card, Center } from 'studiocms:ui/components';
+---
+<Card fullWidth class="social-signin-options">
+
+    <div slot="header">
+        <h2>Social Sign-in Accounts</h2>
+    </div>
+
+    <div class="social-signin-cards">
+
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>Connected Accounts</h3>
+            </div>
+
+            <div class="button-holder">
+                <Center><div>No connected accounts found.</div></Center>
+            </div>
+    
+        </Card>
+    
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>Other Sign-In Options</h3>
+            </div>
+
+            <div class="button-holder">
+                <Center><div>No other sign-in options found.</div></Center>
+            </div>
+    
+        </Card>
+    
+    </div>
+
+</Card>
+
+<style>
+    .social-signin-options {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .social-signin-cards {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        height: 100%;
+    }
+
+    @media screen and (max-width: 768px) {
+        .social-signin-cards {
+            flex-direction: column;
+        }
+    }
+
+    .social-signin-bg {
+        background-color: hsl(var(--background-step-1));
+        height: auto;
+    }
+
+    .oauth-button {
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between !important;
+        width: 100%;
+        margin-button: 1rem;
+    }
+
+    .icon-and-label {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .button-holder {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+</style>

package/dist/components/dashboard/islands/profile/UpdatePassword.astro

@@ -0,0 +1,166 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Button, Card, Icon, Input } from 'studiocms:ui/components';
+
+const data = await getUserData(Astro);
+
+const userHasNoPassword = data.user?.password === null;
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:profile');
+---
+
+<Card fullWidth as="form" id="password-update-form" class="password-update-form" action={StudioCMSRoutes.endpointLinks.profile}>
+
+    <div slot="header">
+        <h2><t-profile-password key="user-password-header">{t('user-password-header')}</t-profile-password></h2>
+    
+        <div class="form-header">
+            <Button 
+                type='submit' 
+                variant='solid' 
+                color='primary' 
+                disabled={userHasNoPassword}
+                size='sm'
+                >
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                <t-profile-password key="user-password-save-button">
+                    {t('user-password-save-button')}
+                </t-profile-password>
+            </Button> 
+        </div>
+    </div>
+
+    {userHasNoPassword && ( 
+        <p>
+            <t-profile-password key="user-password-no-password">{t('user-password-no-password')}</t-profile-password>
+        </p>
+    )}
+
+    <div class="password-form-entries">
+
+        <Input 
+            label={t('user-password-current')} 
+            type='password'
+            placeholder='********' 
+            isRequired={!userHasNoPassword}
+            disabled={userHasNoPassword}
+            name='current-password' 
+            autocomplete='current-password'
+            />
+
+        <Input 
+            label={t('user-password-new')} 
+            type='password'
+            placeholder='********' 
+            isRequired 
+            autocomplete='password new_password'
+            name='new-password' 
+            />
+
+        <Input 
+            label={t('user-password-confirm')}  
+            type='password'
+            placeholder='********' 
+            isRequired 
+            autocomplete='password new_password'
+            name='confirm-new-password' 
+            />
+
+    </div>
+</Card>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+        updateElmLabel,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:profile';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+    
+    i18n.subscribe(comp => {
+        updateElmLabel('current-password', comp['user-password-current']);
+        updateElmLabel('new-password', comp['user-password-new']);
+        updateElmLabel('confirm-new-password', comp['user-password-confirm']);
+    });
+
+    if (!customElements.get('t-profile-password')) {
+        customElements.define('t-profile-password', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<script>
+    import { toast } from "studiocms:ui/components";
+        const passwordUpdateForm = document.getElementById('password-update-form') as HTMLFormElement;
+
+        passwordUpdateForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(passwordUpdateForm);
+
+            const data = {
+                currentPassword: formData.get('current-password') ?? null,
+                newPassword: formData.get('new-password') as string,
+                confirmNewPassword: formData.get('confirm-new-password') as string,
+            }
+
+            const response = await fetch(passwordUpdateForm.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data)
+            })
+
+            const res = await response.json();
+
+            if (response.status !== 200) {
+                toast({
+                    title: 'Error',
+                    description: res.error,
+                    type: 'danger'
+                })
+            }
+
+            if (response.status === 200) {
+                toast({
+                    title: 'Success',
+                    description: res.message,
+                    type: 'success'
+                })
+            }
+        });
+</script>
+
+<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>

package/dist/components/dashboard/islands/profile/UpdatePasswordFallback.astro

@@ -0,0 +1,47 @@
+---
+import { Button, Card, Icon, 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'>
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                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>

package/dist/components/dashboard/islands/profile/oAuthButtonProviders.d.ts

@@ -0,0 +1,8 @@
+export declare const showOAuth: boolean;
+export type ProviderData = {
+    enabled: boolean;
+    href: string;
+    label: string;
+    image: string;
+};
+export declare const providerData: ProviderData[];