Skip to content

Commit f30e4d0

Browse files
ananyayaya129ananyayaya129
committed
settings pages all done
1 parent 5770175 commit f30e4d0

13 files changed

Lines changed: 229 additions & 211 deletions

File tree

‎platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
leadingIcon?: Snippet;
1010
profileSrc?: string;
1111
children: Snippet;
12-
onclick: () => void;
12+
onclick?: () => void;
1313
hasTrailingIcon?: boolean;
1414
}
1515

‎platforms/metagram/src/routes/(protected)/settings/account/+page.svelte‎

Lines changed: 24 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,31 @@
11
<script lang="ts">
22
import { goto } from '$app/navigation';
33
import { SettingsNavigationButton } from '$lib/fragments';
4-
import { Button, Helper, Input, Label } from '$lib/ui';
5-
6-
let currentPage: 'home' | 'username' | 'emailAdd' | 'changePass' | 'deactivate' = 'home';
7-
let userEmail: string = 'ananya@auvo.io';
84
</script>
95

10-
{#if currentPage === 'home'}
11-
<div class="flex flex-col gap-3">
12-
<SettingsNavigationButton onclick={() => (currentPage = 'username')}>
13-
{#snippet children()}
14-
Username
15-
{/snippet}
16-
</SettingsNavigationButton>
17-
<hr class="text-grey" />
18-
<SettingsNavigationButton onclick={() => (currentPage = 'emailAdd')}>
19-
{#snippet children()}
20-
Email Address
21-
{/snippet}
22-
</SettingsNavigationButton>
23-
<hr class="text-grey" />
24-
<SettingsNavigationButton onclick={() => (currentPage = 'changePass')}>
25-
{#snippet children()}
26-
Change Password
27-
{/snippet}
28-
</SettingsNavigationButton>
29-
<hr class="text-grey" />
30-
<SettingsNavigationButton onclick={() => (currentPage = 'deactivate')}>
31-
{#snippet children()}
32-
Deactivate Account
33-
{/snippet}
34-
</SettingsNavigationButton>
35-
<hr class="text-grey" />
36-
</div>
37-
{:else if currentPage === 'username'}
38-
<div>
39-
<Label>Change your username</Label>
40-
<Input type="text" placeholder="Edit Username" />
41-
<Helper>You can only do this 3 more times</Helper>
42-
</div>
6+
<div class="flex flex-col gap-3">
7+
<SettingsNavigationButton onclick={() => goto('/settings/account/username')}>
8+
{#snippet children()}
9+
Username
10+
{/snippet}
11+
</SettingsNavigationButton>
12+
<hr class="text-grey" />
13+
<SettingsNavigationButton onclick={() => goto('/settings/account/email-address')}>
14+
{#snippet children()}
15+
Email Address
16+
{/snippet}
17+
</SettingsNavigationButton>
18+
<hr class="text-grey" />
19+
<SettingsNavigationButton onclick={() => goto('/settings/account/change-password')}>
20+
{#snippet children()}
21+
Change Password
22+
{/snippet}
23+
</SettingsNavigationButton>
4324
<hr class="text-grey" />
44-
<Button size="sm" variant="secondary" callback={() => alert('saved')}>Save Changes</Button>
45-
{:else if currentPage === 'emailAdd'}
46-
<div>
47-
<Label>Your email address</Label>
48-
<Input type="email" value={userEmail} disabled />
49-
</div>
50-
{:else if currentPage === 'changePass'}
51-
<div>
52-
<Label>Enter Old Password</Label>
53-
<Input type="password" placeholder="Old Password" />
54-
</div>
25+
<SettingsNavigationButton onclick={() => goto('/settings/account/deactivate')}>
26+
{#snippet children()}
27+
Deactivate Account
28+
{/snippet}
29+
</SettingsNavigationButton>
5530
<hr class="text-grey" />
56-
<div>
57-
<Label>Enter New Password</Label>
58-
<Input type="password" placeholder="New Password" />
59-
</div>
60-
{:else if currentPage === 'deactivate'}
61-
<div class="flex flex-col gap-3">
62-
<SettingsNavigationButton
63-
hasTrailingIcon={false}
64-
onclick={() => goto(`/settings/data-and-storage`)}
65-
>
66-
{#snippet children()}
67-
<div class="flex flex-col items-start">
68-
<h2 class="text-black-800 text-base">
69-
Are you sure you want to deactivate this account?
70-
</h2>
71-
<p class="text-black-600 text-sm">You can log back in anytime</p>
72-
</div>
73-
{/snippet}
74-
</SettingsNavigationButton>
75-
<hr class="text-grey" />
76-
<Button size="sm" variant="secondary" callback={() => alert('logout')}>Logout</Button>
77-
</div>
78-
{/if}
31+
</div>

‎platforms/metagram/src/routes/(protected)/settings/account/change-password/+page.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import { Input, Label } from '$lib/ui';
3+
</script>
4+
5+
<div>
6+
<Label>Enter Old Password</Label>
7+
<Input type="password" placeholder="Old Password" />
8+
</div>
9+
<hr class="text-grey" />
10+
<div>
11+
<Label>Enter New Password</Label>
12+
<Input type="password" placeholder="New Password" />
13+
</div>

‎platforms/metagram/src/routes/(protected)/settings/account/deactivate/+page.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script>
2+
import { goto } from '$app/navigation';
3+
import { SettingsNavigationButton } from '$lib/fragments';
4+
import { Button } from '$lib/ui';
5+
</script>
6+
7+
<div class="flex flex-col gap-3">
8+
<SettingsNavigationButton hasTrailingIcon={false}>
9+
{#snippet children()}
10+
<div class="flex flex-col items-start">
11+
<h2 class="text-black-800 text-base">
12+
Are you sure you want to deactivate this account?
13+
</h2>
14+
<p class="text-black-600 text-sm">You can log back in anytime</p>
15+
</div>
16+
{/snippet}
17+
</SettingsNavigationButton>
18+
<hr class="text-grey" />
19+
<Button size="sm" variant="secondary" callback={() => alert('logout')}>Logout</Button>
20+
</div>

‎platforms/metagram/src/routes/(protected)/settings/account/email-address/+page.svelte‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
import { Input, Label } from '$lib/ui';
3+
let userEmail: string = 'ananya@auvo.io';
4+
</script>
5+
6+
<div>
7+
<Label>Your email address</Label>
8+
<Input type="email" value={userEmail} disabled />
9+
</div>

‎platforms/metagram/src/routes/(protected)/settings/account/username/+page.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
import { Button, Helper, Input, Label } from '$lib/ui';
3+
</script>
4+
5+
<div>
6+
<Label>Change your username</Label>
7+
<Input type="text" placeholder="Edit Username" />
8+
<Helper>You can only do this 3 more times</Helper>
9+
</div>
10+
<hr class="text-grey" />
11+
<Button size="sm" variant="secondary" callback={() => alert('saved')}>Save Changes</Button>

‎platforms/metagram/src/routes/(protected)/settings/data-and-storage/+page.svelte‎

Lines changed: 21 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,25 @@
11
<script lang="ts">
22
import { goto } from '$app/navigation';
3-
import { SettingsDeleteButton, SettingsNavigationButton } from '$lib/fragments';
4-
import { Button } from '$lib/ui';
5-
6-
let currentPage: 'home' | 'clearCache' | 'downloadData' | 'loggedInDevice' = 'home';
3+
import { SettingsNavigationButton } from '$lib/fragments';
74
</script>
85

9-
{#if currentPage === 'home'}
10-
<div class="flex flex-col gap-3">
11-
<SettingsNavigationButton onclick={() => (currentPage = 'clearCache')}>
12-
{#snippet children()}
13-
Clear cache
14-
{/snippet}
15-
</SettingsNavigationButton>
16-
<hr class="text-grey" />
17-
<SettingsNavigationButton onclick={() => (currentPage = 'downloadData')}>
18-
{#snippet children()}
19-
Download my data
20-
{/snippet}
21-
</SettingsNavigationButton>
22-
<hr class="text-grey" />
23-
<SettingsNavigationButton onclick={() => (currentPage = 'loggedInDevice')}>
24-
{#snippet children()}
25-
Logged in devices
26-
{/snippet}
27-
</SettingsNavigationButton>
28-
<hr class="text-grey" />
29-
</div>
30-
{:else if currentPage === 'clearCache'}
31-
<div class="flex flex-col gap-3">
32-
<SettingsNavigationButton
33-
hasTrailingIcon={false}
34-
onclick={() => goto(`/settings/data-and-storage`)}
35-
>
36-
{#snippet children()}
37-
<div class="flex flex-col items-start">
38-
<h2 class="text-black-800 text-base">Clear cache</h2>
39-
<p class="text-black-600 text-sm">
40-
This would clear the apps cache and free about 14MB of storage
41-
</p>
42-
</div>
43-
{/snippet}
44-
</SettingsNavigationButton>
45-
<hr class="text-grey" />
46-
<Button size="sm" variant="secondary" callback={() => alert('all clear')}
47-
>Clear Cache</Button
48-
>
49-
</div>
50-
{:else if currentPage === 'downloadData'}
51-
<div class="flex flex-col gap-3">
52-
<SettingsNavigationButton
53-
hasTrailingIcon={false}
54-
onclick={() => goto(`/settings/data-and-storage`)}
55-
>
56-
{#snippet children()}
57-
<div class="flex flex-col items-start">
58-
<h2 class="text-black-800 text-base">Do you want to download your data?</h2>
59-
<p class="text-black-600 text-sm">
60-
Your data would be sent to the email associated with your account.
61-
</p>
62-
</div>
63-
{/snippet}
64-
</SettingsNavigationButton>
65-
<hr class="text-grey" />
66-
<Button size="sm" variant="secondary" callback={() => alert('Downloaded')}
67-
>Download Data</Button
68-
>
69-
</div>
70-
{:else if currentPage === 'loggedInDevice'}
71-
<div class="flex flex-col gap-3">
72-
<SettingsDeleteButton onclick={() => alert('Deleted')}>
73-
{#snippet children()}
74-
<div class="flex flex-col items-start">
75-
<h2 class="text-black-800 text-base">Google Pixel 8a</h2>
76-
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
77-
</div>
78-
{/snippet}
79-
</SettingsDeleteButton>
80-
<hr class="text-grey" />
81-
<SettingsDeleteButton onclick={() => alert('Deleted')}>
82-
{#snippet children()}
83-
<div class="flex flex-col items-start">
84-
<h2 class="text-black-800 text-base">Apple IPhone 16</h2>
85-
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
86-
</div>
87-
{/snippet}
88-
</SettingsDeleteButton>
89-
<hr class="text-grey" />
90-
<SettingsDeleteButton onclick={() => alert('Deleted')}>
91-
{#snippet children()}
92-
<div class="flex flex-col items-start">
93-
<h2 class="text-black-800 text-base">Google Pixel 8a</h2>
94-
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
95-
</div>
96-
{/snippet}
97-
</SettingsDeleteButton>
98-
<hr class="text-grey" />
99-
</div>
100-
<Button size="sm" variant="secondary" callback={() => alert('All Deleted')}
101-
>Logout of all the devices</Button
102-
>
103-
{/if}
6+
<div class="flex flex-col gap-3">
7+
<SettingsNavigationButton onclick={() => goto('/settings/data-and-storage/clear-cache')}>
8+
{#snippet children()}
9+
Clear cache
10+
{/snippet}
11+
</SettingsNavigationButton>
12+
<hr class="text-grey" />
13+
<SettingsNavigationButton onclick={() => goto('/settings/data-and-storage/download-data')}>
14+
{#snippet children()}
15+
Download my data
16+
{/snippet}
17+
</SettingsNavigationButton>
18+
<hr class="text-grey" />
19+
<SettingsNavigationButton onclick={() => goto('/settings/data-and-storage/active-devices')}>
20+
{#snippet children()}
21+
Logged in devices
22+
{/snippet}
23+
</SettingsNavigationButton>
24+
<hr class="text-grey" />
25+
</div>

‎platforms/metagram/src/routes/(protected)/settings/data-and-storage/active-devices/+page.svelte‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="ts">
2+
import { SettingsDeleteButton } from '$lib/fragments';
3+
import { Button } from '$lib/ui';
4+
</script>
5+
6+
<div class="flex flex-col gap-3">
7+
<SettingsDeleteButton onclick={() => alert('Deleted')}>
8+
{#snippet children()}
9+
<div class="flex flex-col items-start">
10+
<h2 class="text-black-800 text-base">Google Pixel 8a</h2>
11+
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
12+
</div>
13+
{/snippet}
14+
</SettingsDeleteButton>
15+
<hr class="text-grey" />
16+
<SettingsDeleteButton onclick={() => alert('Deleted')}>
17+
{#snippet children()}
18+
<div class="flex flex-col items-start">
19+
<h2 class="text-black-800 text-base">Apple IPhone 16</h2>
20+
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
21+
</div>
22+
{/snippet}
23+
</SettingsDeleteButton>
24+
<hr class="text-grey" />
25+
<SettingsDeleteButton onclick={() => alert('Deleted')}>
26+
{#snippet children()}
27+
<div class="flex flex-col items-start">
28+
<h2 class="text-black-800 text-base">Google Pixel 8a</h2>
29+
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
30+
</div>
31+
{/snippet}
32+
</SettingsDeleteButton>
33+
<hr class="text-grey" />
34+
</div>
35+
<Button size="sm" variant="secondary" callback={() => alert('All Deleted')}>
36+
Logout of all the devices
37+
</Button>

‎platforms/metagram/src/routes/(protected)/settings/data-and-storage/clear-cache/+page.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import { goto } from '$app/navigation';
3+
import { SettingsNavigationButton } from '$lib/fragments';
4+
import { Button } from '$lib/ui';
5+
</script>
6+
7+
<div class="flex flex-col gap-3">
8+
<SettingsNavigationButton
9+
hasTrailingIcon={false}
10+
onclick={() => goto(`/settings/data-and-storage`)}
11+
>
12+
{#snippet children()}
13+
<div class="flex flex-col items-start">
14+
<h2 class="text-black-800 text-base">Are you sure you wanna clear cache?</h2>
15+
<p class="text-black-600 text-sm">
16+
This would clear the apps cache and free about 14MB of storage
17+
</p>
18+
</div>
19+
{/snippet}
20+
</SettingsNavigationButton>
21+
<hr class="text-grey" />
22+
<Button size="sm" variant="secondary" callback={() => alert('all clear')}>Clear Cache</Button>
23+
</div>

‎platforms/metagram/src/routes/(protected)/settings/data-and-storage/download-data/+page.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts">
2+
import { goto } from '$app/navigation';
3+
import { SettingsNavigationButton } from '$lib/fragments';
4+
import { Button } from '$lib/ui';
5+
</script>
6+
7+
<div class="flex flex-col gap-3">
8+
<SettingsNavigationButton
9+
hasTrailingIcon={false}
10+
onclick={() => goto(`/settings/data-and-storage`)}
11+
>
12+
{#snippet children()}
13+
<div class="flex flex-col items-start">
14+
<h2 class="text-black-800 text-base">Do you want to download your data?</h2>
15+
<p class="text-black-600 text-sm">
16+
Your data would be sent to the email associated with your account.
17+
</p>
18+
</div>
19+
{/snippet}
20+
</SettingsNavigationButton>
21+
<hr class="text-grey" />
22+
<Button size="sm" variant="secondary" callback={() => alert('Downloaded')}>
23+
Download Data
24+
</Button>
25+
</div>

0 commit comments

Comments
 (0)