Update SignupModal and LoginModal to use Dialog

components/Dialog/index.scss

@@ -22,6 +22,7 @@
     display: flex;
     align-items: center;
     gap: $unit;
+    justify-content: space-between;
 
     .left {
       display: flex;
@@ -38,6 +39,7 @@
 
   .DialogClose {
     background: transparent;
+    border: none;
 
     &:hover {
       cursor: pointer;
@@ -58,7 +60,13 @@
   .DialogTitle {
     color: var(--text-primary);
     font-size: $font-xlarge;
-    flex-grow: 1;
+
+    h1 {
+      color: var(--text-primary);
+      font-size: $font-xlarge;
+      font-weight: $medium;
+      text-align: left;
+    }
   }
 
   .DialogTop {

components/LoginModal/index.tsx

@@ -4,13 +4,17 @@ import Router, { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
 import { AxiosResponse } from 'axios'
 
-import * as Dialog from '@radix-ui/react-dialog'
-
 import api from '~utils/api'
 import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
 import Input from '~components/Input'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogClose,
+} from '~components/Dialog'
 
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
@@ -99,7 +103,7 @@ const LoginModal = (props: Props) => {
         .login(body)
         .then((response) => {
           storeCookieInfo(response)
-          return response.data.id
+          return response.data.user.id
         })
         .then((id) => fetchUserInfo(id))
         .then((infoResponse) => storeUserInfo(infoResponse))
@@ -111,12 +115,12 @@ const LoginModal = (props: Props) => {
   }
 
   function storeCookieInfo(response: AxiosResponse) {
-    const user = response.data
+    const resp = response.data
 
     const cookieObj: AccountCookie = {
-      userId: user.id,
+      userId: resp.user.id,
-      username: user.username,
+      username: resp.user.username,
-      token: response.data.access_token,
+      token: resp.access_token,
     }
 
     setCookie('account', cookieObj, { path: '/' })
@@ -165,51 +169,44 @@ const LoginModal = (props: Props) => {
   }
 
   return (
-    <Dialog.Root open={open} onOpenChange={openChange}>
+    <Dialog open={open} onOpenChange={openChange}>
-      <Dialog.Trigger asChild>
+      <DialogTrigger asChild>
         <li className="MenuItem">
           <span>{t('menu.login')}</span>
         </li>
-      </Dialog.Trigger>
+      </DialogTrigger>
-      <Dialog.Portal>
+      <DialogContent className="Login Dialog">
-        <Dialog.Content
+        <div className="DialogHeader">
-          className="Login Dialog"
+          <div className="DialogTitle">
-          onOpenAutoFocus={(event) => event.preventDefault()}
+            <h1>{t('modals.login.title')}</h1>
-        >
-          <div className="DialogHeader">
-            <Dialog.Title className="DialogTitle">
-              {t('modals.login.title')}
-            </Dialog.Title>
-            <Dialog.Close className="DialogClose" asChild>
-              <span>
-                <CrossIcon />
-              </span>
-            </Dialog.Close>
           </div>
+          <DialogClose className="DialogClose">
+            <CrossIcon />
+          </DialogClose>
+        </div>
 
-          <form className="form" onSubmit={login}>
+        <form className="form" onSubmit={login}>
-            <Input
+          <Input
-              name="email"
+            name="email"
-              placeholder={t('modals.login.placeholders.email')}
+            placeholder={t('modals.login.placeholders.email')}
-              onChange={handleChange}
+            onChange={handleChange}
-              error={errors.email}
+            error={errors.email}
-              ref={emailInput}
+            ref={emailInput}
-            />
+          />
 
-            <Input
+          <Input
-              name="password"
+            name="password"
-              placeholder={t('modals.login.placeholders.password')}
+            placeholder={t('modals.login.placeholders.password')}
-              onChange={handleChange}
+            type="password"
-              error={errors.password}
+            onChange={handleChange}
-              ref={passwordInput}
+            error={errors.password}
-            />
+            ref={passwordInput}
+          />
 
-            <Button>{t('modals.login.buttons.confirm')}</Button>
+          <Button text={t('modals.login.buttons.confirm')} />
-          </form>
+        </form>
-        </Dialog.Content>
+      </DialogContent>
-        <Dialog.Overlay className="Overlay" />
+    </Dialog>
-      </Dialog.Portal>
-    </Dialog.Root>
   )
 }
 

components/SignupModal/index.tsx

@@ -5,13 +5,17 @@ import { useRouter } from 'next/router'
 import { Trans, useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 
-import * as Dialog from '@radix-ui/react-dialog'
-
 import api from '~utils/api'
 import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
 import Input from '~components/Input'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogClose,
+} from '~components/Dialog'
 
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
@@ -75,19 +79,19 @@ const SignupModal = (props: Props) => {
         .create(body)
         .then((response) => {
           storeCookieInfo(response)
-          return response.data.user_id
+          return response.data.id
         })
         .then((id) => fetchUserInfo(id))
         .then((infoResponse) => storeUserInfo(infoResponse))
   }
 
   function storeCookieInfo(response: AxiosResponse) {
-    const user = response.data.user
+    const resp = response.data
 
     const cookieObj: AccountCookie = {
-      userId: user.user_id,
+      userId: resp.id,
-      username: user.username,
+      username: resp.username,
-      token: user.token,
+      token: resp.token,
     }
 
     setCookie('account', cookieObj, { path: '/' })
@@ -99,7 +103,6 @@ const SignupModal = (props: Props) => {
 
   function storeUserInfo(response: AxiosResponse) {
     const user = response.data
-    console.log(user)
 
     const cookieObj: UserCookie = {
       picture: user.avatar.picture,
@@ -252,73 +255,67 @@ const SignupModal = (props: Props) => {
   }
 
   return (
-    <Dialog.Root open={open} onOpenChange={openChange}>
+    <Dialog open={open} onOpenChange={openChange}>
-      <Dialog.Trigger asChild>
+      <DialogTrigger asChild>
         <li className="MenuItem">
           <span>{t('menu.signup')}</span>
         </li>
-      </Dialog.Trigger>
+      </DialogTrigger>
-      <Dialog.Portal>
+      <DialogContent className="Signup Dialog">
-        <Dialog.Content
+        <div className="DialogHeader">
-          className="Signup Dialog"
+          <div className="DialogTitle">
-          onOpenAutoFocus={(event) => event.preventDefault()}
+            <h1>{t('modals.signup.title')}</h1>
-        >
-          <div className="DialogHeader">
-            <Dialog.Title className="DialogTitle">
-              {t('modals.signup.title')}
-            </Dialog.Title>
-            <Dialog.Close className="DialogClose" asChild>
-              <span>
-                <CrossIcon />
-              </span>
-            </Dialog.Close>
           </div>
+          <DialogClose className="DialogClose">
+            <CrossIcon />
+          </DialogClose>
+        </div>
 
-          <form className="form" onSubmit={register}>
+        <form className="form" onSubmit={register}>
-            <Input
+          <Input
-              name="username"
+            name="username"
-              placeholder={t('modals.signup.placeholders.username')}
+            placeholder={t('modals.signup.placeholders.username')}
-              onChange={handleNameChange}
+            onChange={handleNameChange}
-              error={errors.username}
+            error={errors.username}
-              ref={usernameInput}
+            ref={usernameInput}
-            />
+          />
 
-            <Input
+          <Input
-              name="email"
+            name="email"
-              placeholder={t('modals.signup.placeholders.email')}
+            placeholder={t('modals.signup.placeholders.email')}
-              onChange={handleNameChange}
+            onChange={handleNameChange}
-              error={errors.email}
+            error={errors.email}
-              ref={emailInput}
+            ref={emailInput}
-            />
+          />
 
-            <Input
+          <Input
-              name="password"
+            name="password"
-              placeholder={t('modals.signup.placeholders.password')}
+            placeholder={t('modals.signup.placeholders.password')}
-              onChange={handlePasswordChange}
+            type="password"
-              error={errors.password}
+            onChange={handlePasswordChange}
-              ref={passwordInput}
+            error={errors.password}
-            />
+            ref={passwordInput}
+          />
 
-            <Input
+          <Input
-              name="confirm_password"
+            name="confirm_password"
-              placeholder={t('modals.signup.placeholders.password_confirm')}
+            placeholder={t('modals.signup.placeholders.password_confirm')}
-              onChange={handlePasswordChange}
+            type="password"
-              error={errors.passwordConfirmation}
+            onChange={handlePasswordChange}
-              ref={passwordConfirmationInput}
+            error={errors.passwordConfirmation}
-            />
+            ref={passwordConfirmationInput}
+          />
 
-            <Button>{t('modals.signup.buttons.confirm')}</Button>
+          <Button text={t('modals.signup.buttons.confirm')} />
 
-            <Dialog.Description className="terms">
+          <p className="terms">
-              {/* <Trans i18nKey="modals.signup.agreement">
+            {/* <Trans i18nKey="modals.signup.agreement">
                                 By signing up, I agree to the <Link href="/privacy"><span>Privacy Policy</span></Link><Link href="/usage"><span>Usage Guidelines</span></Link>.
                             </Trans> */}
-            </Dialog.Description>
+          </p>
-          </form>
+        </form>
-        </Dialog.Content>
+      </DialogContent>
-        <Dialog.Overlay className="Overlay" />
+    </Dialog>
-      </Dialog.Portal>
-    </Dialog.Root>
   )
 }