https://codesandbox.io/s/loginusingreducer-fo3bgv?file=/src/App.js
Hi,
I am having 2 issues in this application. First one is when I am trying to show/hide the password using useReducer. When I chick on the show icon ,I can see the password but cannot toggle it.
The second issue is when I click on the login button, I don't see "Logging In" text which is supposed to show if isLoading is true and I already have set that condition. Please let me know what I am doing wrong.
Thanks!
I have tried this on code sandbox. Here is the link to it
https://codesandbox.io/s/loginusingreducer-fo3bgv?file=/src/App.js
Related
I have a modal with several different possible views (login, signup, password reset, etc).
I am navigating the different views for the modal through a piece of state in redux.
The links work fine outside of my Cypress tests, but in my tests, some of them work and some of them make the modal completely disappear.
For example, when I tell Cypress to click the Sign up link it properly switches, but when I tell it to click Forgot Password the modal just disappears.
I've logged the redux state values and it is in the correct state value to show the modal and the state is NOT being updated to a hidden status.
If I manually click the Forgot password link in the test runner it properly navigates to the the forgot password form.
They are both wrapped in a tags as such:
<a
onClick={() =>
dispatch(setAuthModalView(AuthModalViewTypes.FORGOT_PASSWORD))
}
className="text-sm"
data-testid="forgotPassword">
Forgot Password?
</a>
Here are my cypress tests:
Password Reset:
cy.visit('/')
cy.contains('Sign In').click()
cy.contains('Forgot Password').click()
cy.findByTestId('auth-modal')
Sign up
cy.visit('/')
cy.contains('Sign In').click()
cy.contains('Sign Up').click()
cy.findByTestId('auth-modal')
Just to reiterate, the modal correctly navigates to the page when I manually click the link, and redux has the proper state to show the modal, but it's just dissapearing.
I've tried placing cy.wait commands in betweeen the commands to make sure it's not a timing issue, but it was no help.
Any help is appreciated
I developed a page with only one button.
If a valid user appears i will allow that user to click that button
manually or user can also press enter(i will click that button using
js in background).
If a invalid user appears i will display a freeze layer on top of
that button, so that user cannot click that button.
Problem is if invalid user appears and press enter. my js code will click that button.
So, my question is straight forward is there any option in js to find whether user can click that button
I can also make alternate flow but i need to know answer for above question.
if(<user_is_not_valid_(your own condition)>){
document.getElementById("id_of_button").disabled = true;
}
This is for making a button unable to click. You should solve how to determine if the user is allowed to click. Put your own condition instead of < user_is_not_valid_(your own condition) >.
The user is valid or not is based on API request fire onpage load $.get in success you make the if (user.type==true){ $('#btn').addattr('onclick',funcname);}else{ ('#btn').attr('readonly',true);}
I've got a date-picker component in an app and used the example for a menu to open it.
I now want to make it more efficient to use for desktop users, so I removed the readonly flag to make manual input possible.
Now desktop users can simply tab through the different fields of the form to quickly input dates and times. The problem here was that the date-picker would not show up when a user tabs into a field, which was easily fixed with adding #focus="menuVariable=true" to the text-field.
But the problem now is that the date-picker won't show up anymore when a user first clicks into the text-field, at least not consistently, which I haven't been able to fix. I already tried to listen for click events and setting the menu's toggle to true then, but I guess the problem is setting that variable in the first place. Not sure how to work around this or how to open that menu manually any other way.
Here is a codepen showing off the problem. Click around a bit between the two fields, the date-picker on the right always opens, the one on the left only occasionally.
Does anyone know a better solution to consistently show the date-picker when a user either clicks into the text-field (or any other part of the v-menu) or tabs into the text-field?
#keyup="menuVariable=true"
#keydown="menuVariable=false"
I worked with this.
there is a nice solution here:
https://codepen.io/Phennim/pen/KKPYGRK
v-on:focus="onFocus"
v-on:blur="onBlur"
Hope it helps you
Im creating a Bootstrap wizard for users to go through. For the life of me I cant get the "Next" button on the last tab to work. It has a disabled tooltip picture over it.
What I have tried:
I searched in the Stack and found a suggestion to remove the "disabled" class from the "next" button but the class isn't there in the first place.
I checked to see if there is a validation rule but none exist on the last tab.
Solution:
I hid the Next button on the last tab and unhid a Finish button. This way Bootstrap was not able to disable the button. Not ideal solution but the only one I could think of since there was nothing in the documentation or forums.
A client sent me a form template they had created using https://jotform.com to implement on their WordPress site. The form template is supposed to hide part of the form until the user clicks the next button. At which point a script is supposed to validate all of the input fields the user has presumably filled out and then display the rest of the form. While I have successfully managed to get the form to display the next part of the form when the user clicks next, it fails to validate the input fields.
It's kind of difficult to explain without a huge block of text so it is probably easier to show you:
The original working template that the customer sent me:
http://www.loftist.com/jotform/List_Your_Loft.html
The problem child:
http://www.loftist.com/?page_id=78
If you just click on one of the input fields and then click elsewhere on the page, the input fields successfully return a validation error message and prevent the user from clicking on the next button. However, if you simply click on the next button than the next set of fields get displayed.
Any thoughts? What am I doing wrong here? Im convinced this must be a really simple problem but Im not sure what it could be.
I don't understand the problem. Your first link, the original template, works for me with all the validations in place. The problem child on the second link is not a jotform form, and it doesn't have any paging stuff.
Do you mean jotform on your first web page is not working correctly? What does this have to do with the second form on your second link?