the hint and saved password overlap on the login page - hint

I am doing web development in Yii framework and PHP. I am writing a login page. On this page, there are two forms. I used the attributeLabels() function to set the labels for these two forms. One is User Name. One is Password. We can call this kind of labels as hints or placeholder text.
After I logged in my system on safari and clicked the button of "saving password", then the system stored my user name and password. The hint and the saved password overlapped when I came to the login page again.
I have no idea how to fix this bug. I searched the Internet but did not find any useful suggestions.
Thank you in advance.
public function attributeLabels()
{
return array(
'userName' => 'Player/User Name',
'password' => 'Password',
);
}

I am not familiar with this particular framework, but it sounds like you mean the placeholder text that displays in the password field, and the saved password dots or stars that appear when your browser inputs the password for you are overlapping.
This will happen when you are using javascript to place and remove the placeholder text, usually done for browser compatibility with the standard placeholder attribute. it is probably being triggered on focus or key press in that field, but since the browser doesn't trigger those events when its placing your password in the field it does not remove the placeholder text.
Changing this to a trigger that repeatedly checks that there is something in the value attribute, or something like that will make sure that it will remove that text when there is a value to the field.

Related

How do you place default message in the semantic react ui search?

https://react.semantic-ui.com/modules/search
Below is images of how the semantic react ui search widget looks like. In the second image, I was wondering how you can put a prompt message to indicate to the user a message on what the search bar is meant for. In this case, it's "search". When the user types in, it erases the Search and starts reflecting what the user is typing. I thought it would be defaultValue, but it seems that you can't have value and defaultValue set at the same time. I still want to be able to read what the set value is when the user types into the box.
Thanks,
Derek
You can use defaultValue as initial value in component, no problem.
Then read the user input value in event (onBlur for instance) like this:
onBlur(e) {
e.preventDefault();
console.log(e.target.name, e.target.value);
}
If you want to read value each new character pressed you can use in onSearchChange event:
onSearchChange(e) {
e.preventDefault();
console.log(e.target.name, e.target.value);
}
EDIT: included accepted answer in comment below:
Worked:
placeholder={"text"}
for Semantic React UI Search

ReactiveCocoa - observing isFirstResponder property and UITextField with clearsOnBeginEditing set to YES

I am new to ReactiveCocoa, but I think it's very nice and outstanding technique for reducing code complexity. I just started experiencing with the framework, and not everything is clear for me at the moment, so excuse me if my problem can be solved in some obvious way.
In my app I have login view controller with simple form contains two text fields (username and password) and a button. I would like the button to be disabled if any of two text fields is empty. So, I wrote this code:
RAC(self.loginButton, enabled) =
[RACSignal combineLatest:#[self.userTextField.rac_textSignal,
self.passwordTextField.rac_textSignal]
reduce:^(NSString *username,
NSString *password) {
BOOL valid = (username.length > 0 && password.length > 0);
return #(valid);
}];
It's very simple and it's working. The problem is that one of my text fields (the password field) has secureTextEntry and clearsOnBeginEditing properties set to YES. I will try to explain unwanted behavior that I am experiencing with this configuration:
Let's assume that both username and password fields are NOT empty. In this case the button is enabled. When user taps on password field, it becomes first responder (keyboard appears and user can enter his password), but because of clearsOnBeginEditing being set to YES for that field, the previously entered password is cleared from the text field. That's way password field is now empty. The problem is that signal is not being sent, so the button remains enabled, despite the password field is empty.
My first idea to solve this issue (well, more like workaround solution) was to observe isFirstResponder property on password field beside observing text changes. That's way the block that checks if button should be enabled would be called when password field becomes first responder. I don't know if this solution works, because I have no idea how to implement it using ReactiveCocoa. I have looking for creating a signal for isFirstResponder property changes, but without a luck. It might be not the best approach in order to solve this issue, but nothing comes to my mind at this point.
Then, the question is: how to observe isFirstResponder property with ReactiveCocoa?
And more general question: how to observe text field's text changes when clearsOnBeginEditing is set to YES?
UPDATE:
I found out that I can create signal for UIControlEventEditingDidBegin event that should give me substitution of observing isFirstResponder property changes:
[self.passwordTextField rac_signalForControlEvents:UIControlEventEditingDidBegin]
Unfortunately this does not solve the issue. Now I understand that field is cleared AFTER it becomes first responder, and clearing field automatically after it becomes first responder does not send signal for text changes. That's way when validation block is executed it still thinks that password field is not empty, and the button remains enabled despite password field was cleared and it's empty.
Unfortunately the -rac_textSignal only listens for UIControlEventEditingChanged. If UIControlEventEditingDidBegin were added, you'd be all set.
I suppose you could patch this into it and submit a pull request?
- (RACSignal *)rac_textSignal {
#weakify(self);
return [[[[[RACSignal
defer:^{
#strongify(self);
return [RACSignal return:self];
}]
concat:[self rac_signalForControlEvents:UIControlEventEditingChanged|UIControlEventEditingDidBegin]]
map:^(UITextField *x) {
return x.text;
}]
takeUntil:self.rac_willDeallocSignal]
setNameWithFormat:#"%# -rac_textSignal", [self rac_description]];
}

How can I validate my Firefox extension's preferences?

What is a generally accepted way to validate preference values in a Firefox extension, specifically when using the prefwindow mechanism in XUL?
I am introducing some new preferences in one of my extensions that I would like to validate before the preferences window is closed. If there's an error, the user should be allowed to correct the issue, and then proceed. I see that the prefwindow element has two potentially useful functions to help in this regard:
onbeforeaccept
ondialogaccept
The former seems to have an associated bug (Bug 474527) that prevents the prefwindow from remaining open when returning false from that function. This is bad in that it doesn't give the user an opportunity to immediately correct their mistake.
The latter appears to have the problem that the preferences get saved prior to exiting, which leaves the preferences in a bad state internally.
In addition, the prefwindow mechanism supports the browser.preferences.instantApply option, in which preference values are written immediately upon updating the associated control. This makes validation extra tricky. Is there a clean way to validate custom preferences in a Firefox extension, allowing the user to correct any potential mistakes?
Normally you would want to validate the preferences when they are changed. That's something that onchange attribute (and the corresponding change event) is good for:
<preference name="preference.name" onchange="validate(this);"/>
The event is fired after the preference value changes. There are two drawbacks:
In case of instantApply the new preference value is already saved, too late to validate and decline.
For text fields the preferences are saved every time a new character is typed. This becomes ugly if you report validation failure while the user is still typing.
You can solve the first issue by intercepting the change events for the actual input fields. For example, for a text field you would do:
<input preference="preference.name"
oninput="if (!validate(this)) event.stopPropagation();"
onchange="if (!validate(this)) { event.stopPropagation(); this.focus(); }"/>
So changes that don't validate correctly don't bubble up to the <prefpane> element and don't get saved. The events to listen to are: input and change for text fields, command for buttons and checkboxes, select for the <colorpicker> element.
The second issue is tricky. You still want to validate the input when it happens, showing the message immediately would be bad UI however. I think that the best solution is to assume for each input field initially that it is still "in progress". You would only set a flag that the value is complete when you first see a blur event on the field. That's when you can show a validation message if necessary (ideally red text showing up in your preference page, not a modal prompt).
So to indicate what the final solution might look like (untested code but I used something like that in the past):
<description id="error" hidden="true">Invalid preference value</description>
<input preference="preference.name"
_errorText="error"
onblur="validate(event);"
oninput="validate(event);"
onchange="validate(event);/>
<script>
function validate(event)
{
// Perform actual validation
var field = event.target;
var valid = isValid(field);
// If this is the blur event then the element is no longer "in progress"
if (event.type == "blur")
{
field._inputDone = true;
if (!valid)
field.focus();
}
// Prevent preferences changing to invalid value
if (!valid)
event.stopPropagation();
// Show or hide error text
var errorText = document.getElementById(field.getAttribute("_errorText"));
errorText.hidden = valid || !field._inputDone;
}
</script>
If you want to validate values as soon as the field is changed so you can handle the instantApply case, you could hook into the change events for the individual fields (e.g. oninput for a textbox). Display an error message and force the focus back to the field if the value is invalid. You can either set it back to a valid value automatically or block the user from closing the dialog until it is fixed.

Watir - text_field - watermarked/pre-populated text concatenation

I am a relatively new user of ruby and have witnessed the following sporadic anomaly with entering text into text fields with pre-populated (or watermarked) text.
I have a login page with Email address and password fields.
The Email address field has some pre-populated text which says 'Enter your email address here'
When the user clicks in the text field, the text disappears ready to accept the actual input.
However, on some runs of my ruby/watir scripts I'm finding that the value I wish to enter (using browser.text_field(:id,'name').set 'mylogin') simply gets concatenated with the pre-populated text (I.e. so I see 'Enter your email address heremylogin') and on other runs it does what I expect and just enters 'mylogin')
So far, I"ve only been trying this on Firefox 9.0/Mac OSX so don't know whether it's a peculiarity of the browser, os, or indeed the site under test. The html of the fields in question look like this:
<input name="ctl00$MainContentPlaceHolder$TextBox_email" type="text" id="ctl00_MainContentPlaceHolder_TextBox_email" style="color:#0B404E;border-color:#A4A4A4;border-width:1px;border-style:Solid;font-family:Arial;font-size:15px;font-weight:bold;width:318px;padding: 4px 10px;" class="watermarked" autocomplete="off">
<input type="hidden" name="ctl00$MainContentPlaceHolder$TextBoxWatermarkExtender_email_ClientState" id="ctl00_MainContentPlaceHolder_TextBoxWatermarkExtender_email_ClientState">
Is there an alternative way of inserting text into this field without triggering this anomaly?
Thanks in advance
D
If it's a "sometimes it does this, sometimes it does that" issue, I'd go with it being a timing problem.
Try running the same code through IRB ( http://wiki.openqa.org/display/WTR/IRB )
e.g. browser.text_field(:id => "emailAddress").set("my.email.address#whatever.com")
If that works, refresh the page and do it again with browser.refresh
If it consistently inputs the correct email address using IRB, it's most probably a timing issue.
Test by adding a small sleep to your script just before putting the email address into the field, e.g.
sleep 10
browser.text_field(:id => "emailAddress").set("my.email.address#whatever.com")
If that works, something's changing on your site between the page loading and between when watir interacts with that field. Find out what, and wait for that to happen.
Potentially with something like browser.wait_until{browser.text_field(:id => "emailAddress").value == "The placeholder text"
There is likely some client side code that clears the field. if you view the HTML you might find it. if I was guessing I'd try 'onfocus'' first
when watir fills in the field a lot of things happen very rapidly and the client side code may not get a chance to clear the prior contents.
what I would do is use irb and the .fire_event method to see if you can fire an event that causes the field to clear e.g.
browser.text_field(:id => "emailAddress").fire_event('onfocus')
if you find one that clears the field, then try putting that line ahead of the line in your script that sets the value
another option would be to try .value= instead of .set

jqGrid. add dialog

I have jqGrid with some columns, I want to add additional fields in Add dialog, that not displaying in grid, but sending in request. How i can make this functional?
You can modify Add dialog inside of beforeShowForm event handler. You can see a working example here. This example I made as an answer to the question "jqGrid: Disable form fields when editing" (see also a close question "How to add a simple text label in a jqGrid form?")
UPDATED: I reread your question and could see that I answered originally on another question as you asked. What you need is just usage of editData parameter which can be for example like
$("#list").jqGrid('navGrid','#pager',{del:false,search:false,refresh:false},
{}, // edit parameters
{ // add parameters
url: '/myAddUrl',
editData: {
someStaticParameter: "Bla Bla",
myDynamicParameter: function() {
return (new Date()).toString();
}
}
}
);
see demo. The demo has nothing on the server side, but you can easy verify with Fiddler or Firebug, that the data sent to the the server contain someStaticParameter and myDynamicParameter parameters.
This one is good. I'm voting this one up.
This solution applies to what I'm looking for. I have a users table with the typical username, password, and etc details. I have an edit and add button as well.
Security-wise, it's not good to send all the users along with their passwords. So in the edit form, an admin can only edit everything except the password.
In the add form, an admin can create a new account with a new password. Since the password field doesn't exist in the grid, it will not show in the add form. By following this example, I'm able to add a custom field without exposing my users passwords. Thanks a lot Oleg

Resources