feat: login/profile dialog

Author: riccardoperra

apps/api/api-types/index.d.ts

@@ -15,4 +15,5 @@ export type {
   PasskeyStartLoginApi,
   PasskeyFinalizeLoginApi,
   UserInfoApi,
+  DeleteCredentialApi,
 } from '../src/schemas/index';

apps/api/src/plugins/swagger.ts

@@ -1,7 +1,6 @@
 import fastifySwagger from '@fastify/swagger';
 import fastifySwaggerUi from '@fastify/swagger-ui';
 import fp from 'fastify-plugin';
-// @ts-expect-error IntelliJ may not support that
 import packageJson from '../../package.json' assert {type: 'json'};
 
 export default fp(async fastify => {

apps/api/src/routes/v1/passkey/deleteCredential.ts

@@ -1,13 +1,23 @@
 import {FastifyPluginAsyncTypebox} from '@fastify/type-provider-typebox';
 import {Type} from '@sinclair/typebox';
+import {FastifySchema} from 'fastify';
+import {GetApiTypes} from '../../../common/types/extract-api-types.js';
+
+const schema = {
+  params: Type.Object({
+    credentialId: Type.String(),
+  }),
+} satisfies FastifySchema;
+
+export type DeleteCredentialApi = GetApiTypes<typeof schema>;
 
 const route: FastifyPluginAsyncTypebox = async fastify => {
   fastify.addHook(
     'preValidation',
     fastify.authorize({mustBeAuthenticated: true}),
   );
   fastify.delete(
-    '/credentials',
+    '/credentials/:credentialId',
     {
       schema: {
         params: Type.Object({
@@ -16,7 +26,9 @@ const route: FastifyPluginAsyncTypebox = async fastify => {
       },
     },
     async request => {
-      return fastify.passkeysApi.credential(request.params.credentialId);
+      return fastify.passkeysApi
+        .credential(request.params.credentialId)
+        .remove();
     },
   );
 };

apps/api/src/routes/v1/passkey/finalizeLogin.ts

@@ -51,19 +51,23 @@ const route: FastifyPluginAsyncTypebox = async fastify => {
     fastify.log.info(
       `Finalize passkey login for user with id ${request.body.id}`,
     );
-    return fastify.passkeysApi.login.finalize({
-      id: request.body.id,
-      type: request.body.type,
-      clientExtensionResults: request.body.clientExtensionResults,
-      authenticatorAttachment: request.body.authenticatorAttachment,
-      rawId: request.body.rawId,
-      response: {
-        clientDataJSON: request.body.response.clientDataJSON,
-        signature: request.body.response.signature,
-        userHandle: request.body.response.userHandle,
-        authenticatorData: request.body.response.authenticatorData,
-      },
-    });
+    try {
+      return await fastify.passkeysApi.login.finalize({
+        id: request.body.id,
+        type: request.body.type,
+        clientExtensionResults: request.body.clientExtensionResults,
+        authenticatorAttachment: request.body.authenticatorAttachment,
+        rawId: request.body.rawId,
+        response: {
+          clientDataJSON: request.body.response.clientDataJSON,
+          signature: request.body.response.signature,
+          userHandle: request.body.response.userHandle,
+          authenticatorData: request.body.response.authenticatorData,
+        },
+      });
+    } catch (e) {
+      throw fastify.httpErrors.unauthorized(e.originalError.details);
+    }
   });
 };
 

apps/api/src/schemas/index.ts

@@ -15,4 +15,5 @@ export type {PasskeyStartRegistrationApi} from '../routes/v1/passkey/startRegist
 export type {PasskeyFinalizeRegistrationApi} from '../routes/v1/passkey/finalizeRegistration.js';
 export type {PasskeyStartLoginApi} from '../routes/v1/passkey/startLogin.js';
 export type {PasskeyFinalizeLoginApi} from '../routes/v1/passkey/finalizeLogin.js';
+export type {DeleteCredentialApi} from '../routes/v1/passkey/deleteCredential.js';
 export type {UserInfoApi} from '../routes/v1/user/info.js';

apps/api/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "fastify-tsconfig",
   "compilerOptions": {
     "outDir": "dist",
-    "resolveJsonModule": false,
+    "resolveJsonModule": true,
+    "declaration": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "moduleResolution": "NodeNext",
@@ -15,4 +16,4 @@
   "include": [
     "./src/**/*.ts"
   ]
-}
+}

apps/codeimage/src/components/Icons/TrashIcon.tsx

@@ -0,0 +1,23 @@
+import {SvgIcon, SvgIconProps} from '@codeimage/ui';
+
+export function TrashIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+      <line x1="10" x2="10" y1="11" y2="17" />
+      <line x1="14" x2="14" y1="11" y2="17" />
+    </SvgIcon>
+  );
+}

apps/codeimage/src/components/Toolbar/LoginDialog/LoginDialog.css.ts

@@ -9,15 +9,14 @@ export const titleLogin = style({
   flexDirection: 'column',
   gap: themeTokens.spacing['4'],
   alignItems: 'center',
-  marginTop: themeTokens.spacing['8'],
+  marginTop: themeTokens.spacing['6'],
 });
 
 export const loginBox = style({
   display: 'flex',
   flexDirection: 'column',
   gap: themeTokens.spacing['2'],
   marginTop: themeTokens.spacing['12'],
-  marginBottom: themeTokens.spacing['12'],
 });
 
 export const closeIcon = style({
@@ -38,3 +37,7 @@ const backdropFilter = keyframes({
 globalStyle('div[data-panel-size]:has(div[id=loginDialog-content])', {
   animation: `${backdropFilter} 150ms normal forwards ease-in-out`,
 });
+
+globalStyle('[data-cui-theme=dark] div[id=loginDialog-content]', {
+  background: themeVars.accent1,
+});

apps/codeimage/src/components/Toolbar/LoginDialog/LoginDialog.tsx

@@ -12,6 +12,7 @@ import {ControlledDialogProps} from '@core/hooks/createControlledDialog';
 import {GithubLoginButton} from '@ui/GithubLoginButton/GithubLoginButton';
 import {CloseIcon} from '../../Icons/CloseIcon';
 import {CodeImageLogoV2} from '../../Icons/CodeImageLogoV2';
+import {KeyIcon} from '../../UserBadge/KeyIcon';
 import {closeIcon, loginBox, titleLogin} from './LoginDialog.css';
 
 export function LoginDialog(props: ControlledDialogProps) {
@@ -37,25 +38,9 @@ export function LoginDialog(props: ControlledDialogProps) {
           <GithubLoginButton />
 
           <Button
-            size={'lg'}
+            size={'md'}
             theme={'secondary'}
-            leftIcon={
-              <SvgIcon
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                size={'1.15rem'}
-              >
-                <path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
-                <circle cx="16.5" cy="7.5" r=".5" />
-              </SvgIcon>
-            }
+            leftIcon={<KeyIcon size={'md'} />}
             onClick={() => authState.providers.hanko.login()}
           >
             Login with Passkey

apps/codeimage/src/components/Toolbar/ProfileDialog/ProfileDialog.css.ts

@@ -0,0 +1,47 @@
+import {themeTokens, themeVars} from '@codeui/kit';
+import {style} from '@vanilla-extract/css';
+
+export const profileBox = style({
+  backgroundColor: themeVars.formAccent,
+  padding: themeTokens.spacing['4'],
+  borderRadius: themeTokens.radii.md,
+  gap: themeTokens.spacing['4'],
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const passkeysBox = style({
+  marginTop: themeTokens.spacing['4'],
+  backgroundColor: themeVars.formAccent,
+  padding: themeTokens.spacing['4'],
+  borderRadius: themeTokens.radii.md,
+});
+
+export const passkeysBoxTitle = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: themeTokens.spacing['4'],
+});
+
+export const passkeysList = style({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: themeTokens.radii.sm,
+  background: themeVars.formAccentBorder,
+});
+
+export const passkeyItem = style({
+  height: '42px',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: themeTokens.spacing['3'],
+  paddingRight: themeTokens.spacing['3'],
+  justifyContent: 'space-between',
+
+  selectors: {
+    '&:not(:last-child)': {
+      borderBottom: `1px solid ${themeVars.separator}`,
+    },
+  },
+});