ok

src/components/Modal.js

@@ -104,7 +104,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
         
         {modalContent === "create_coupon" && <CreateCoupon />}
         {modalContent === "check_coupon" && <CheckCoupon />}
-        {modalContent === "create_user" && <CreateUserWithCoupon />}
+        {modalContent === "create_user" && <CreateUserWithCoupon setModal={setModal}/>}
       </div>
     </div>
   );

src/pages/CreateUserWithCoupon.js

@@ -12,6 +12,11 @@ const LinktreePage = ({ setModal }) => {
   const [couponCode, setCouponCode] = useState('');
   const [couponStatus, setCouponStatus] = useState('');
   const [couponDetails, setCouponDetails] = useState(null);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
+  const [inputtingPassword, setInputtingPassword] = useState(false);
   const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -80,13 +85,25 @@ const LinktreePage = ({ setModal }) => {
         const data = await response.json();
         setCouponStatus('User created successfully with coupon');
         setCouponDetails(null);
-        console.log(data);
+
+        localStorage.setItem('auth', data.token);
+
+        // Clean the URL by removing query parameters and hash
+        const cleanUrl = window.location.origin + window.location.pathname;
+
+        // Replace the current URL with the cleaned one
+        window.history.replaceState(null, '', cleanUrl);
+
+        // Reload the page with the cleaned URL (no query params or hash)
+        window.location.reload();
       } else {
         const errorData = await response.json();
         setCouponStatus(errorData.message || 'Error creating user');
+        setModal('join', { couponCode })
       }
     } catch (error) {
       setCouponStatus('Error creating user.');
+      setModal('join', { couponCode })
     }
   };
 
@@ -94,39 +111,62 @@ const LinktreePage = ({ setModal }) => {
     <div className={styles.linktreePage}>
       <div className={styles.dashboardContainer}>
         <div className={styles.mainHeading}>Gunakan Kupon</div>
-            <form className={styles.linktreeForm} onSubmit={handleCreateUserWithCoupon}>
+
+        <div className={styles.LoginForm}>
+          <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+            <label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
             <input
               type="text"
               placeholder="Username"
+              maxLength="30"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
-                className={styles.usernameInput}
+              className={!error ? styles.usernameInput : styles.usernameInputError}
             />
             <input
               type="email"
               placeholder="Email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-                className={styles.usernameInput}
+              className={!error ? styles.usernameInput : styles.usernameInputError}
             />
+            <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
+              <span>➜</span>
+            </button>
+          </div>
+
+          <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+            <span>
+              <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
+              <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----------------- &nbsp; </label>
+
+            </span>
+
             <input
               type="password"
               placeholder="Password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-                className={styles.usernameInput}
+              maxLength="30"
+              className={!error ? styles.usernameInput : styles.usernameInputError}
             />
             <input
               type="password"
               placeholder="Re-type Password"
               value={retypePassword}
               onChange={(e) => setRetypePassword(e.target.value)}
-                className={styles.usernameInput}
+              maxLength="30"
+              className={!error ? styles.usernameInput : styles.usernameInputError}
             />
-              <button type="submit" className={styles.claimButton}>
+            <button
-                <span>Buat Akun</span>
+              onClick={handleCreateUserWithCoupon}
+              className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
+              disabled={loading}
+            >
+              <span>{loading ? 'Loading...' : 'Masuk'}</span>
             </button>
-            </form>
+          </div>
+        </div>
       </div>
     </div>
   );

src/pages/Dashboard.js

@@ -17,6 +17,7 @@ const LinktreePage = ({ user, setModal }) => {
   const location = useLocation();
   const [lastModal, setLastModal] = useState(false);
 
+  const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
   const [inputtingPassword, setInputtingPassword] = useState(false);
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -882,7 +883,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
 
             {getLocalStorage('auth') == null && (
               <div className={styles.LoginForm}>
-                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : styles.reverseForm}`}>
+                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
                   <label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
                   <input
                     id="username"
@@ -892,12 +893,12 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
                   />
-                  <button onClick={() => setInputtingPassword(true)} className={styles.claimButton}>
+                  <button onClick={() => {setInputtingPassword(true); setWasInputtingPassword(true)}} className={styles.claimButton}>
                     <span>➜</span>
                   </button>
                 </div>
 
-                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : styles.reverseForm}`}>
+                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
                   <span>
                     <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
                     <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----- &nbsp; </label>

src/pages/Join.js

@@ -16,10 +16,10 @@ const LinktreePage = ({ data, setModal }) => {
 
   // Detect query params on component mount
   useEffect(() => {
+    if(couponCode != '') return;
     const code = queryParams.get('couponCode');
     console.log(code)
     if (code) {
-      setCouponStatus(200);
       setCouponCode(code);
       setIsUsingCoupon(true);  // Automatically switch to the coupon input state
       handleCheckCoupon(code); // Automatically check the coupon code
@@ -144,6 +144,7 @@ const LinktreePage = ({ data, setModal }) => {
                 period={couponDetails?.discountPeriods}
                 expiration={couponDetails?.expirationDate}
               />
+              {couponStatus == 200 &&
               <form className={styles.linktreeForm}>
                 <label htmlFor="username" className={styles.usernameLabel}>
                   --------------------------------------------
@@ -157,6 +158,7 @@ const LinktreePage = ({ data, setModal }) => {
                   <span>Buat akun dengan kupon ini</span>
                 </button>
               </form>
+}
             </>
           )}
           <div className={styles.footer}>
@@ -176,6 +178,7 @@ const LinktreePage = ({ data, setModal }) => {
 
                   // Remove the couponCode query parameter
                   url.searchParams.delete('couponCode');
+                  url.searchParams.delete('codeStatus');
 
                   // Update the browser's URL, but keep 'modal=join' intact
                   window.history.pushState({}, '', url.toString());

src/pages/LinktreePage.module.css

@@ -233,8 +233,13 @@
     left: 0vw;
   }
 
-  100% {
+  99.9% {
     left: 100vw;
+    visibility: hidden;
+  }
+  100% {
+    left: 0vw;
+    visibility: hidden;
   }
 }