| | 1 | 1 | | import React, { useState } from 'react'; |
| | 1 | 2 | | import './LoginPage.css'; |
| | 1 | 3 | | |
| | 1 | 4 | | const LoginPage = ({ onLogin }) => { |
| | 24 | 5 | | const [username, setUsername] = useState(''); |
| | 24 | 6 | | const [password, setPassword] = useState(''); |
| | 24 | 7 | | const [error, setError] = useState(''); |
| | 24 | 8 | | const [loading, setLoading] = useState(false); |
| | 24 | 9 | | |
| | 24 | 10 | | const handleSubmit = async (e) => { |
| | 3 | 11 | | e.preventDefault(); |
| | 3 | 12 | | setError(''); |
| | 3 | 13 | | setLoading(true); |
| | 3 | 14 | | |
| | 3 | 15 | | try { |
| | 3 | 16 | | // Backend'deki yeni API'mize istek atıyoruz |
| | 3 | 17 | | // Not: Basitlik için GET kullanıyoruz, gerçekte POST olmalı |
| | 3 | 18 | | const response = await fetch(`http://localhost:8080/api/login?u=${username}&p=${password}`); |
| | 2 | 19 | | const data = await response.json(); |
| | 2 | 20 | | |
| | 3 | 21 | | if (data.success) { |
| | 1 | 22 | | // Giriş başarılı! Token ve kullanıcı bilgisini locale kaydediyoruz |
| | 1 | 23 | | localStorage.setItem('auth_token', data.token); |
| | 1 | 24 | | localStorage.setItem('user_role', data.role); |
| | 1 | 25 | | localStorage.setItem('username', data.username); |
| | 1 | 26 | | |
| | 1 | 27 | | onLogin(data); // App.js'e giriş yapıldığını haber ver |
| | 1 | 28 | | } else { |
| | 1 | 29 | | setError('Hatalı kullanıcı adı veya şifre'); |
| | 1 | 30 | | } |
| | 3 | 31 | | } catch (err) { |
| | 1 | 32 | | setError('Sunucuya bağlanılamadı. Backend çalışıyor mu?'); |
| | 3 | 33 | | } finally { |
| | 3 | 34 | | setLoading(false); |
| | 3 | 35 | | } |
| | 3 | 36 | | }; |
| | 24 | 37 | | |
| | 24 | 38 | | return ( |
| | 24 | 39 | | <div className="login-container"> |
| | 24 | 40 | | <div className="login-card"> |
| | 24 | 41 | | <h1>Smart HMS</h1> |
| | 24 | 42 | | <p>Industrial Intelligence Gateway</p> |
| | 24 | 43 | | |
| | 24 | 44 | | <form onSubmit={handleSubmit}> |
| | 24 | 45 | | <div className="input-group"> |
| | 24 | 46 | | <label>Kullanıcı Adı</label> |
| | 24 | 47 | | <input |
| | 24 | 48 | | type="text" |
| | 24 | 49 | | value={username} |
| | 24 | 50 | | onChange={(e) => setUsername(e.target.value)} |
| | 24 | 51 | | placeholder="admin" |
| | 24 | 52 | | required |
| | 24 | 53 | | /> |
| | 24 | 54 | | </div> |
| | 24 | 55 | | |
| | 24 | 56 | | <div className="input-group"> |
| | 24 | 57 | | <label>Şifre</label> |
| | 24 | 58 | | <input |
| | 24 | 59 | | type="password" |
| | 24 | 60 | | value={password} |
| | 24 | 61 | | onChange={(e) => setPassword(e.target.value)} |
| | 24 | 62 | | placeholder="••••••••" |
| | 24 | 63 | | required |
| | 24 | 64 | | /> |
| | 24 | 65 | | </div> |
| | 24 | 66 | | |
| | 24 | 67 | | <button type="submit" className="login-button" disabled={loading}> |
| | 24 | 68 | | {loading ? 'SİSTEME GİRİLİYOR...' : 'SİSTEME GİRİŞ YAP'} |
| | 24 | 69 | | </button> |
| | 24 | 70 | | |
| | 24 | 71 | | {error && <div className="error-message">{error}</div>} |
| | 24 | 72 | | </form> |
| | 24 | 73 | | </div> |
| | 24 | 74 | | </div> |
| | 24 | 75 | | ); |
| | 24 | 76 | | }; |
| | 1 | 77 | | |
| | 1 | 78 | | export default LoginPage; |