feat: add password visibility toggle (eye icon) for all password fields #6399
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,7 +17,7 @@ export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, onBlu | |
| const selectionRangeRef = useRef({ start: null, end: null }) | ||
|
|
||
| const openPopOver = Boolean(anchorEl) | ||
| const hasPasswordToggle = inputParam?.type === 'password' || inputParam?.type === 'url' | ||
|
|
||
| const handleClosePopOver = () => { | ||
| setAnchorEl(null) | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,6 +15,8 @@ import { | |
| DialogActions, | ||
| DialogContent, | ||
| DialogTitle, | ||
| IconButton, | ||
| InputAdornment, | ||
| LinearProgress, | ||
| OutlinedInput, | ||
| Skeleton, | ||
|
|
@@ -32,7 +34,7 @@ import SettingsSection from '@/ui-component/form/settings' | |
| import PricingDialog from '@/ui-component/subscription/PricingDialog' | ||
|
|
||
| // Icons | ||
| import { IconAlertCircle, IconCreditCard, IconEye, IconEyeOff, IconExternalLink, IconSparkles, IconX } from '@tabler/icons-react' | ||
|
|
||
| // API | ||
| import accountApi from '@/api/account.api' | ||
|
|
@@ -72,6 +74,9 @@ const AccountSettings = () => { | |
| const [oldPassword, setOldPassword] = useState('') | ||
| const [newPassword, setNewPassword] = useState('') | ||
| const [confirmPassword, setConfirmPassword] = useState('') | ||
| const [showOldPassword, setShowOldPassword] = useState(false) | ||
| const [showNewPassword, setShowNewPassword] = useState(false) | ||
| const [showConfirmPassword, setShowConfirmPassword] = useState(false) | ||
| const [usage, setUsage] = useState(null) | ||
| const [isBillingLoading, setIsBillingLoading] = useState(false) | ||
| const [seatsQuantity, setSeatsQuantity] = useState(0) | ||
|
|
@@ -809,12 +814,24 @@ const AccountSettings = () => { | |
| <Typography variant='body1'>Old Password</Typography> | ||
| <OutlinedInput | ||
| id='oldPassword' | ||
| type={showOldPassword ? 'text' : 'password'} | ||
| fullWidth | ||
| placeholder='Old Password' | ||
| name='oldPassword' | ||
| onChange={(e) => setOldPassword(e.target.value)} | ||
| value={oldPassword} | ||
| endAdornment={ | ||
| <InputAdornment position='end'> | ||
| <IconButton | ||
| edge='end' | ||
| onClick={() => setShowOldPassword(!showOldPassword)} | ||
| onMouseDown={(e) => e.preventDefault()} | ||
| aria-label={showOldPassword ? 'Hide password' : 'Show password'} | ||
| > | ||
| {showOldPassword ? <IconEyeOff size={18} /> : <IconEye size={18} />} | ||
| </IconButton> | ||
| </InputAdornment> | ||
| } | ||
| /> | ||
| </Box> | ||
| <Box | ||
|
|
@@ -828,12 +845,24 @@ const AccountSettings = () => { | |
| <Typography variant='body1'>New Password</Typography> | ||
| <OutlinedInput | ||
| id='newPassword' | ||
| type={showNewPassword ? 'text' : 'password'} | ||
| fullWidth | ||
| placeholder='New Password' | ||
| name='newPassword' | ||
| onChange={(e) => setNewPassword(e.target.value)} | ||
| value={newPassword} | ||
| endAdornment={ | ||
| <InputAdornment position='end'> | ||
| <IconButton | ||
| edge='end' | ||
| onClick={() => setShowNewPassword(!showNewPassword)} | ||
| onMouseDown={(e) => e.preventDefault()} | ||
| aria-label={showNewPassword ? 'Hide password' : 'Show password'} | ||
| > | ||
| {showNewPassword ? <IconEyeOff size={18} /> : <IconEye size={18} />} | ||
| </IconButton> | ||
| </InputAdornment> | ||
| } | ||
| /> | ||
| <Typography variant='caption'> | ||
| <i> | ||
|
|
@@ -853,12 +882,24 @@ const AccountSettings = () => { | |
| <Typography variant='body1'>Confirm New Password</Typography> | ||
| <OutlinedInput | ||
| id='confirmPassword' | ||
| type={showConfirmPassword ? 'text' : 'password'} | ||
| fullWidth | ||
| placeholder='Confirm New Password' | ||
| name='confirmPassword' | ||
| onChange={(e) => setConfirmPassword(e.target.value)} | ||
| value={confirmPassword} | ||
| endAdornment={ | ||
| <InputAdornment position='end'> | ||
| <IconButton | ||
| edge='end' | ||
| onClick={() => setShowConfirmPassword(!showConfirmPassword)} | ||
| onMouseDown={(e) => e.preventDefault()} | ||
| aria-label={showConfirmPassword ? 'Hide password' : 'Show password'} | ||
| > | ||
| {showConfirmPassword ? <IconEyeOff size={18} /> : <IconEye size={18} />} | ||
| </IconButton> | ||
| </InputAdornment> | ||
| } | ||
| /> | ||
| </Box> | ||
| </Box> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -59,14 +59,17 @@ const Agentflows = () => { | |
| setCurrentPage(page) | ||
| setPageLimit(pageLimit) | ||
| localStorage.setItem('agentFlowPageSize', pageLimit) | ||
| refresh(page, pageLimit, agentflowVersion, search) | ||
| } | ||
|
|
||
| const refresh = (page, limit, nextView, searchTerm) => { | ||
| const params = { | ||
| page: page || currentPage, | ||
| limit: limit || pageLimit | ||
| } | ||
| if (searchTerm) { | ||
| params.search = searchTerm | ||
| } | ||
| getAllAgentflows.request(nextView === 'v2' ? 'AGENTFLOW' : 'MULTIAGENT', params) | ||
| } | ||
|
|
||
|
|
@@ -84,16 +87,25 @@ const Agentflows = () => { | |
| } | ||
|
|
||
| const onSearchChange = (event) => { | ||
| const searchValue = event.target.value | ||
| setSearch(searchValue) | ||
| // Reset to page 1 when search changes | ||
| setCurrentPage(1) | ||
| // Debounce API call | ||
| if (window.searchTimeout) clearTimeout(window.searchTimeout) | ||
| window.searchTimeout = setTimeout(() => { | ||
|
Comment on lines
+95
to
+96
Contributor
There was a problem hiding this comment. Attaching a timeout ID to the |
||
| refresh(1, pageLimit, agentflowVersion, searchValue) | ||
| }, 300) | ||
| } | ||
|
|
||
| // Remove client-side filter function - now using server-side search | ||
| // function filterFlows(data) { | ||
| // return ( | ||
| // data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 || | ||
| // (data.category && data.category.toLowerCase().indexOf(search.toLowerCase()) > -1) || | ||
| // data.id.toLowerCase().indexOf(search.toLowerCase()) > -1 | ||
| // ) | ||
| // } | ||
|
Comment on lines
+101
to
+108
Contributor
There was a problem hiding this comment. Dead code should be removed rather than commented out to maintain a clean and readable codebase. Since the client-side filtering has been replaced by server-side search, this function is no longer needed and can be safely deleted. |
||
|
|
||
| const addNew = () => { | ||
| if (agentflowVersion === 'v2') { | ||
|
|
@@ -346,7 +358,7 @@ const Agentflows = () => { | |
| <> | ||
| {!view || view === 'card' ? ( | ||
| <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}> | ||
| {getAllAgentflows.data?.data.map((data, index) => ( | ||
| <ItemCard | ||
| key={index} | ||
| onClick={() => goToCanvas(data)} | ||
|
|
@@ -366,7 +378,6 @@ const Agentflows = () => { | |
| icons={icons} | ||
| scheduleStatuses={scheduleStatuses} | ||
| isLoading={isLoading} | ||
| updateFlowsApi={getAllAgentflows} | ||
| setError={setError} | ||
| currentPage={currentPage} | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
In JavaScript,
String.prototype.replace()with a string pattern only replaces the first occurrence. If the prompt template contains multiple instances of the{history}or{session_history}placeholders, only the first one will be substituted. It is recommended to use.replaceAll()to ensure all instances are correctly replaced.References