Skip to content

Commit feedf6f

Browse files
LaurentTreguierLaurentTreguier
committed
List emails
1 parent f02e19f commit feedf6f

File tree

14 files changed

+287
-22
lines changed

14 files changed

+287
-22
lines changed

‎src/lib/components/icons/back.svelte

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<polyline points="120,10 10,120 120,230" />
2+
<line x1="10" y1="120" x2="230" y2="120" />

‎src/lib/data/translations.json

+10
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"ok": "OK",
55
"cancel": "Cancel",
66
"loading": "…",
7+
"back": "Go back",
78
"app": {
89
"name": "Fyreplace",
910
"description": "Fyreplace social media web app"
@@ -33,6 +34,7 @@
3334
"drafts": "Drafts",
3435
"published": "Published",
3536
"settings": "Settings",
37+
"emails": "Emails",
3638
"login": "Login",
3739
"register": "Sign up"
3840
},
@@ -45,6 +47,11 @@
4547
},
4648
"username": "Username",
4749
"dateJoined": "Date joined",
50+
"emails": {
51+
"label_one": "{{count}} email address",
52+
"label_other": "{{count}} email addresses",
53+
"manage": "Manage"
54+
},
4855
"bio": {
4956
"label": "Bio",
5057
"placeholder": "Tell the community about yourself",
@@ -70,6 +77,9 @@
7077
}
7178
}
7279
},
80+
"emails": {
81+
"main": "Main"
82+
},
7383
"account": {
7484
"randomCode": {
7585
"label": "One-time code",

‎src/lib/destinations.ts

+6
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,12 @@ export namespace Destination {
6666
requiresAuthentication: false
6767
};
6868

69+
export const Emails: Destination = {
70+
route: '/settings/emails',
71+
titleKey: 'destinations.emails',
72+
requiresAuthentication: true
73+
};
74+
6975
export const Login: Destination = {
7076
route: '/login',
7177
titleKey: 'destinations.login',

‎src/lib/openapi/fakes/emails-endpoint.ts

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { makeId } from '$lib/utils';
2+
import type {
3+
ActivateEmailRequest,
4+
ApiResponse,
5+
CreateEmailRequest,
6+
DeleteEmailRequest,
7+
Email,
8+
EmailActivation,
9+
EmailCreation,
10+
EmailsEndpointApiInterface,
11+
InitOverrideFunction,
12+
ListEmailsRequest,
13+
SetMainEmailRequest
14+
} from '../generated';
15+
16+
export default class FakeEmailsEndpointApi implements EmailsEndpointApiInterface {
17+
activateEmail(
18+
emailActivation: EmailActivation,
19+
initOverrides?: RequestInit | InitOverrideFunction
20+
): Promise<void> {
21+
throw new Error('Method not implemented.');
22+
}
23+
24+
async countEmails(initOverrides?: RequestInit | InitOverrideFunction): Promise<number> {
25+
const emails = await this.listEmails();
26+
return emails.length;
27+
}
28+
29+
createEmail(
30+
emailCreation: EmailCreation,
31+
customDeepLinks?: boolean,
32+
initOverrides?: RequestInit | InitOverrideFunction
33+
): Promise<Email> {
34+
throw new Error('Method not implemented.');
35+
}
36+
37+
deleteEmail(id: string, initOverrides?: RequestInit | InitOverrideFunction): Promise<void> {
38+
throw new Error('Method not implemented.');
39+
}
40+
41+
async listEmails(
42+
page?: number,
43+
initOverrides?: RequestInit | InitOverrideFunction
44+
): Promise<Array<Email>> {
45+
switch (page) {
46+
case undefined:
47+
case 0:
48+
return [this.makeEmail(true), this.makeEmail(), this.makeEmail()];
49+
50+
default:
51+
return [];
52+
}
53+
}
54+
55+
setMainEmail(id: string, initOverrides?: RequestInit | InitOverrideFunction): Promise<void> {
56+
throw new Error('Method not implemented.');
57+
}
58+
59+
private makeEmail(main = false, verified = true): Email {
60+
const id = makeId();
61+
return {
62+
id,
63+
email: `${id}@example.org`,
64+
main,
65+
verified
66+
};
67+
}
68+
69+
// Unimplemented side
70+
71+
activateEmailRaw(
72+
requestParameters: ActivateEmailRequest,
73+
initOverrides?: RequestInit | InitOverrideFunction
74+
): Promise<ApiResponse<void>> {
75+
throw new Error('Method not implemented.');
76+
}
77+
78+
countEmailsRaw(initOverrides?: RequestInit | InitOverrideFunction): Promise<ApiResponse<number>> {
79+
throw new Error('Method not implemented.');
80+
}
81+
82+
createEmailRaw(
83+
requestParameters: CreateEmailRequest,
84+
initOverrides?: RequestInit | InitOverrideFunction
85+
): Promise<ApiResponse<Email>> {
86+
throw new Error('Method not implemented.');
87+
}
88+
89+
deleteEmailRaw(
90+
requestParameters: DeleteEmailRequest,
91+
initOverrides?: RequestInit | InitOverrideFunction
92+
): Promise<ApiResponse<void>> {
93+
throw new Error('Method not implemented.');
94+
}
95+
96+
listEmailsRaw(
97+
requestParameters: ListEmailsRequest,
98+
initOverrides?: RequestInit | InitOverrideFunction
99+
): Promise<ApiResponse<Array<Email>>> {
100+
throw new Error('Method not implemented.');
101+
}
102+
103+
setMainEmailRaw(
104+
requestParameters: SetMainEmailRequest,
105+
initOverrides?: RequestInit | InitOverrideFunction
106+
): Promise<ApiResponse<void>> {
107+
throw new Error('Method not implemented.');
108+
}
109+
}

‎src/lib/openapi/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,20 @@ import { DisplayableError, eventBus } from '$lib/events';
55
import { makeId, sleep } from '$lib/utils';
66
import {
77
Configuration,
8+
EmailsEndpointApi,
89
FetchError,
910
ResponseError,
1011
TokensEndpointApi,
1112
UsersEndpointApi,
13+
type EmailsEndpointApiInterface,
1214
type ErrorContext,
1315
type FetchParams,
1416
type Middleware,
1517
type RequestContext,
1618
type TokensEndpointApiInterface,
1719
type UsersEndpointApiInterface
1820
} from './generated';
21+
import FakeEmailsEndpointApi from './fakes/emails-endpoint';
1922
import FakeTokensEndpointApi from './fakes/tokens-endpoint';
2023
import FakeUsersEndpointApi from './fakes/users-endpoint';
2124

@@ -25,6 +28,10 @@ export function useFakeEndpoints() {
2528
useFakes = true;
2629
}
2730

31+
export async function getEmailsClient(): Promise<EmailsEndpointApiInterface> {
32+
return useFakes ? new FakeEmailsEndpointApi() : new EmailsEndpointApi(await makeConfiguration());
33+
}
34+
2835
export async function getTokensClient(): Promise<TokensEndpointApiInterface> {
2936
return useFakes ? new FakeTokensEndpointApi() : new TokensEndpointApi(await makeConfiguration());
3037
}

‎src/lib/utils.ts

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
1+
import { useNewStoringEventBus } from './events';
2+
import { setStoredItem } from './storage';
3+
import FakeTokensEndpointApi from './openapi/fakes/tokens-endpoint';
4+
15
export function sleep(ms: number): Promise<void> {
26
return new Promise((resolve) => setTimeout(resolve, ms));
37
}
48

59
export function makeId(): string {
610
return Math.random().toString(36).substring(2);
711
}
12+
13+
export function setUpTesting(options: { withToken: boolean }) {
14+
useNewStoringEventBus();
15+
window.localStorage.clear();
16+
17+
if (options.withToken) {
18+
setStoredItem('connection.token', FakeTokensEndpointApi.token);
19+
}
20+
}

‎src/routes/back.svelte

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts">
2+
import { t } from 'i18next';
3+
import Icon from '$lib/components/icon.svelte';
4+
import Back from '$lib/components/icons/back.svelte';
5+
6+
function goBack(event: MouseEvent) {
7+
event.preventDefault();
8+
history.back();
9+
}
10+
</script>
11+
12+
<a href="#back" title={t('back')} onclick={goBack}>
13+
<Icon><Back /></Icon>
14+
</a>
15+
16+
<style lang="scss">
17+
a {
18+
display: inline-flex;
19+
padding: 0.5em;
20+
border-radius: 50%;
21+
color: currentColor;
22+
transition: 0.1s;
23+
24+
&:hover {
25+
background-color: var(--color-accent-hover);
26+
}
27+
28+
&:active {
29+
background-color: var(--color-accent);
30+
}
31+
}
32+
</style>

‎src/routes/login/page.test.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { render, screen } from '@testing-library/svelte';
22
import userEvent from '@testing-library/user-event';
33
import { beforeEach, expect, test } from 'vitest';
4-
import { eventBus, useNewStoringEventBus, DisplayableError, StoringEventBus } from '$lib/events';
4+
import { eventBus, DisplayableError, StoringEventBus } from '$lib/events';
55
import FakeTokensEndpointApi from '$lib/openapi/fakes/tokens-endpoint';
66
import FakeUsersEndpointApi from '$lib/openapi/fakes/users-endpoint';
7+
import { setUpTesting } from '$lib/utils';
78
import Page from './+page.svelte';
89

9-
beforeEach(() => {
10-
useNewStoringEventBus();
11-
window.localStorage.clear();
12-
});
10+
beforeEach(() => setUpTesting({ withToken: false }));
1311

1412
test('Identifier must have correct length', { timeout: 60000 }, async () => {
1513
const user = userEvent.setup();

‎src/routes/register/page.test.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { render, screen } from '@testing-library/svelte';
22
import userEvent from '@testing-library/user-event';
33
import { beforeEach, expect, test } from 'vitest';
4-
import { eventBus, useNewStoringEventBus, DisplayableError, StoringEventBus } from '$lib/events';
4+
import { eventBus, DisplayableError, StoringEventBus } from '$lib/events';
55
import FakeTokensEndpointApi from '$lib/openapi/fakes/tokens-endpoint';
66
import FakeUsersEndpointApi from '$lib/openapi/fakes/users-endpoint';
7+
import { setUpTesting } from '$lib/utils';
78
import Page from './+page.svelte';
89

9-
beforeEach(() => {
10-
useNewStoringEventBus();
11-
window.localStorage.clear();
12-
});
10+
beforeEach(() => setUpTesting({ withToken: false }));
1311

1412
test('Username must have correct length', { timeout: 60000 }, async () => {
1513
const user = userEvent.setup();

‎src/routes/settings/+page.svelte

+17-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { info } from '$lib/data/urls.json';
44
import { navigate, Destination } from '$lib/destinations';
55
import { DisplayableError } from '$lib/events';
6-
import { call, getUsersClient } from '$lib/openapi';
6+
import { call, getEmailsClient, getUsersClient } from '$lib/openapi';
77
import type { User } from '$lib/openapi/generated';
88
import SavedValue from '$lib/components/saved-value.svelte';
99
import List from '$lib/components/list.svelte';
@@ -16,6 +16,7 @@
1616
let currentUser = $state<User | null>(null);
1717
let bio = $state('');
1818
let isLoadingAvatar = $state(false);
19+
let emailCount = $state(0);
1920
2021
$effect(() => {
2122
if (token) {
@@ -25,7 +26,15 @@
2526
currentUser = await client.getCurrentUser();
2627
bio = currentUser.bio ?? '';
2728
},
28-
async () => {}
29+
async () => new DisplayableError()
30+
);
31+
32+
call(
33+
async () => {
34+
const client = await getEmailsClient();
35+
emailCount = await client.countEmails();
36+
},
37+
async () => new DisplayableError()
2938
);
3039
} else {
3140
navigate(isRegistering ? Destination.Register : Destination.Login);
@@ -150,6 +159,12 @@
150159
</div>
151160
</td>
152161
</tr>
162+
<tr>
163+
<td>{t('settings.profile.emails.label', { count: emailCount })}</td>
164+
<td>
165+
<a href={Destination.Emails.route}>{t('settings.profile.emails.manage')}</a>
166+
</td>
167+
</tr>
153168
<tr>
154169
<td colspan="2" class="logout">
155170
<Button type="button" onClick={logout}>{t('settings.profile.logout')}</Button>

‎src/routes/settings/emails/+page.svelte

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script lang="ts">
2+
import { onMount } from 'svelte';
3+
import { t } from 'i18next';
4+
import { DisplayableError } from '$lib/events';
5+
import { call, getEmailsClient } from '$lib/openapi';
6+
import type { Email } from '$lib/openapi/generated';
7+
import List from '$lib/components/list.svelte';
8+
9+
let emails = $state<Email[]>([]);
10+
11+
onMount(loadEmails);
12+
13+
function loadEmails() {
14+
return call(
15+
async () => {
16+
const client = await getEmailsClient();
17+
let page = 0;
18+
let newEmails: Email[];
19+
20+
do {
21+
newEmails = await client.listEmails(page);
22+
emails = emails.concat(newEmails);
23+
page++;
24+
} while (newEmails.length > 0);
25+
},
26+
async () => new DisplayableError()
27+
);
28+
}
29+
</script>
30+
31+
<div class="destination">
32+
<List>
33+
{#snippet body()}
34+
{#each emails as email}
35+
<tr>
36+
<td data-testid="email">{email.email}</td>
37+
<td>{email.main ? t('emails.main') : ''}</td>
38+
</tr>
39+
{/each}
40+
{/snippet}
41+
</List>
42+
</div>
43+
44+
<style lang="scss">
45+
@use '$lib/style/mixins';
46+
47+
.destination {
48+
width: 100%;
49+
box-sizing: border-box;
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
54+
@include mixins.expanded-width {
55+
padding: 2em;
56+
}
57+
}
58+
</style>

0 commit comments

Comments
 (0)