Basic CardDav UI (Contacts)

This implements a basic CardDav UI, titled "Contacts". It allows creating new contacts with a first name + last name, and editing their first and last names, main email, main phone, and notes.

You can also import and export VCF (VCARD) files.

It also allows editing the VCARD directly, for power users.

Additionally, you can choose, create, or delete address books, and if there's no address book created yet in your CardDav server (first-time setup), it'll automatically create one, titled "Contacts".

Finally, there are some dependency updates and a fix for the config not allowing disabling the `cardDav` or the `calDav` server.

Related to #56

routes/api/contacts/add-addressbook.tsx

@@ -0,0 +1,39 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { AddressBook, ContactModel } from '/lib/models/contacts.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  name: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  addressBooks: AddressBook[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (!requestBody.name) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const userId = context.state.user.id;
+
+    await ContactModel.createAddressBook(userId, requestBody.name);
+
+    const addressBooks = await ContactModel.listAddressBooks(userId);
+
+    const responseBody: ResponseBody = { success: true, addressBooks };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/contacts/add.tsx

@@ -0,0 +1,46 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { Contact, ContactModel } from '/lib/models/contacts.ts';
+import { generateVCard } from '/lib/utils/contacts.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  firstName: string;
+  lastName?: string;
+  addressBookId: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  contacts: Contact[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (!requestBody.firstName || !requestBody.addressBookId) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const userId = context.state.user.id;
+
+    const contactId = crypto.randomUUID();
+
+    const vCard = generateVCard(contactId, requestBody.firstName, requestBody.lastName);
+
+    await ContactModel.create(userId, requestBody.addressBookId, contactId, vCard);
+
+    const contacts = await ContactModel.list(userId, requestBody.addressBookId);
+
+    const responseBody: ResponseBody = { success: true, contacts };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/contacts/delete-addressbook.tsx

@@ -0,0 +1,39 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { AddressBook, ContactModel } from '/lib/models/contacts.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  addressBookId: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  addressBooks: AddressBook[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (!requestBody.addressBookId) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const userId = context.state.user.id;
+
+    await ContactModel.deleteAddressBook(userId, requestBody.addressBookId);
+
+    const addressBooks = await ContactModel.listAddressBooks(userId);
+
+    const responseBody: ResponseBody = { success: true, addressBooks };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/contacts/delete.tsx

@@ -0,0 +1,46 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { Contact, ContactModel } from '/lib/models/contacts.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  contactId: string;
+  addressBookId: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  contacts: Contact[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (!requestBody.contactId || !requestBody.addressBookId) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const userId = context.state.user.id;
+
+    const contact = await ContactModel.get(userId, requestBody.addressBookId, requestBody.contactId);
+
+    if (!contact) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    await ContactModel.delete(userId, contact.url);
+
+    const contacts = await ContactModel.list(userId, requestBody.addressBookId);
+
+    const responseBody: ResponseBody = { success: true, contacts };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/contacts/get-addressbooks.tsx

@@ -0,0 +1,27 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { AddressBook, ContactModel } from '/lib/models/contacts.ts';
+
+interface Data {}
+
+export interface RequestBody {}
+
+export interface ResponseBody {
+  success: boolean;
+  addressBooks: AddressBook[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const addressBooks = await ContactModel.listAddressBooks(context.state.user.id);
+
+    const responseBody: ResponseBody = { success: true, addressBooks };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/contacts/get.tsx

@@ -0,0 +1,35 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { Contact, ContactModel } from '/lib/models/contacts.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  addressBookId: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  contacts: Contact[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (!requestBody.addressBookId) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const contacts = await ContactModel.list(context.state.user.id, requestBody.addressBookId);
+
+    const responseBody: ResponseBody = { success: true, contacts };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/api/contacts/import.tsx

@@ -0,0 +1,51 @@
+import { Handlers } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { Contact, ContactModel } from '/lib/models/contacts.ts';
+import { concurrentPromises } from '/lib/utils/misc.ts';
+import { getIdFromVCard, splitTextIntoVCards } from '/lib/utils/contacts.ts';
+
+interface Data {}
+
+export interface RequestBody {
+  vCards: string;
+  addressBookId: string;
+}
+
+export interface ResponseBody {
+  success: boolean;
+  contacts: Contact[];
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    const requestBody = await request.clone().json() as RequestBody;
+
+    if (!requestBody.vCards || !requestBody.addressBookId) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const userId = context.state.user.id;
+
+    const vCards = splitTextIntoVCards(requestBody.vCards);
+
+    await concurrentPromises(
+      vCards.map((vCard) => async () => {
+        const contactId = getIdFromVCard(vCard);
+
+        await ContactModel.create(userId, requestBody.addressBookId, contactId, vCard);
+      }),
+      5,
+    );
+
+    const contacts = await ContactModel.list(userId, requestBody.addressBookId);
+
+    const responseBody: ResponseBody = { success: true, contacts };
+
+    return new Response(JSON.stringify(responseBody));
+  },
+};

routes/contacts.tsx

@@ -0,0 +1,95 @@
+import { Handlers, PageProps } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { AddressBook, Contact, ContactModel } from '/lib/models/contacts.ts';
+import Contacts from '/islands/contacts/Contacts.tsx';
+import { AppConfig } from '/lib/config.ts';
+
+interface Data {
+  addressBookId: string;
+  userContacts: Contact[];
+  userAddressBooks: AddressBook[];
+  page: number;
+  contactsCount: number;
+  baseUrl: string;
+  search?: string;
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async GET(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    const baseUrl = (await AppConfig.getConfig()).auth.baseUrl;
+    const contactsConfig = await AppConfig.getContactsConfig();
+
+    if (!contactsConfig.enableCardDavServer) {
+      throw new Error('CardDAV server is not enabled');
+    }
+
+    const userId = context.state.user.id;
+
+    const searchParams = new URL(request.url).searchParams;
+
+    const page = parseInt(searchParams.get('page') || '1', 10);
+    const search = searchParams.get('search') || undefined;
+    let addressBookId = searchParams.get('addressBookId') || undefined;
+
+    let userAddressBooks = await ContactModel.listAddressBooks(userId);
+
+    // Create default address book if none exists
+    if (userAddressBooks.length === 0) {
+      await ContactModel.createAddressBook(userId, 'Contacts');
+
+      userAddressBooks = await ContactModel.listAddressBooks(userId);
+    }
+
+    if (!addressBookId) {
+      addressBookId = userAddressBooks[0].uid!;
+    }
+
+    if (!addressBookId) {
+      throw new Error('Invalid address book ID');
+    }
+
+    const userContacts = await ContactModel.list(userId, addressBookId);
+
+    const lowerCaseSearch = search?.toLowerCase();
+
+    const filteredContacts = lowerCaseSearch
+      ? userContacts.filter((contact) =>
+        contact.firstName!.toLowerCase().includes(lowerCaseSearch) ||
+        contact.lastName?.toLowerCase().includes(lowerCaseSearch)
+      )
+      : userContacts;
+
+    const contactsCount = filteredContacts.length;
+
+    return await context.render({
+      addressBookId,
+      userContacts: filteredContacts,
+      userAddressBooks,
+      page,
+      contactsCount,
+      baseUrl,
+      search,
+    });
+  },
+};
+
+export default function ContactsPage({ data }: PageProps<Data, FreshContextState>) {
+  return (
+    <main>
+      <Contacts
+        initialAddressBookId={data?.addressBookId || ''}
+        initialContacts={data?.userContacts || []}
+        initialAddressBooks={data?.userAddressBooks || []}
+        baseUrl={data.baseUrl}
+        page={data?.page || 1}
+        contactsCount={data?.contactsCount || 0}
+        search={data?.search || ''}
+      />
+    </main>
+  );
+}

routes/contacts/[contactId].tsx

@@ -0,0 +1,127 @@
+import { Handlers, PageProps } from 'fresh/server.ts';
+
+import { FreshContextState } from '/lib/types.ts';
+import { convertFormDataToObject } from '/lib/utils/misc.ts';
+import { Contact, ContactModel } from '/lib/models/contacts.ts';
+import { getFormDataField } from '/lib/form-utils.tsx';
+import ViewContact, { formFields } from '/islands/contacts/ViewContact.tsx';
+import { updateVCard } from '/lib/utils/contacts.ts';
+
+interface Data {
+  contact: Contact;
+  error?: string;
+  notice?: string;
+  formData: Record<string, any>;
+  addressBookId: string;
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async GET(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    const { contactId } = context.params;
+
+    const searchParams = new URL(request.url).searchParams;
+    const addressBookId = searchParams.get('addressBookId') || undefined;
+
+    if (!addressBookId) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const contact = await ContactModel.get(context.state.user.id, addressBookId, contactId);
+
+    if (!contact) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    return await context.render({ contact, formData: {}, addressBookId });
+  },
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    const { contactId } = context.params;
+
+    const searchParams = new URL(request.url).searchParams;
+    const addressBookId = searchParams.get('addressBookId') || undefined;
+
+    if (!addressBookId) {
+      return new Response('Bad request', { status: 400 });
+    }
+
+    const contact = await ContactModel.get(context.state.user.id, addressBookId, contactId);
+
+    if (!contact) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    const formData = await request.formData();
+
+    const updateType = getFormDataField(formData, 'update-type') as 'raw' | 'ui';
+
+    const firstName = getFormDataField(formData, 'first_name');
+    const lastName = getFormDataField(formData, 'last_name');
+    const email = getFormDataField(formData, 'main_email');
+    const phone = getFormDataField(formData, 'main_phone');
+    const notes = getFormDataField(formData, 'notes');
+    const rawVCard = getFormDataField(formData, 'vcard');
+
+    try {
+      formFields(contact, updateType).forEach((field) => {
+        if (field.required) {
+          const value = formData.get(field.name);
+
+          if (!value) {
+            throw new Error(`${field.label} is required`);
+          }
+        }
+      });
+
+      let updatedVCard = '';
+
+      if (updateType === 'raw') {
+        updatedVCard = rawVCard;
+      } else if (updateType === 'ui') {
+        if (!firstName) {
+          throw new Error(`First name is required.`);
+        }
+
+        updatedVCard = updateVCard(contact.data || '', { firstName, lastName, email, phone, notes });
+      }
+
+      await ContactModel.update(context.state.user.id, contact.url, updatedVCard);
+
+      return await context.render({
+        contact,
+        notice: 'Contact updated successfully!',
+        formData: convertFormDataToObject(formData),
+        addressBookId,
+      });
+    } catch (error) {
+      console.error(error);
+      return await context.render({
+        contact,
+        error: (error as Error).toString(),
+        formData: convertFormDataToObject(formData),
+        addressBookId,
+      });
+    }
+  },
+};
+
+export default function ContactsPage({ data }: PageProps<Data, FreshContextState>) {
+  return (
+    <main>
+      <ViewContact
+        initialContact={data.contact}
+        formData={data.formData}
+        error={data.error}
+        notice={data.notice}
+        addressBookId={data.addressBookId}
+      />
+    </main>
+  );
+}

routes/files.tsx

@@ -11,7 +11,6 @@ interface Data {
   currentPath: string;
   baseUrl: string;
   isFileSharingAllowed: boolean;
-  isCardDavEnabled: boolean;
   isCalDavEnabled: boolean;
 }
 
@@ -42,10 +41,8 @@ export const handler: Handlers<Data, FreshContextState> = {
     const userFiles = await FileModel.list(context.state.user.id, currentPath);
 
     const isPublicFileSharingAllowed = await AppConfig.isPublicFileSharingAllowed();
-    const contactsConfig = await AppConfig.getContactsConfig();
     const calendarConfig = await AppConfig.getCalendarConfig();
 
-    const isCardDavEnabled = contactsConfig.enableCardDavServer;
     const isCalDavEnabled = calendarConfig.enableCalDavServer;
 
     return await context.render({
@@ -54,7 +51,6 @@ export const handler: Handlers<Data, FreshContextState> = {
       currentPath,
       baseUrl,
       isFileSharingAllowed: isPublicFileSharingAllowed,
-      isCardDavEnabled,
       isCalDavEnabled,
     });
   },
@@ -69,7 +65,6 @@ export default function FilesPage({ data }: PageProps<Data, FreshContextState>)
         initialPath={data.currentPath}
         baseUrl={data.baseUrl}
         isFileSharingAllowed={data.isFileSharingAllowed}
-        isCardDavEnabled={data.isCardDavEnabled}
         isCalDavEnabled={data.isCalDavEnabled}
       />
     </main>