feat: send activation mail after register

Casuals4Fun · Jul 20, 2024 · d656874 · d656874
2 parents ff95f20 + 9817f1b
commit d656874
Show file tree

Hide file tree

Showing 40 changed files with 387 additions and 468 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -43,6 +43,6 @@ jobs:
       run: |
         lftp -e "mirror --only-newer --parallel=100 -R ./client/dist/ /debateme.shubhamlal.in/" ${{ secrets.FTP_SERVER }}
 
-    - name: Upload backend
-      run: |
-        lftp -e "mirror --only-newer --parallel=100 -R ./server/ /debateme-api/" ${{ secrets.FTP_SERVER }}
+    # - name: Upload backend
+    #   run: |
+    #     lftp -e "mirror --only-newer --parallel=100 -R ./server/ /debateme-api/" ${{ secrets.FTP_SERVER }}
diff --git a/README.md b/README.md
@@ -9,4 +9,4 @@
 - MySQL
 
 ## ⭐ Contributors
-<!-- <img src="https://contributors-img.web.app/image?repo=Shubham-Lal/DebateMe"/> -->
+<img src='https://contributors-img.web.app/image?repo=Casuals4Fun/DebateMe'/>
diff --git a/client/index.html b/client/index.html
@@ -1,26 +1,26 @@
 <!doctype html>
-<html lang="en">
+<html lang='en'>
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta charset='UTF-8' />
+  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
 
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Regular.ttf" type="font/ttf" crossOrigin="anonymous" />
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Medium.ttf" type="font/ttf" crossOrigin="anonymous" />
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-SemiBold.ttf" type="font/ttf" crossOrigin="anonymous" />
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Bold.ttf" type="font/ttf" crossOrigin="anonymous" />
-  <link rel="preload" as="image" href="/logo.png" type="image/png" />
+  <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Regular.ttf' type='font/ttf' crossOrigin='anonymous' />
+  <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Medium.ttf' type='font/ttf' crossOrigin='anonymous' />
+  <link rel='preload' as='font' href='/fonts/Onest/static/Onest-SemiBold.ttf' type='font/ttf' crossOrigin='anonymous' />
+  <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Bold.ttf' type='font/ttf' crossOrigin='anonymous' />
+  <link rel='preload' as='image' href='/logo.png' type='image/png' />
 
-  <link rel="icon" href="/logo.png" type="image/png" />
+  <link rel='icon' href='/logo.png' type='image/png' />
   <title>DebateMe</title>
-  <meta name="description" content="Your opinion is what matters." />
+  <meta name='description' content='Your opinion is what matters.' />
 
-  <link rel="stylesheet" href="/syncfusion.css">
+  <link rel='stylesheet' href='/syncfusion.css'>
 </head>
 
 <body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
+  <div id='root'></div>
+  <script type='module' src='/src/main.tsx'></script>
 </body>
 
 </html>
diff --git a/client/public/theme/sun.svg b/client/public/theme/sun.svg
diff --git a/client/src/App.css b/client/src/App.css
@@ -71,7 +71,7 @@
 
 .card-break {
     break-inside: avoid;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 }
 
 @media screen and (max-width: 1880px) {

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -55,10 +55,10 @@ export default function App() {
       <>
         <LeftSidebar isVisible={isScrollingUp} />
         <button className='sidebar-btn left' onClick={() => setSidebar(!sidebar)}>
-          {sidebar ? <FaChevronLeft size={20} /> : <FaChevronRight size={20} />}
+          {sidebar ? <FaChevronRight size={20} /> : <FaChevronLeft size={20} />}
         </button>
       </>
-      <main id='main' ref={mainRef} className={`${expand ? 'expand' : ''} ${sidebar ? '' : 'w-full'}`}>
+      <main id='main' ref={mainRef} className={`${expand ? 'expand' : ''} ${sidebar ? 'w-full' : ''}`}>
         <Routes>
           <Route path='/' element={<HomePage />} />
           <Route path='/auth' element={<AuthPage />} />isScrollingUp
@@ -76,15 +76,15 @@ export default function App() {
       <>
         <RightSidebar isVisible={isScrollingUp} />
         <button className='sidebar-btn right' onClick={() => setSidebar(!sidebar)}>
-          {sidebar ? <FaChevronRight size={20} /> : <FaChevronLeft size={20} />}
+          {sidebar ? <FaChevronLeft size={20} /> : <FaChevronRight size={20} />}
         </button>
       </>
 
       {authTab !== AuthTab.Closed && <AuthModal />}
 
       <Toaster
         duration={3000}
-        position="top-center"
+        position='top-center'
         theme={(localStorage.getItem('theme') as Theme) || Theme.Dark}
       />
     </div>

diff --git a/client/src/ProtectedRoute.tsx b/client/src/ProtectedRoute.tsx
@@ -13,7 +13,7 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
         return <LoadingComponent />
     }
     else if (isAuthenticated === AuthStatus.Failed) {
-        return <Navigate to="/auth" replace />;
+        return <Navigate to='/auth' replace />;
     }
 
     return <>{children}</>;

diff --git a/client/src/components/button/toggle-theme.tsx b/client/src/components/button/toggle-theme.tsx
@@ -23,8 +23,8 @@ const ToggleTheme = () => {
             <div className='display' onClick={handleToggleTheme}>
                 <div className='toggle-btn'>
                     <div className='circle'>
-                        <img src="/theme/moon.png" className="moon" />
-                        <img src="/theme/sun.svg" className="sun" />
+                        <img src='/theme/moon.png' className='moon' />
+                        <img src='/theme/sun.svg' className='sun' />
                     </div>
                 </div>
             </div>

diff --git a/client/src/components/card/claim-username.tsx b/client/src/components/card/claim-username.tsx
@@ -60,19 +60,19 @@ const ClaimUsername = () => {
     };
 
     return (
-        <form id='claim-username' className={sidebar ? '' : 'hide'} onSubmit={handleUsernameSubmit}>
+        <form id='claim-username' className={sidebar ? 'hide' : ''} onSubmit={handleUsernameSubmit}>
             <p>Get Started</p>
             <div className='username-input'>
                 <span className='domain'>debateme.app/</span>
                 <input
                     name='username'
                     placeholder='johndoe'
-                    autoComplete="on"
+                    autoComplete='on'
                     value={username}
                     onChange={handleUsernameChange}
                     onKeyPress={handleKeyPress}
-                    className={isSubmitted && (!username || message.type === 'error') ? "shake" : ""}
-                    style={{ border: isSubmitted && (!username || message.type === 'error') ? "2px dotted var(--username-color)" : "" }}
+                    className={isSubmitted && (!username || message.type === 'error') ? 'shake' : ''}
+                    style={{ border: isSubmitted && (!username || message.type === 'error') ? '2px dotted var(--username-color)' : '' }}
                 />
             </div>
             <button className='submit-btn' disabled={loading}>

diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -15,8 +15,8 @@ const ClosedDebateCard = () => {
     }
 
     return (
-        <div id='closed-card' className={sidebar ? '' : 'card-break'}>
-            <div className={`left ${sidebar ? '' : 'flex-unset'}`}>
+        <div id='closed-card' className={sidebar ? 'card-break' : ''}>
+            <div className={`left ${sidebar ? 'flex-unset' : ''}`}>
                 <h2 title='Sony is the best camera of all time. ↗' onClick={() => navigate('/')}>
                     Sony is the best camera of all time.
                 </h2>
@@ -26,15 +26,15 @@ const ClosedDebateCard = () => {
                     Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.
                 </p>
             </div>
-            <div className={`right ${sidebar ? '' : 'flex-unset'}`}>
+            <div className={`right ${sidebar ? 'flex-unset' : ''}`}>
                 <div className='user-info'>
                     <div className='debate-from'>
-                        <img src="/user1.webp" alt="" loading="lazy" onClick={() => handleProfileClick('aniketdas')} />
+                        <img src='/user1.webp' alt='' loading='lazy' onClick={() => handleProfileClick('aniketdas')} />
                         <p onClick={() => handleProfileClick('aniketdas')}>Aniket Das</p>
                         <p onClick={() => handleProfileClick('aniketdas')}>aniketdas</p>
                     </div>
                     <div className='debate-by'>
-                        <img src="/user2.jpeg" alt="" loading="lazy" onClick={() => handleProfileClick('pratikprasad')} />
+                        <img src='/user2.jpeg' alt='' loading='lazy' onClick={() => handleProfileClick('pratikprasad')} />
                         <p onClick={() => handleProfileClick('pratikprasad')}>Pratik Prasad</p>
                         <p onClick={() => handleProfileClick('pratikprasad')}>pratikprasad</p>
                     </div>
@@ -59,8 +59,8 @@ const ClosedDebateLoadingCard = () => {
     const { sidebar } = useNavStore();
 
     return (
-        <div id='closed-card-loading' className={sidebar ? '' : 'card-break'}>
-            <div className={`left ${sidebar ? '' : 'flex-unset'}`}>
+        <div id='closed-card-loading' className={sidebar ? 'card-break' : ''}>
+            <div className={`left ${sidebar ? 'flex-unset' : ''}`}>
                 <div className='topic'>
                     <LoadingSkeleton />
                 </div>
@@ -72,7 +72,7 @@ const ClosedDebateLoadingCard = () => {
                     <LoadingSkeleton />
                 </div>
             </div>
-            <div className={`right ${sidebar ? '' : 'flex-unset'}`}>
+            <div className={`right ${sidebar ? 'flex-unset' : ''}`}>
                 <div className='user-info'>
                     <div className='debater'>
                         <LoadingSkeleton />

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -15,7 +15,7 @@ const OpenDebateCard = () => {
     }
 
     return (
-        <div id='open-card' className={sidebar ? '' : 'card-break'}>
+        <div id='open-card' className={sidebar ? 'card-break' : ''}>
             <div className='debate-header'>
                 <h2 title='Artificial Intelligence – Is AI good for society or not? ↗' onClick={() => navigate('/')}>
                     Artificial Intelligence – Is AI good for society or not?
@@ -28,7 +28,7 @@ const OpenDebateCard = () => {
                 Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.
             </p>
             <div className='user-info'>
-                <img src="/user.jpg" alt="" loading="lazy" onClick={() => handleProfileClick('julieroberts')} />
+                <img src='/user.jpg' alt='' loading='lazy' onClick={() => handleProfileClick('julieroberts')} />
                 <div className='user-detail'>
                     <p onClick={() => handleProfileClick('julieroberts')}>Julie Roberts</p>
                     <p onClick={() => handleProfileClick('julieroberts')}>julieroberts</p>
@@ -56,7 +56,7 @@ const OpenDebateLoadingCard = () => {
     const { sidebar } = useNavStore();
 
     return (
-        <div id='open-card-loading' className={sidebar ? '' : 'card-break'}>
+        <div id='open-card-loading' className={sidebar ? 'card-break' : ''}>
             <div className='debate-header'>
                 <LoadingSkeleton />
                 <LoadingSkeleton />

diff --git a/client/src/components/loading/svg.tsx b/client/src/components/loading/svg.tsx
@@ -7,16 +7,16 @@ interface Props {
 
 const LoadingSVG: React.FC<Props> = ({ size, color }) => {
     return (
-        <svg className="loading-spinner" width={size} height={size} viewBox={`0 0 16 16`} fill="none" data-view-component="true">
-            <circle cx="8" cy="8" r="7" stroke={color || "currentColor"} strokeOpacity="0.25" strokeWidth="2" vectorEffect="non-scaling-stroke" fill="none"></circle>
-            <path d="M15 8a7.002 7.002 0 00-7-7" stroke={color || "currentColor"} strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke"></path>
+        <svg className='loading-spinner' width={size} height={size} viewBox={`0 0 16 16`} fill='none' data-view-component='true'>
+            <circle cx='8' cy='8' r='7' stroke={color || 'currentColor'} strokeOpacity='0.25' strokeWidth='2' vectorEffect='non-scaling-stroke' fill='none'></circle>
+            <path d='M15 8a7.002 7.002 0 00-7-7' stroke={color || 'currentColor'} strokeWidth='2' strokeLinecap='round' vectorEffect='non-scaling-stroke'></path>
         </svg>
     )
 }
 
 const LoadingComponent = () => {
     return (
-        <div className="loading-component">
+        <div className='loading-component'>
             <LoadingSVG size={30} />
         </div>
     )