feat: new design

This commit is contained in:
loks0n
2024-11-07 16:16:53 +01:00
parent 9fca11555e
commit e53acfd9b4
6 changed files with 94 additions and 68 deletions
+1 -1
View File
@@ -19,7 +19,7 @@
"e2e:ui": "playwright test tests/e2e --ui"
},
"dependencies": {
"@appwrite.io/console": "1.4.2",
"@appwrite.io/console": "1.4.4",
"@appwrite.io/pink": "0.25.0",
"@appwrite.io/pink-icons": "0.25.0",
"@popperjs/core": "^2.11.8",
+5 -5
View File
@@ -9,8 +9,8 @@ importers:
.:
dependencies:
'@appwrite.io/console':
specifier: 1.4.2
version: 1.4.2
specifier: 1.4.4
version: 1.4.4
'@appwrite.io/pink':
specifier: 0.25.0
version: 0.25.0
@@ -193,8 +193,8 @@ packages:
'@analytics/type-utils@0.6.2':
resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
'@appwrite.io/console@1.4.2':
resolution: {integrity: sha512-2YQCjHGrgA2Nr5R83zQLsyDB7Pu8k5NUvzwQtutvG1S9K1AeIkDcuINm0QwJIwz8ZtfQbkfuvn88CXicI+I9Uw==}
'@appwrite.io/console@1.4.4':
resolution: {integrity: sha512-0B7PEHJIi0eS8+WQOs7RNwY+j3gffMTz6DKyvZAEJbe4550UnmTn4i8pxmyaiEVbhlqIVZ+QD8jVrjXqtkPK6Q==}
'@appwrite.io/pink-icons@0.25.0':
resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
@@ -3827,7 +3827,7 @@ snapshots:
'@analytics/type-utils@0.6.2': {}
'@appwrite.io/console@1.4.2': {}
'@appwrite.io/console@1.4.4': {}
'@appwrite.io/pink-icons@0.25.0': {}
+1 -1
View File
@@ -196,7 +196,7 @@ export enum Submit {
AuthPasswordDictionaryUpdate = 'submit_auth_password_dictionary_update',
AuthPersonalDataCheckUpdate = 'submit_auth_personal_data_check_update',
AuthSessionAlertsUpdate = 'submit_auth_session_alerts_update',
AuthTeamsSensitiveAttributesUpdate = 'submit_auth_teams_sensitive_attributes_update',
AuthMembershipPrivacyUpdate = 'submit_auth_membership_privacy_update',
AuthMockNumbersUpdate = 'submit_auth_mock_numbers_update',
SessionsLengthUpdate = 'submit_sessions_length_update',
SessionsLimitUpdate = 'submit_sessions_limit_update',
@@ -9,7 +9,7 @@
import UpdateSessionAlerts from './updateSessionAlerts.svelte';
import UpdateSessionLength from './updateSessionLength.svelte';
import UpdateSessionsLimit from './updateSessionsLimit.svelte';
import UpdateTeamsSensitiveAttributes from './updateTeamsSensitiveAttributes.svelte';
import UpdateMembershipPrivacy from './updateMembershipPrivacy.svelte';
import UpdateUsersLimit from './updateUsersLimit.svelte';
</script>
@@ -23,6 +23,6 @@
<UpdateSessionAlerts />
<UpdateMockNumbers />
{#if $organization.billingPlan !== BillingPlan.SCALE}
<UpdateTeamsSensitiveAttributes />
<UpdateMembershipPrivacy />
{/if}
</Container>
@@ -0,0 +1,85 @@
<script lang="ts">
import { invalidate } from '$app/navigation';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { CardGrid, Heading } from '$lib/components';
import { Dependencies } from '$lib/constants';
import { Button, Form } from '$lib/elements/forms';
import { FormList } from '$lib/elements/forms';
import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
import { project } from '../../store';
let authMembershipsUserName = $project?.authMembershipsUserName ?? true;
let authMembershipsUserEmail = $project?.authMembershipsUserEmail ?? true;
let authMembershipsMfa = $project?.authMembershipsMfa ?? true;
async function updateMembershipsPrivacy() {
try {
await sdk.forConsole.projects.updateMembershipsPrivacy(
$project.$id,
authMembershipsUserName,
authMembershipsUserEmail,
authMembershipsMfa
);
await invalidate(Dependencies.PROJECT);
addNotification({
type: 'success',
message: 'Updated memberships privacy'
});
trackEvent(Submit.AuthMembershipPrivacyUpdate);
} catch (error) {
addNotification({
type: 'error',
message: error.message
});
trackError(error, Submit.AuthMembershipPrivacyUpdate);
}
}
</script>
<Form onSubmit={updateMembershipsPrivacy}>
<CardGrid>
<Heading tag="h2" size="7" id="personal-data">Memberships privacy</Heading>
<p>
Set privacy preferences to manage which details team members can view about one another.
</p>
<svelte:fragment slot="aside">
<FormList>
<div class="u-flex-vertical u-gap-8 body-text-2">
<InputCheckbox
bind:checked={authMembershipsUserName}
id="membershipsUserName"
label="Name" />
<p class="u-margin-inline-28">Display team members' usernames to to others</p>
</div>
<div class="u-flex-vertical u-gap-8 body-text-2">
<InputCheckbox
bind:checked={authMembershipsUserEmail}
id="membershipsUserEmail"
label="Email" />
<p class="u-margin-inline-28">
Allow team members to view each other's email addresses
</p>
</div>
<div class="u-flex-vertical u-gap-8 body-text-2">
<InputCheckbox
bind:checked={authMembershipsMfa}
id="membershipsMfa"
label="MFA status" />
<p class="u-margin-inline-28">
Show if team members have multi-factor authentication enabled
</p>
</div>
</FormList>
</svelte:fragment>
<svelte:fragment slot="actions">
<Button
disabled={authMembershipsUserName === ($project?.authMembershipsUserName ?? true) &&
authMembershipsUserEmail === ($project?.authMembershipsUserName ?? true) &&
authMembershipsMfa === ($project?.authMembershipsMfa ?? true)}
submit>Update</Button>
</svelte:fragment>
</CardGrid>
</Form>
@@ -1,59 +0,0 @@
<script lang="ts">
import { invalidate } from '$app/navigation';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { CardGrid, Heading } from '$lib/components';
import { Dependencies } from '$lib/constants';
import { Button, Form, InputSwitch } from '$lib/elements/forms';
import { FormList } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
import { project } from '../../store';
let authTeamsSensitiveAttributes = $project?.teamsSensitiveAttributes ?? true;
async function updateTeamsSensitiveAttributes() {
try {
await sdk.forConsole.projects.updatePersonalDataCheck(
$project.$id,
authTeamsSensitiveAttributes
);
await invalidate(Dependencies.PROJECT);
addNotification({
type: 'success',
message: 'Toggled teams sensitive attributes'
});
trackEvent(Submit.AuthTeamsSensitiveAttributesUpdate);
} catch (error) {
addNotification({
type: 'error',
message: error.message
});
trackError(error, Submit.AuthTeamsSensitiveAttributesUpdate);
}
}
</script>
<Form onSubmit={updateTeamsSensitiveAttributes}>
<CardGrid>
<Heading tag="h2" size="7" id="personal-data">Teams sensitive attributes</Heading>
<svelte:fragment slot="aside">
<FormList>
<InputSwitch
bind:value={authTeamsSensitiveAttributes}
id="teamsSensitiveAttributes"
label="Show sensitive attributes in teams" />
</FormList>
<p class="text">
When enabled, sensitive attributes are provided in team membership response model.
This includes the <code>userName</code>, <code>userEmail</code>, and
<code>mfa</code> attributes.
</p>
</svelte:fragment>
<svelte:fragment slot="actions">
<Button
disabled={authTeamsSensitiveAttributes === $project?.teamsSensitiveAttributes}
submit>Update</Button>
</svelte:fragment>
</CardGrid>
</Form>