Spaces:
Running
Running
File size: 4,282 Bytes
4fb0c68 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import React, { useState } from 'react';
import Sidebar from './OCRSidebar';
function Credentials({ onSave }) {
const [credentials, setCredentials] = useState({
sapUrl: '',
clientId: '',
clientSecret: '',
username: '',
password: '',
companyCode: '',
apiKey: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setCredentials({ ...credentials, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
onSave(credentials);
};
return (
<div className="min-h-screen bg-gray-100 flex">
<Sidebar />
<div className="flex-1 p-6">
<div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl mx-auto">
<h2 className="text-xl font-semibold text-gray-700 mb-4">Manage Credentials</h2>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">SAP System URL</label>
<input
type="text"
name="sapUrl"
value={credentials.sapUrl}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Client ID</label>
<input
type="text"
name="clientId"
value={credentials.clientId}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Client Secret</label>
<input
type="text"
name="clientSecret"
value={credentials.clientSecret}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Username</label>
<input
type="text"
name="username"
value={credentials.username}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Password</label>
<input
type="password"
name="password"
value={credentials.password}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Company Code</label>
<input
type="text"
name="companyCode"
value={credentials.companyCode}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">API Key (Optional)</label>
<input
type="text"
name="apiKey"
value={credentials.apiKey}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
<button type="submit" className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-200">
Save Credentials
</button>
</form>
</div>
</div>
</div>
);
}
export default Credentials;
|