diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte index 342ef4bbcf..a653e15da0 100644 --- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte +++ b/src/lib/components/admin/Users/UserList/EditUserModal.svelte @@ -12,6 +12,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat'; import XMark from '$lib/components/icons/XMark.svelte'; import SensitiveInput from '$lib/components/common/SensitiveInput.svelte'; + import UserProfileImage from '$lib/components/chat/Settings/Account/UserProfileImage.svelte'; const i18n = getContext('i18n'); const dispatch = createEventDispatcher(); @@ -83,120 +84,118 @@ submitHandler(); }} > -
-
- User profile -
- -
-
{selectedUser.name}
- -
- {$i18n.t('Created at')} - {dayjs(selectedUser.created_at * 1000).format('LL')} -
-
-
- -
-
-
-
{$i18n.t('Role')}
- -
- -
+
+
+
+
- {#if userGroups} -
-
{$i18n.t('User Groups')}
+
+
+
+ {selectedUser.name} +
- {#if userGroups.length} -
- {#each userGroups as userGroup} - - - goto('/admin/users/groups?id=' + userGroup.id)} - > - {userGroup.name} - - - {/each} -
- {:else} - - - {/if} -
- {/if} - -
-
{$i18n.t('Name')}
- -
- -
-
- -
-
{$i18n.t('Email')}
- -
- -
-
- - {#if _user?.oauth_sub} -
-
{$i18n.t('OAuth ID')}
- -
- {_user.oauth_sub ?? ''} +
+ {$i18n.t('Created at')} + {dayjs(selectedUser.created_at * 1000).format('LL')}
- {/if} -
-
{$i18n.t('New Password')}
+
+ {#if (userGroups ?? []).length > 0} +
+
{$i18n.t('User Groups')}
-
- +
+ {#each userGroups as userGroup} + + + goto('/admin/users/groups?id=' + userGroup.id)} + > + {userGroup.name} + + + {/each} +
+
+ {/if} + +
+
{$i18n.t('Role')}
+ +
+ +
+
+ +
+
{$i18n.t('Name')}
+ +
+ +
+
+ +
+
{$i18n.t('Email')}
+ +
+ +
+
+ + {#if _user?.oauth_sub} +
+
{$i18n.t('OAuth ID')}
+ +
+ {_user.oauth_sub ?? ''} +
+
+ {/if} + +
+
{$i18n.t('New Password')}
+ +
+ +
+
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte index 3abdbdfc98..510910e365 100644 --- a/src/lib/components/chat/Settings/Account.svelte +++ b/src/lib/components/chat/Settings/Account.svelte @@ -15,6 +15,8 @@ import SensitiveInput from '$lib/components/common/SensitiveInput.svelte'; import Textarea from '$lib/components/common/Textarea.svelte'; import { getUserById } from '$lib/apis/users'; + import User from '$lib/components/icons/User.svelte'; + import UserProfileImage from './Account/UserProfileImage.svelte'; const i18n = getContext('i18n'); @@ -118,68 +120,6 @@
- { - const files = profileImageInputElement.files ?? []; - let reader = new FileReader(); - reader.onload = (event) => { - let originalImageUrl = `${event.target.result}`; - - const img = new Image(); - img.src = originalImageUrl; - - img.onload = function () { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); - - // Calculate the aspect ratio of the image - const aspectRatio = img.width / img.height; - - // Calculate the new width and height to fit within 250x250 - let newWidth, newHeight; - if (aspectRatio > 1) { - newWidth = 250 * aspectRatio; - newHeight = 250; - } else { - newWidth = 250; - newHeight = 250 / aspectRatio; - } - - // Set the canvas size - canvas.width = 250; - canvas.height = 250; - - // Calculate the position to center the image - const offsetX = (250 - newWidth) / 2; - const offsetY = (250 - newHeight) / 2; - - // Draw the image on the canvas - ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight); - - // Get the base64 representation of the compressed image - const compressedSrc = canvas.toDataURL('image/jpeg'); - - // Display the compressed image - profileImageUrl = compressedSrc; - - profileImageInputElement.files = null; - }; - }; - - if ( - files.length > 0 && - ['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(files[0]['type']) - ) { - reader.readAsDataURL(files[0]); - } - }} - /> -
{$i18n.t('Your Account')}
@@ -192,73 +132,8 @@
-
-
- -
-
- - - - - -
-
diff --git a/src/lib/components/chat/Settings/Account/UserProfileImage.svelte b/src/lib/components/chat/Settings/Account/UserProfileImage.svelte new file mode 100644 index 0000000000..a27a8d6653 --- /dev/null +++ b/src/lib/components/chat/Settings/Account/UserProfileImage.svelte @@ -0,0 +1,149 @@ + + + { + const files = profileImageInputElement.files ?? []; + let reader = new FileReader(); + reader.onload = (event) => { + let originalImageUrl = `${event.target.result}`; + + const img = new Image(); + img.src = originalImageUrl; + + img.onload = function () { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + // Calculate the aspect ratio of the image + const aspectRatio = img.width / img.height; + + // Calculate the new width and height to fit within 250x250 + let newWidth, newHeight; + if (aspectRatio > 1) { + newWidth = 250 * aspectRatio; + newHeight = 250; + } else { + newWidth = 250; + newHeight = 250 / aspectRatio; + } + + // Set the canvas size + canvas.width = 250; + canvas.height = 250; + + // Calculate the position to center the image + const offsetX = (250 - newWidth) / 2; + const offsetY = (250 - newHeight) / 2; + + // Draw the image on the canvas + ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight); + + // Get the base64 representation of the compressed image + const compressedSrc = canvas.toDataURL('image/jpeg'); + + // Display the compressed image + profileImageUrl = compressedSrc; + + profileImageInputElement.files = null; + }; + }; + + if ( + files.length > 0 && + ['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(files[0]['type']) + ) { + reader.readAsDataURL(files[0]); + } + }} +/> + +
+
+ +
+
+ + + + + +
+