Jump to content
gebeer

Change label of built in InputfieldPassword

Recommended Posts

Hello,

I'm using the API to populate a form in the frontend with PW 2.5

My code for appending password field

// create password inputs
$field = $modules->get("InputfieldPassword");
$field->label = "Set new Password";
$field->attr("id+name","pass");
$field->required = 1;
$form->append($field);

Whatever string I set $field->label to, I always get "Set Password" as label.

Is it possible at all to change the label on InputfieldPassword?

Share this post


Link to post
Share on other sites

I just created a module that does that just for you :) you can modify it to get what you want.

Create the folder ChangeLabels with 2 files:

ChangeLabels.module

<?php

/**
 * ChangeLabels
 * @author  Luis Santiago "blad"
 * 
 * ProcessWire 2.x 
 * Copyright (C) 2010 by Ryan Cramer 
 * Licensed under GNU/GPL v2, see LICENSE.TXT
 * 
 * http://www.processwire.com
 * http://www.ryancramer.com
 *
 */

class ChangeLabels extends WireData implements Module {

    public static function getModuleInfo() {
        return array(
            'title' => 'ChangeLabels', 
            'version' => 1, 
            'summary' => "ChangeLabels - Tested",
            'author' => 'Blad',
            'autoload' => true
            );
    }

    public function init() {
            $this->addHookBefore('InputfieldPassword::render', $this, 'HookChangeLabel');
        }
        
    public function HookChangeLabel(HookEvent $event) {
                $this->config->scripts->add($this->config->urls->ChangeLabels . 'ChangeLabels.js');    
         }
}

ChangeLabels.js
$(document).ready(function() {

$("li#wrap_Inputfield_pass label").empty();
$("li#wrap_Inputfield_pass label").append("Your label");

  
});

It works.
  • Like 3

Share this post


Link to post
Share on other sites

That was quick blad! I was just about to post the following...

It's actually hard coded into the ___render() routine so you'd need to add a hookafter the render method and change the label text in there.

But your's is another approach again.

  • Like 2

Share this post


Link to post
Share on other sites

But your's is another approach again.

That's good? :)

Share this post


Link to post
Share on other sites

I think either way would work. Your suggestion is change the label client-side, mine was leading towards changing it server side.

  • Like 3

Share this post


Link to post
Share on other sites

My solution does not work if you can not run js. Also it is only visual. The correct solution is yours.

Share this post


Link to post
Share on other sites

Awesome, thank you blad!


Would be better to not require js for the task. So the hook after render is something I will investigate further.

Cheers

Gerhard

  • Like 1

Share this post


Link to post
Share on other sites

... The correct solution is yours.

Well, thanks for the props but that might not be the case.  A better solution to the problem might be found in either removing the hard-coded label set from the ___render() routine or in doing what PW does for its own admin login: use an InputfieldText rather than an InputfieldPassword!

Here it is straight from ProcessLogin.module...

$this->passField = $this->modules->get('InputfieldText');
$this->passField->set('label', $this->_('Password')); // Login form: password field label
$this->passField->attr('id+name', 'login_pass'); 
$this->passField->attr('type', 'password'); 
$this->passField->attr('class', $this->className() . 'Pass'); 

First time I've noticed that the login page isn't using InputfieldPassword.

Any mileage in that approach for you Gerhard?

  • Like 3

Share this post


Link to post
Share on other sites

Gerhard,

Could I tempt you to add this as an issue on github to see what Ryan has to say about having the label hard-coded into the __render() routine? There might be a reason for it - but it does rather limit the inputfield at the moment.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks netcarver!

I'm creating a form where users can change their password. So I need 2 fields to be able to check for typos. That's why I initially wanted to use the built in password field because it provides the validation field out of the box.

But I'm thinking of switching to 2 custom inputs and doing the validation logic myself.

Just thought it would be easier to reuse something that's already there....

Share this post


Link to post
Share on other sites

you posted while I was still writing.

For normal input fields like InputfieldText and InputfieldEmail the label override works just fine. It seems to be only the password field. So it seems not that big of an issue to me and I can live with it. But I will add it as an issue to see what the reason behind hardcoding in the render method is.

  • Like 2

Share this post


Link to post
Share on other sites

A better solution to the problem might be found in either removing the hard-coded label set from the ___render() routine or in doing what PW does for its own admin login: use an InputfieldText rather than an InputfieldPassword!

 I still do not know too much about Processwire  but is logical that a password have a InputfieldPassword  :huh:

Share this post


Link to post
Share on other sites

I just doublechecked. The label is not hardcoded in the __render() method. It says

$this->label = $this->_('Set Password');

Where _('Set Password') is a translatable string.

So if I add a translation for it, I should be able to change it. Only where would I translate it?

  • Like 1

Share this post


Link to post
Share on other sites

@blad

Yeah, it's logical but there are actually two different use-cases and I was getting them mixed up.

I think Gerhard touched on the difference between the two above; the admin login only needs to collect the username and one copy of the password, so it uses InputfieldText with the type set to 'password' to do it. In admin forms (once logged in) if you collect a password to set it or change it, then you usually get two copies (the password and a copy of the password) - just to make sure you typed it the same both times. I think (but didn't realise till now) that InputfieldPassword is for the second scenario; setting or changing a password. Gerhard's trying to reuse this Inputfield in his form but the hard-coded set of the label in InputfieldPassword's ___render() routine is getting in the way.

Anyway, that's my current understanding of the situation.

  • Like 1

Share this post


Link to post
Share on other sites

@Gerhard,

You are right - I used the words "hard coded" incorrectly. I meant that it's set in the render routine. My point still stands though; why have it set in the render routine at all? Couldn't it have a default value (translatable, yes) but otherwise it should use the label that the owning code assigns to it - so that it can be used in many different forms, potentially with a different label in each.

You can probably solve your issue by translating the string - but that doesn't mean the root problem is fixed (I use the term "problem" here lightly, Ryan might have a very good reason for setting the label in the render method!)

Share this post


Link to post
Share on other sites

 I still do not know too much about Processwire  but is logical that a password have a InputfieldPassword  :huh:

It is logical. The PW API supplies method which we can use to render forms through the API. There are predefined input field types that we can use.

@netcarver

You're right. I added an issue on github.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By dragan
      In page-edit view: If I wanted to display the total count of selections, is there an in-built PW method for this?
      e.g. let's say the default view is collapsed for a page reference field. I see the label "Services" but would like to see "Services (3)". I would know that three items are selected without opening the inputfield. And ideally after every change, the number gets updated (without page-reload).
      Did someone once built something similar?
    • By EyeDentify
      Hello Fellow PW Fans and Gurus.

      I have run into a problem where i have created a template without a template file associated with it.
      Now i would like to HAVE a template file associated with it, not an alternate but as the main template file.

      So i thought, that's easy, I upload the template file and change it in template settings but I only get the Alternate template file setting?

      Ok so maybe i can change it via the API , so i wrote some code for this.
      <?PHP function changeTemplate($pages = null, $templates = null) { /* get the pages to change template on */ $logItems = $pages->findMany('template=tmp_log_item'); /* get the template object for our desired template */ $Template = $templates->get('tmp_new_log_item'); foreach($logItems AS $key => $logData) { /* use template object $Template to set template */ $logData->template = $Template; /* save page item */ $logData->save(); } } /* do the magic change */ changeTemplate(); ?> Needless to say, PW was not happy about this, It throw up an error message:
      Error: Exception: Invalid value sent to Page::setTemplate (in /home/virtual/mydomain/public_html/wire/core/Page.php line 1782)
      Now from what i understand i gave $logData->template the wrong type of value.
      So what should the value be to correct this?
      When I read the docs at: https://processwire.com/api/ref/page/
      the value can be "string" or "Template".

      So i gave it a string and it went haywire.

      How should I approach this cause I realy dont want to manually change template file on över 50 plus pages

      Maybe I should use the Template class to create the value that the API wanted, but I am unsure how to use it.

      Thank you for any info you can give me on this.

      If you want more info to help me, ask and I will try my best to give it to you.
      Updated and Solved
      I solved the problem and have updated the code to reflect this.

      Essentialy i used the get() method of $templates to get the template object for my template i wanted to use using the template name.
      I gave the Object to the $logData->template property and all went well.
      We learn something new every day.
      One Note:
      The template file you want to use must have been uploaded and added as a template in the Template section in the Admin for this code to work as expected.
    • By Harmen
      Hi all,
      I am trying to build a form in a module. So when the render() method is called, I build the form and I want to apply a custom markup, which is defined in an array.
      Unfortunately I can't remove some text in my label. Instead of a label I want an icon, but there is always some text next to my icon as you can see below:

      I don't know how, but my icon is placed in the label, and that's not what I want.
      My markup looks like this:
      static protected $markup = array( 'list' => "{out}\n", 'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>", 'item_label' => "<label class=input-group-addon>{out}</label>", 'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>", 'item_content' => "{out}", 'item_error' => "\n<p class='field--error--message'>{out}</p>", 'item_description' => "\n<p class='field__description'>{out}</p>", //.... etc ); and results in this:
      <div class="form-group input-group"> <label class="input-group-addon"> <span> <i class="fa fa-fw fa-envelope" aria-hidden="true"></i> </span> E-Mail </label> <input id="Inputfield_contact_email" name="contact_email" class="form-control InputfieldMaxWidth" type="email" maxlength="512"> </div>  
      and what I want is:
      <div class="form-group input-group "> <span id="contact_form" class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> <input required="" class="form-control" name="name" id="contact_form" type="text" value="" placeholder="Name"> </div> The only problem is that the code above is hard-coded and I don't know how to remove that piece of text next to my icon....
      Thanks in advance,
      ~Harmen
    • By regesh
      I have to languages - english and russian.
      I need russian language to be set as default for admin panel. How to do it? Thanks!
    • By modifiedcontent
      I have a simple front-end password update form like this:
      In the browser the label of the second field shows up as follows:
      WTH?!
      I can't figure out what is changing the label, what is inserting /processwire/ and reformatting the thing. Is this something in PW? A "helpful" thing that browsers do?
      Edit:
      The problem disappears if I simply rename the second field to 'Confirm Password'.
      So my problem is solved, but I'll leave this here in case this is some kind of bug.
×
×
  • Create New...