feat: sign in with passkey

apps/client/package.json

@@ -51,6 +51,7 @@
     "react-dom": "19.2.0",
     "react-hook-form": "^7.65.0",
     "react-i18next": "^16.1.0",
+    "react-qr-code": "^2.0.18",
     "simplebar-core": "^1.3.2",
     "simplebar-react": "^3.3.2",
     "stylis": "^4.3.6",
@@ -74,6 +75,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
+    "react-dropzone": "^14.3.8",
     "typescript": "^5.9.3"
   },
   "overrides": {

apps/client/src/app/(main)/pages/account/page.tsx

@@ -0,0 +1,7 @@
+import Account from '../../../../components/sections/account';
+
+const Page = () => {
+  return <Account />;
+};
+
+export default Page;

apps/client/src/app/(main)/pages/coming-soon/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import Lottie from 'lottie-react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import bird from 'assets/json/bird.json';
+import bird_dark from 'assets/json/bird_dark.json';
+import charcter from 'assets/json/character.json';
+import charcter_dark from 'assets/json/character_dark.json';
+import { useThemeMode } from 'hooks/useThemeMode';
+
+const ComingSoon = () => {
+  const { t } = useTranslation();
+  const { isDark } = useThemeMode();
+  return (
+    <Grid
+      container
+      sx={{
+        height: 1,
+      }}
+    >
+      <Grid sx={{ display: { xs: 'none', lg: 'block' } }} size={3}>
+        <Stack direction="column" sx={{ height: 1 }}>
+          <Paper sx={{ flex: 2 }} />
+          <Paper background={1} sx={{ flex: 1 }} />
+        </Stack>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          lg: 6,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gridTemplateRows: {
+              xs: 'auto max-content 100px max-content',
+              md: 'max-content auto 144px 80px',
+              xl: 'max-content auto 144px 144px',
+            },
+            height: 1,
+          }}
+        >
+          <Paper
+            sx={{
+              gridColumn: 'span 2',
+              gridRow: 'span 1',
+              py: { xs: 3, xl: 6 },
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              variant="h1"
+              sx={{
+                fontWeight: 'light',
+                fontSize: { xs: 42, lg: 56 },
+              }}
+            >
+              {t('coming_soon')}!
+            </Typography>
+          </Paper>
+
+          <Paper sx={{ gridColumn: '1/2', gridRow: '2/4' }} />
+          <Paper sx={{ gridColumn: '2/3', gridRow: '2/3' }} />
+          <Paper sx={{ gridColumn: '1/2', gridRow: '4/5' }} />
+          <Paper
+            sx={{
+              gridColumn: '2/3',
+              gridRow: '3/5',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              p: 3,
+            }}
+          >
+            <Box sx={(theme) => (theme.direction === 'rtl' ? { transform: 'scaleX(-1)' } : {})}>
+              <Lottie animationData={isDark ? bird_dark : bird} />
+            </Box>
+          </Paper>
+          <Box sx={{ gridColumn: '1/3', gridRow: '2/4', p: 5, justifySelf: 'center' }}>
+            <Stack
+              sx={{
+                justifyContent: 'center',
+                maxHeight: { sm: 370, md: 330, xl: 400 },
+                maxWidth: '100%',
+              }}
+            >
+              <Box sx={(theme) => (theme.direction === 'rtl' ? { transform: 'scaleX(-1)' } : {})}>
+                <Lottie animationData={isDark ? charcter_dark : charcter} />
+              </Box>
+            </Stack>
+          </Box>
+        </Box>
+      </Grid>
+      <Grid sx={{ display: { xs: 'none', lg: 'block' } }} size={3}>
+        <Stack direction="column" sx={{ height: 1 }}>
+          <Paper sx={{ flex: 1 }} />
+          <Paper background={5} sx={{ flex: 1 }} />
+          <Paper sx={{ flex: 1 }} />
+        </Stack>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ComingSoon;

apps/client/src/components/base/AvatarDropBox.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { DropzoneOptions, useDropzone } from 'react-dropzone';
+import { Box, Stack, SxProps, Typography } from '@mui/material';
+import { convertFileToAttachment, getFileNameFromUrl } from 'lib/utils';
+import { FileAttachment } from 'types/common';
+import IconifyIcon from 'components/base/IconifyIcon';
+import Image from './Image';
+
+interface AvatarDropBoxProps extends DropzoneOptions {
+  error?: string;
+  sx?: SxProps;
+  defaultFile?: File | string;
+}
+
+const AvatarDropBox = ({ onDrop, error, defaultFile, sx, ...rest }: AvatarDropBoxProps) => {
+  const [preview, setPreview] = useState<FileAttachment | null>(null);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (...args) => {
+      const [acceptedFiles] = args;
+      if (acceptedFiles.length > 0) {
+        setPreview(convertFileToAttachment(acceptedFiles[0]));
+        if (onDrop) {
+          onDrop(...args);
+        }
+      }
+    },
+    multiple: false,
+    accept: {
+      'image/*': ['.jpeg', '.jpg', '.png', '.gif'],
+    },
+    ...rest,
+  });
+
+  useEffect(() => {
+    if (defaultFile) {
+      if (typeof defaultFile === 'string') {
+        setPreview({
+          name: getFileNameFromUrl(defaultFile),
+          preview: defaultFile,
+          format: 'image',
+        });
+      } else {
+        setPreview(convertFileToAttachment(defaultFile));
+      }
+    }
+  }, [defaultFile]);
+
+  return (
+    <Box
+      {...getRootProps()}
+      sx={{
+        bgcolor: error ? 'error.lighter' : 'background.elevation2',
+        height: 144,
+        width: 144,
+        borderRadius: '50%',
+        borderWidth: 1,
+        borderColor: error ? 'error.main' : 'divider',
+        borderStyle: 'dashed',
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: ({ transitions }) =>
+          transitions.create(['background-color'], {
+            duration: transitions.duration.enteringScreen,
+            easing: transitions.easing.easeInOut,
+          }),
+        '&:hover': {
+          bgcolor: 'background.elevation3',
+        },
+        ...sx,
+      }}
+    >
+      <input {...getInputProps()} />
+      {preview && (
+        <Image
+          src={preview?.preview ?? ''}
+          alt={preview?.name}
+          fill
+          sx={{
+            width: 1,
+            height: 1,
+            borderRadius: '50%',
+          }}
+        />
+      )}
+
+      <Stack
+        direction="column"
+        sx={[
+          {
+            position: 'absolute',
+            height: 1,
+            width: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 0.5,
+            color: 'text.secondary',
+            transition: ({ transitions }) =>
+              transitions.create(['background-color', 'opacity'], {
+                duration: transitions.duration.enteringScreen,
+                easing: transitions.easing.easeInOut,
+              }),
+          },
+          !!preview?.preview && {
+            opacity: 0,
+            '&:hover': {
+              opacity: 1,
+              bgcolor: 'rgba(255, 255, 255, 0.8)',
+            },
+          },
+        ]}
+      >
+        <IconifyIcon
+          icon="material-symbols:add-a-photo-outline-rounded"
+          sx={{
+            fontSize: 20,
+          }}
+        />
+        {!((sx as any)?.width < 100) && <Typography variant="caption">Upload Avatar</Typography>}
+      </Stack>
+    </Box>
+  );
+};
+
+export default AvatarDropBox;

apps/client/src/components/base/PhoneTextfield.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import IconifyIcon from './IconifyIcon';
+import { Country } from 'types/countries';
+import NumberTextField from './NumberTextField';
+import React, { useEffect, useState } from 'react';
+import { InputAdornment, Stack } from '@mui/material';
+import { countries as countriesData } from 'data/countries';
+import CountrySelect from 'components/common/CountrySelect';
+import StyledTextField from 'components/styled/StyledTextField';
+
+interface PhoneTextfieldProps {
+  countries?: Country[];
+  onChange?: (value: string, event?: React.ChangeEvent<HTMLElement>) => void;
+  defaultValue?: {
+    number: string;
+    code: string;
+  };
+}
+
+const PhoneTextfield = ({
+  countries = countriesData,
+  onChange,
+  defaultValue,
+}: PhoneTextfieldProps) => {
+  const [country, setCountry] = useState(countries[0]);
+  const [phoneNo, setPhoneNo] = useState('');
+
+  useEffect(() => {
+    if (defaultValue) {
+      const country = countries.find((country) => country.phone === defaultValue.code);
+
+      setCountry(country || countries[0]);
+      setPhoneNo(defaultValue.number);
+    }
+  }, []);
+
+  return (
+    <Stack
+      spacing={1}
+      sx={{
+        mb: '1px',
+      }}
+      alignItems="center"
+    >
+      <CountrySelect
+        onChange={(event, value) => {
+          if (value) {
+            setCountry(value);
+          }
+          if (onChange) {
+            onChange(`(+${value?.phone})${phoneNo}`);
+          }
+        }}
+        options={countries}
+        value={country}
+        getOptionLabel={(option) => {
+          return `+${option.phone}`;
+        }}
+        fields={{ flag: true, name: false, phone: true, code: false }}
+        disableClearable
+        forcePopupIcon={false}
+        renderInput={(params) => {
+          return (
+            <StyledTextField
+              {...params}
+              sx={{
+                minWidth: 90,
+                '& .MuiInputBase-root': {
+                  pl: '8px !important',
+                  '& .MuiInputBase-input': {
+                    px: '0 !important',
+                  },
+                },
+              }}
+              slotProps={{
+                input: {
+                  ...params.InputProps,
+                  startAdornment: country ? (
+                    <InputAdornment position="start">
+                      <IconifyIcon icon={country?.flag} sx={{ width: 24 }} />
+                    </InputAdornment>
+                  ) : undefined,
+                },
+              }}
+              size="large"
+            />
+          );
+        }}
+        slotProps={{
+          popper: {
+            sx: {
+              '& .MuiAutocomplete-option': {
+                pl: '8px !important',
+                pr: '8px !important',
+                fontSize: 14,
+              },
+            },
+          },
+        }}
+      />
+      <NumberTextField
+        variant="custom"
+        size="large"
+        fullWidth
+        value={phoneNo}
+        onChange={(e) => {
+          setPhoneNo(e.target.value);
+          if (onChange) {
+            onChange(`(+${country?.phone})${e.target.value}`, e);
+          }
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default PhoneTextfield;