Fix client and server folders

2026-06-24 16:22:20 +05:30
parent 7c1ca992f9
commit 0e5b1714e3
28 changed files with 18978 additions and 1 deletions
@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { authAPI } from '../utils/api';
+import './Login.css';
+
+function Login({ onLogin }) {
+  const [isLogin, setIsLogin] = useState(true);
+  const [email, setEmail] = useState('hr@company.com');
+  const [password, setPassword] = useState('password123');
+  const [username, setUsername] = useState('');
+  const [role, setRole] = useState('HR');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      if (isLogin) {
+        const response = await authAPI.login({ email, password });
+
+        localStorage.setItem('token', response.data.token);
+        localStorage.setItem('user', JSON.stringify(response.data.user));
+
+        onLogin(response.data.user);
+      } else {
+        const response = await authAPI.signup({
+          username,
+          email,
+          password,
+          role,
+        });
+
+        localStorage.setItem('token', response.data.token);
+        localStorage.setItem('user', JSON.stringify(response.data.user));
+
+        onLogin(response.data.user);
+      }
+    } catch (err) {
+      setError(err.response?.data?.error || 'Something went wrong');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-card">
+
+        {/* CPM LOGO */}
+        <div className="login-logo-section">
+          <img
+            src="/CPM_LogoPrimary_Black.png"
+            alt="CPM Logo"
+            className="cpm-logo"
+          />
+          <p className="login-subtitle">
+            CPM HR Utility Portal
+          </p>
+        </div>
+
+        <div className="role-selector">
+          <h3>Accounts</h3>
+
+          <button
+            type="button"
+            className={`role-btn ${
+              email === 'hr@company.com' ? 'active' : ''
+            }`}
+            onClick={() => {
+              setEmail('hr@company.com');
+              setPassword('password123');
+              setRole('HR');
+            }}
+          >
+            🗜️ Image & PDF Compression Tool
+          </button>
+
+          <button
+            type="button"
+            className={`role-btn ${
+              email === 'slip@company.com' ? 'active' : ''
+            }`}
+            onClick={() => {
+              setEmail('slip@company.com');
+              setPassword('password123');
+              setRole('SLIP');
+            }}
+          >
+            📋 Contractor Payment Slip Processing
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          {!isLogin && (
+            <>
+              <div className="form-group">
+                <label>Username</label>
+
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div className="form-group">
+                <label>Role</label>
+
+                <select
+                  value={role}
+                  onChange={(e) => setRole(e.target.value)}
+                >
+                  <option value="HR">HR</option>
+                  <option value="SLIP">SLIP</option>
+                </select>
+              </div>
+            </>
+          )}
+
+          <div className="form-group">
+            <label>Email</label>
+
+            <input
+              type="email"
+            //   value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Password</label>
+
+            <input
+              type="password"
+            //   value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          {error && (
+            <div className="error-message">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="submit-btn"
+          >
+            {loading
+              ? 'Loading...'
+              : isLogin
+              ? 'Login'
+              : 'Sign Up'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;