dropy-project · enzo-mourany · Mar 11, 2023 · Mar 11, 2023 · Mar 11, 2023 · Mar 11, 2023
diff --git a/app/error.tsx b/app/error.tsx
@@ -25,4 +25,4 @@ export default function Error({
       </button>
     </div>
   );
-};
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,20 +1,21 @@
+import React from 'react';
 import '../styles/globals.css';
 
 export const metadata = {
   title: 'Dropy Website',
   description: 'Dropy',
-}
+};
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <html lang="fr">
+    <html lang='fr'>
       <body>
         {children}
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,7 @@
-const Home = () => {
-  return (
-    <main>
-      <h1>Dropy</h1>
-    </main>
-  )
-}
+const Home = () => (
+  <main>
+    <h1>Dropy</h1>
+  </main>
+);
 
-export default Home
+export default Home;
diff --git a/app/privacy-policy/page.tsx b/app/privacy-policy/page.tsx
@@ -1,10 +1,8 @@
-const PrivacyPolicy = () => {
-  return (
-    <section id="privacy-policy">
-      <h1>Privacy Policy</h1>
-      <p>...</p>
-    </section>
-  )
-}
+const PrivacyPolicy = () => (
+  <section id='privacy-policy'>
+    <h1>Privacy Policy</h1>
+    <p>...</p>
+  </section>
+);
 
-export default PrivacyPolicy
+export default PrivacyPolicy;
diff --git a/app/radar-mode/RadarModeBox.tsx b/app/radar-mode/RadarModeBox.tsx
@@ -4,9 +4,8 @@ import radar from '../../static/img/radar.png';
 
 import styles from '../../styles/RadarMode.module.scss';
 
-export const RadarModeBox = () => {
-  return (
-    <div id='radar-mode-box' className={styles.container}>
+export const RadarModeBox = () => (
+  <div id='radar-mode-box' className={styles.container}>
     <div className={styles.box}>
       <div className={styles.inner_box}>
         <div className={styles.header}>
@@ -43,5 +42,4 @@ export const RadarModeBox = () => {
       </div>
     </div>
   </div>
-  );
-};
+);
diff --git a/app/radar-mode/page.tsx b/app/radar-mode/page.tsx
@@ -1,15 +1,13 @@
-import { RadarModeBox } from "./RadarModeBox";
-import { BackgroundMap } from "../../components/BackgroundMap";
-import { Footer } from "../../components/Footer";
+import { BackgroundMap } from '../../components/BackgroundMap';
+import { Footer } from '../../components/Footer';
+import { RadarModeBox } from './RadarModeBox';
 
-const RadarMode = () => {
-  return (
-    <>
-      <BackgroundMap />
-      <RadarModeBox />
-      <Footer />
-    </>
-  );
-};
+const RadarMode = () => (
+  <>
+    <BackgroundMap />
+    <RadarModeBox />
+    <Footer />
+  </>
+);
 
-export default RadarMode;
+export default RadarMode;
diff --git a/app/reset-password/page.tsx b/app/reset-password/page.tsx
@@ -0,0 +1,147 @@
+/* eslint-disable import/no-extraneous-dependencies */
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
+import styles from '../../styles/ResetPasswordBox.module.scss';
+
+import { Button } from '../../components/Button';
+
+const ResetPasswordBox = async () => {
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showPasswordConfirmation, setShowPasswordConfirmation] = useState<boolean>(false);
+
+  const [password, setPassword] = useState<string>('');
+  const [passwordConfirmation, setPasswordConfirmation] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState<boolean>(false);
+
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const token = urlParams.get('token');
+
+    const fetchUser = async () => {
+      try {
+        const response = await fetch(`/api/auth/resetPassword?token=${token}`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: '<token>',
+          },
+        });
+        const userData = await response.json();
+        setUser(userData);
+        console.log(userData);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchUser();
+  }, []);
+
+  const correspondentPassword: boolean = password !== passwordConfirmation;
+
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const toggleShowPasswordConfirmation = () => {
+    setShowPasswordConfirmation(!showPasswordConfirmation);
+  };
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
+
+  const handlePasswordConfirmationChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPasswordConfirmation(e.target.value);
+  };
+
+  const getTokenFromUrl = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const token = urlParams.get('token');
+    return token || '';
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      const response = await fetch('https://preprod-api.dropy-app.com/reset-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          resetPasswordToken: getTokenFromUrl(),
+          password,
+        }),
+      });
+      if (response.ok) {
+        // Handle successful password reset here
+      } else
+        setErrorMessage(true);
+    } catch (error) {
+      console.error(error);
+      setErrorMessage(true);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.box}>
+        <div className={styles.inner_box}>
+          <div className={styles.header}>
+            <p className={styles.title}>Modification du mot-de-passe</p>
+            <div className={styles.profile_container}>
+              <div className={styles.profile_picture}>
+              </div>
+              <p>@Pseudo</p>
+            </div>
+          </div>
+          <div className={styles.fields}>
+            <div className={styles.field}>
+              <div className={styles.password_input}>
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  name='password'
+                  id='password'
+                  placeholder='Nouveau mot de passe'
+                  className={styles.password_field}
+                  value={password}
+                  onChange={handlePasswordChange}
+                />
+                <div className={styles.password_icon} onClick={toggleShowPassword}>
+                  {showPassword ? <BsEyeSlashFill /> : <BsEyeFill />}
+                </div>
+              </div>
+            </div>
+            <div className={styles.field}>
+              <div className={correspondentPassword ? styles.password_input : styles.password_input_error}>
+                <input
+                  type={showPasswordConfirmation ? 'text' : 'password'}
+                  name='password'
+                  id='password'
+                  placeholder='Confirmation mot de passe'
+                  className={styles.password_field}
+                  value={passwordConfirmation}
+                  onChange={handlePasswordConfirmationChange}
+                />
+                <div className={styles.password_icon} onClick={toggleShowPasswordConfirmation}>
+                  {showPasswordConfirmation ? <BsEyeSlashFill /> : <BsEyeFill />}
+                </div>
+              </div>
+            </div>
+            {errorMessage && <p>Le mot de passe et la confirmation du mot de passe ne correspondent pas.</p>}
+          </div>
+          <div style={{ width: '100%' }}>
+            <Button text='Confirmer' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPasswordBox;
diff --git a/app/terms-conditions/page.tsx b/app/terms-conditions/page.tsx
@@ -1,9 +1,7 @@
-const TermsConditions = () => {
-  return (
-    <div>
-      <h1>Terms & Conditions</h1>
-    </div>
-  )
-}
+const TermsConditions = () => (
+  <div>
+    <h1>Terms & Conditions</h1>
+  </div>
+);
 
-export default TermsConditions
+export default TermsConditions;
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import React from 'react';
+
+import styles from '../styles/Button.module.scss';
+
+interface ButtonProps {
+  text: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({ text }) => (
+  <button
+    type='button'
+    className={styles.button}
+  >
+    {text}
+  </button>
+);
diff --git a/next.config.mjs b/next.config.mjs
@@ -3,15 +3,15 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
  * This is especially useful for Docker builds.
  */
-!process.env.SKIP_ENV_VALIDATION && (await import("./app/env/server.mjs"));
+// !process.env.SKIP_ENV_VALIDATION && (await import("./app/env/server.mjs"));
 
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
   swcMinify: true,
   i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
+    locales: ['en'],
+    defaultLocale: 'en',
   },
   experimental: {
     appDir: true,
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,4 +25,4 @@ export default function Error({ @@
           </button>
         </div>
       );
-    };
+    }