ok

2024-11-16 23:44:48 +07:00
parent bea0ff63d7
commit b8c1d30d14
26 changed files with 1841 additions and 799 deletions
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import styles from './Login.module.css'; // Import the module.css file
+import { loginUser } from "../helpers/userHelpers";
+import { ThreeDots } from "react-loader-spinner";
+import { useNavigate } from "react-router-dom";
+
+const LinktreePage = ({ user, setModal }) => {
+  const [inputtingPassword, setInputtingPassword] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleLogin = async () => {
+    try {
+      setError(false);
+      setLoading(true);
+      const response = await loginUser(username, password);
+
+      if (response.success) {
+        localStorage.setItem('auth', response.token);
+
+        if (response.cafeId !== null) {
+          window.location.href = response.cafeId;
+        } else {
+          let destination = '/';
+          window.location.href = destination;
+        }
+      } else {
+        setError(true); // Trigger error state in the button
+        console.error('Login failed');
+      }
+    } catch (error) {
+      setError(true);
+      console.error('Error occurred while logging in:', error.message);
+    } finally {
+      setLoading(false); // Ensure loading state is cleared
+    }
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className={styles.linktreePage}>
+
+          <div className={styles.dashboardContainer}>
+            <div className={styles.mainHeading}>
+              COBA KEDAIMASTER
+              <div className={styles.swipeContainer}>
+                <div className={styles.swipeContent}>
+                  <div className={styles.swipeItem}>pemesanan langsung dari meja</div>
+                  <div className={styles.swipeItem}>pengelolaan pesanan dan keuangan</div>
+                  <div className={styles.swipeItem}>tentukan suasana musik</div>
+                  <div className={styles.swipeItem}>pengelolaan stok dan manajemen</div>
+                  <div className={styles.swipeItem}>jangan pernah ragukan pelanggan</div>
+                </div>
+              </div>
+              diskon 0%
+            </div>
+
+            <div className={styles.subHeading}>
+              Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
+            </div>
+              <div className={styles.LoginForm}>
+                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : styles.reverseForm}`}>
+                  <label htmlFor="username" className={styles.usernameLabel}>
+                    ---- masuk -------------------------------
+                  </label>
+                  <input
+                    id="username"
+                    placeholder="username"
+                    maxLength="30"
+                    className={!error ? styles.usernameInput : styles.usernameInputError}
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                  />
+                  <button onClick={() => setInputtingPassword(true)} className={styles.claimButton}>
+                    <span>➜</span>
+                  </button>
+                </div>
+
+                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : 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><label onClick={() => setModal('reset-password', { username: username })} htmlFor="password" className={styles.usernameLabel}>
+                      lupa password? -
+                    </label></span>
+                  <input
+                    id="password"
+                    placeholder="password"
+                    type="password"
+                    maxLength="30"
+                    className={!error ? styles.usernameInput : styles.usernameInputError}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+                  <button
+                    onClick={handleLogin}
+                    className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
+                    disabled={loading}
+                  >
+                    <span>{loading ? 'Loading...' : 'Masuk'}</span>
+                  </button>
+                </div>
+              </div>
+            <div className={styles.footer}>
+              <div className={styles.footerLinks}>
+                <a
+                  href="https://linktr.ee/discover/trending"
+                  target="_blank"
+                  rel="noreferrer"
+                  className={styles.footerLink}
+                >
+                  Pelajari lebih lanjut
+                </a>
+                <a
+                  href="https://linktr.ee"
+                  target="_blank"
+                  rel="noreferrer"
+                  className={styles.footerLink}
+                >
+                  Tentang kedaimaster.com
+                </a>
+              </div>
+            </div>
+          </div>
+          </div>
+  );
+};
+
+export default LinktreePage;