-
Notifications
You must be signed in to change notification settings - Fork 44
feat(auth): improve UX, validation & edge-case handling for forgot/reset password #85
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| node_modules/ |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React, { useState } from 'react' | ||
|
|
||
| const DatasetUpload: React.FC = () => { | ||
| const [file, setFile] = useState<File | null>(null) | ||
| const [isUploading, setIsUploading] = useState(false) | ||
| const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null) | ||
|
|
||
| const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| if (e.target.files && e.target.files[0]) { | ||
| setFile(e.target.files[0]) | ||
| setStatus(null) | ||
| } | ||
| } | ||
|
|
||
| const handleSubmit = async () => { | ||
| if (!file) return | ||
|
|
||
| if (isUploading) return | ||
|
|
||
| setIsUploading(true) | ||
| setStatus(null) | ||
|
|
||
| const formData = new FormData() | ||
| formData.append('file', file) | ||
|
|
||
| try { | ||
| const response = await fetch('/api/v1/training-datasets/upload', { | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The API endpoint |
||
| method: 'POST', | ||
| body: formData, | ||
| }) | ||
|
|
||
| if (response.ok) { | ||
| setStatus({ type: 'success', message: 'Dataset uploaded successfully!' }) | ||
| setFile(null) | ||
| } else { | ||
| setStatus({ type: 'error', message: 'Failed to upload dataset. Please try again.' }) | ||
|
Comment on lines
+32
to
+36
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The error messages for failed uploads are quite generic ('Failed to upload dataset. Please try again.' and 'Network error. Please check your connection.'). While these are good defaults, it would significantly improve the user experience and debugging if more specific error messages from the backend could be parsed and displayed. For example, if the backend returns a JSON object with an Consider checking |
||
| } | ||
| } catch (error) { | ||
| setStatus({ type: 'error', message: 'Network error. Please check your connection.' }) | ||
| } finally { | ||
| setIsUploading(false) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div className="p-6 bg-gray-900 rounded-lg border border-gray-800 text-white max-w-lg mx-auto mt-10"> | ||
| <h2 className="text-xl font-semibold mb-4">Upload Training Data</h2> | ||
|
|
||
| <div className="flex flex-col gap-4"> | ||
| <input | ||
| type="file" | ||
| onChange={handleFileChange} | ||
| disabled={isUploading} | ||
| className="block w-full text-sm text-gray-400 | ||
| file:mr-4 file:py-2 file:px-4 | ||
| file:rounded-full file:border-0 | ||
| file:text-sm file:font-semibold | ||
| file:bg-indigo-600 file:text-white | ||
| hover:file:bg-indigo-700 | ||
| disabled:opacity-50 disabled:cursor-not-allowed" | ||
|
Comment on lines
+50
to
+60
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is no client-side validation for the file type. While backend validation is crucial for security, adding client-side validation (e.g., checking |
||
| /> | ||
|
|
||
| {status && ( | ||
| <div | ||
| className={`p-3 rounded text-sm ${ | ||
| status.type === 'success' | ||
| ? 'bg-green-900/50 text-green-300' | ||
| : 'bg-red-900/50 text-red-300' | ||
| }`} | ||
| > | ||
| {status.message} | ||
| </div> | ||
| )} | ||
|
|
||
| <button | ||
| onClick={handleSubmit} | ||
| disabled={!file || isUploading} | ||
| className={`px-4 py-2 rounded font-medium transition-colors | ||
| ${ | ||
| !file || isUploading | ||
| ? 'bg-gray-700 text-gray-400 cursor-not-allowed' | ||
| : 'bg-indigo-600 text-white hover:bg-indigo-700' | ||
| } | ||
| `} | ||
| > | ||
| {isUploading ? 'Uploading...' : 'Submit Dataset'} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default DatasetUpload | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Clearing the
statusimmediately when a new file is selected (setStatus(null)) might remove important feedback from a previous upload attempt (e.g., a 'failed' message) before the user has fully processed it. It might be better to clear the status only when a new upload process is initiated (e.g., at the beginning ofhandleSubmit) or provide a clear 'dismiss' option for the status message.