ctrlshiftleft
Version:
AI-powered toolkit for embedding QA and security testing into development workflows
83 lines • 4.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TrackingLogin;
const jsx_runtime_1 = require("react/jsx-runtime");
// src/components/TrackingLogin.tsx
const react_1 = require("react");
function TrackingLogin() {
const [formState, setFormState] = (0, react_1.useState)({
username: '',
password: '',
errors: {},
isSubmitting: false,
isSuccess: false
});
const handleInputChange = (e) => {
const { id, value } = e.target;
setFormState((prev) => ({
...prev,
[id]: value,
errors: {
...prev.errors,
[id]: undefined
}
}));
};
const validateForm = () => {
const errors = {};
let isValid = true;
if (!formState.username.trim()) {
errors.username = 'Username is required';
isValid = false;
}
if (!formState.password) {
errors.password = 'Password is required';
isValid = false;
}
else if (formState.password.length < 6) {
errors.password = 'Password must be at least 6 characters';
isValid = false;
}
setFormState(prev => ({
...prev,
errors
}));
return isValid;
};
const handleSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
setFormState((prev) => ({
...prev,
isSubmitting: true,
errors: {}
}));
// Simulate API call
setTimeout(() => {
if (formState.username === 'testuser' && formState.password === 'password123') {
setFormState((prev) => ({
...prev,
isSubmitting: false,
isSuccess: true
}));
// Simulate redirect
console.log('Login successful, redirecting to dashboard...');
}
else {
setFormState((prev) => ({
...prev,
isSubmitting: false,
errors: {
general: 'Invalid username or password'
}
}));
}
}, 1000);
}
};
if (formState.isSuccess) {
return ((0, jsx_runtime_1.jsx)("div", { className: "login-success", "data-testid": "login-success", children: "Login successful! Redirecting to dashboard..." }));
}
return ((0, jsx_runtime_1.jsx)("div", { className: "login-container", children: (0, jsx_runtime_1.jsxs)("form", { id: "login-form", onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { className: "form-group", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "username", children: "Username" }), (0, jsx_runtime_1.jsx)("input", { type: "text", id: "username", placeholder: "Username", "data-testid": "username-input", value: formState.username, onChange: handleInputChange, className: formState.errors.username ? 'input-error' : '' }), formState.errors.username && ((0, jsx_runtime_1.jsx)("div", { className: "error-message", "data-testid": "username-error", children: formState.errors.username }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "form-group", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "password", children: "Password" }), (0, jsx_runtime_1.jsx)("input", { type: "password", id: "password", placeholder: "Password", "data-testid": "password-input", value: formState.password, onChange: handleInputChange, className: formState.errors.password ? 'input-error' : '' }), formState.errors.password && ((0, jsx_runtime_1.jsx)("div", { className: "error-message", "data-testid": "password-error", children: formState.errors.password }))] }), formState.errors.general && ((0, jsx_runtime_1.jsx)("div", { className: "error-message general-error", "data-testid": "general-error", children: formState.errors.general })), (0, jsx_runtime_1.jsx)("button", { type: "submit", id: "login-button", "data-testid": "login-button", disabled: formState.isSubmitting, children: formState.isSubmitting ? 'Logging in...' : 'Login' })] }) }));
}
//# sourceMappingURL=TrackingLogin.js.map