pwFoo

@hollyvalero FrontendUser should be stable with older PW modules. I think some users here use it with prod websites too. It should work with PW 3, but there seems to be a problem with a password inputfield change ("Not yet validInvalidToo shortToo commonWeakOkGoodExcellent"). Additional css / js is needed to fix it. After seaching the blog I think this update causes the issue with the https://processwire.com/blog/posts/upgrades-optimizations-pw-3.0.22/#major-enhancements-to-our-password-field If I'm right the module should work fine / stable with PW <3.0.22 / <2.8.22. Newer version needs a workaround like @jmartsch mentioned earlier.

If I follow the link there are no issues...?! Second welcome email? -> just hook into the process and send one. Use PW API / hooks Add a role -> write a PW hook. Default role? See documentation example... -> https://bitbucket.org/pwFoo/frontenduser/wiki/Register extensions and plugins Custom fields...? See example https://bitbucket.org/pwFoo/frontenduser/wiki/Code snippets / Examples Style a form api field? -> Search forum and PW documentation about PW native form api and inputfields. Get form object: $fu->form. Overwrite the register form? Ok, just do it... https://bitbucket.org/pwFoo/frontenduser/src/0070dc3106945198ac438bab3ab742b1784080e9/FrontendUser/FrontendUser.module?at=master&fileviewer=file-view-default#FrontendUser.module-78 See first function param $fields validation email template (default): https://bitbucket.org/pwFoo/frontenduser/src/0070dc3106945198ac438bab3ab742b1784080e9/FrontendUser/templates/validationEmail.php?at=master&fileviewer=file-view-default $file = wire('fu')->getFile('validationEmail.php', 'templates'); getFile() function... https://bitbucket.org/pwFoo/frontenduser/src/0070dc3106945198ac438bab3ab742b1784080e9/FrontendUser/FrontendUser.module?at=master&fileviewer=file-view-default#FrontendUser.module-199 /** * Load custom or default styles / scripts * @param string $file Filename to load * @param string $type File type styles or scripts */ public function getFile($file, $fileType, $type = 'paths') { $custom = $this . '/' . $file; if (file_exists($this->config->paths->templates . $custom)) { $file = $this->config->$type->templates . $custom; } else { $file = "{$this->config->$type->$this}{$fileType}/$file"; } return $file; } Have I pointed to the module documentation before... ?! https://bitbucket.org/pwFoo/frontenduser/wiki/Documentation#markdown-header-styles-scripts-templates Maybe, I haven't tested it. It seems there was a change inside the password inputfield which needs additional css / js to work... The FrontendUser module is just based on form api, inputfields, hooks. PW native features. So if you know PW you know how to extend the module. Since I'm currently busy in my job, I'm missing the time to rework the module, but it should be flexible enough for most of the needed extensions / plugins. If there is a bug or problem a pull request is welcome

Interesting module. Maybe a replacement for my module in the (near) future

Hi @jasonS, it looks like the module isn't compatible to the used / latest PW version. I think password inputfield changed? Can't remember that problem with PW 2.7 and PW Dev 3.x..? Anyone tested it with different / older PW versions? Sorry, I haven't a test / dev environment at the moment and can't spend much time to change / debug it.

FormHelper is loaded here: protected function buildForm($fields) { $this->form = $this->modules->get('FormHelper')->create(); https://bitbucket.org/pwFoo/frontenduser/src/0070dc3106945198ac438bab3ab742b1784080e9/FrontendUser/FrontendUser.module?at=master&fileviewer=file-view-default#FrontendUser.module-176 FormHelper create() https://bitbucket.org/pwFoo/formhelper/src/d85395b2dd7352a0af7aadeeec5125ba3d9d0bb0/FormHelper/FormHelper.module?at=master&fileviewer=file-view-default#FormHelper.module-61 The create() method need additional parameters which need to be passed from template -> FrontendUser -> FormHelper, but it isn't implemented in the FrontendUser module... Or just load / create the needed styles. Here is the function is used by FormHelper /** * Use admin / custom form styles * @param boolean|string $style true or an css file to load */ protected function pwAdminStyles($style) { $this->config->styles->add($this->config->urls->adminTemplates . 'styles/font-awesome/css/font-awesome.min.css'); if ($style === true) { $style = $this->config->urls->AdminThemeDefault . 'styles/main-classic.css'; } $this->config->styles->add($style); } https://bitbucket.org/pwFoo/formhelper/src/d85395b2dd7352a0af7aadeeec5125ba3d9d0bb0/FormHelper/FormHelper.module?at=master&fileviewer=file-view-default#FormHelper.module-192

The forms are unstyled. Backend styles are needed. FormHelper Extra can load the styles, but I think that wasn't added to FrontendUser as feature / option. https://bitbucket.org/pwFoo/formhelper/wiki/Documentation#markdown-header-formhelperextra

If you work with docker environment you can share the volume with the IDE and work with the dev data without upload changes. codiad is open source and so it's free. cloud9 and codetasty have free accounts too. I'm impressed by comparision between a full desktop app like netbeans, atom, ... with a web app. Compare performance and features.

I moved from netbeans to atom. Tested lighttable, brackets and visual studio code, but at the moment I take a look into web based IDEs. Most are based on ACE editor (alternative could be codemirror) like chrome apps caret or super neutron drive (both with chrome dependency at the moment). Recently I looked into cloud9, codetasty, ... and codiad. Codiad is open source. php / js based and works fine. Autocomplete feature and suggestions should be improved, but it's ok. Because it's open source you can download it from github repo or test it as a docker container (wernight/codiad image for example). Codytasty is a cloud hosted solution with a really awesome autocomplete / suggestions for php, js and html! But it isn't open source (there is a free to use hosted version with limited workspaces and features). At the moment I testing codiad@docker, but use still atom for coding and searching for the best IDE out there *g* What do you think about IDEs and the new trend to web based IDEs?

That's the InputfieldWrapper / Form, but the input element / label is hardcoded. https://github.com/processwire/processwire-requests/issues/66

That's why I play with a simple self created flex based grid / framework at the moment. Just for fun, but maybe I'll use it in the future flex grid (auto row wrap) nice buttons (based on button or a elements) checkboxes / radios with font awesome icons or css styled boxes and a slide toggle checkbox optional responsive table (html table change display mode (theader values in pseudo element ::before prefix the cell value) responsive dropdown / dropline responsive menu (styled checkbox toggle for mobile) I compare it with pure, but try to keep it more flexible and smaller. Helper classes aren't included, but I could add some in a optional file. So it's modular and small.

Order of input and label should be changed because of css seletor based on checkbox state (checked / unchecked) like this. input[type=checkbox]:checked + label:before {} I used this markup to get font awesome and css styled checkboxes work. <div class=field> <input class=input> <label class=inputfieldheader>Field three</label> </div> It would be awesome if modules like inputfields and form api would be written for frontend usage, but it's optimized for admin backend use only.

It's possible to replace the inputfield render() method by a hook to change the hardcoded html markup as needed. With my custom small css framework I was able to build css based and font awesome styled checkboxes / radios. Is it possible to set additional classes to form api elements others than the input field itself like container / li or the label element? $field->attr('class', 'class1 class2') is added to the input field (only).

It's dependent on php session. If you loose the session the registration state is lost too.

How to modify / replace the form field markup? <div> <input id="box1" type="checkbox" /> <label for="box1" data-fa-checked="<FA-UNICODE>" data-fa-unchecked="<FA-UNICODE>">Checkbox 1</label> </div> The markup above is used for css styled and font awesome checkbox / radio form input elements.

I don't use it in prod. Just tests

Found a docker-compose to test it with docker / caddy + hhvm https://github.com/ubergarm/caddy-hhvm Looks good and feels fast.

Found a docker-compose to test it with docker / caddy https://github.com/ubergarm/caddy-hhvm Looks good and feels fast.

I would also need simpelt markup like that above. <div> <input id="box1" type="checkbox" /> <label for="box1" data-fa-checked="&#xf046;" data-fa-unchecked="&#xf096;">Checkbox 1</label> </div> The data attributes are used to set the FA unicode. Demo font awesome checkboxes. http://codepen.io/anon/pen/bBxQBJ

I try to get around bloated frameworks. Pocketgrid is great. At the moment I looking for a lightweight flexbox grid solutions... Maybe something like: /* flexbox container */ .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } /* flexbox item */ .cell { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; box-sizing: border-box; border: solid 1px silver; } /* fixed width, item will not grow / shrink to fill the row */ .fixed { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-preferred-size: auto; flex-basis: auto } Code above is quickly tested with Chrome, Firefox, Edge and IE. Offset (margin), fixed width (class fixed above) and column width (simply css width) seems to work fine. Forced line break before / after a cell doesn't work, but shouldn't be a problem. So pocketgrid or a simple flexgrid (unflex, custom) or maybe css table layout (ungrid) wil be fine, but I have to find a lightweight framework with stylings / themes for elements like forms, buttons, ...

forked from ungrid and changed to work with flexbox: https://github.com/Eroica/unflex

Because I'll back at PW / PHP in the near future... Any idea how to improve this module?

Because I'll back at PW / PHP in the near future... Any idea how to improve this module?

I like pocketgrid, too. No need for bloated css frameworks with endless features. Searched for alternatives (based on flexbox), but haven't really used one... http://leejordan.github.io/reflex/docs/index.html http://progressivered.com/fla/?d=0&v=1&h=1&s=0&i=000&a=000#features And a simple one (table based css grid). https://github.com/chrisnager/ungrid/

You need to read the FrontendUser documentation examples I think Take a look here: https://bitbucket.org/pwFoo/frontenduser/wiki/Code snippets / Examples <?php $myField = $modules->get('InputfieldText'); $myField->label = $this->_('MyLabel'); $myField->attr('id+name', 'MyField'); //$myField->required = 1; $myField->fhSanitizer = 'text'; // Call hook after field is processed by PW form api $myField->addHookAfter('processInput', function($event) { $field = $event->object; // Value will be sanitized as text with "$sanitizer->text()" $mySanitizedCustomInput = wire('fu')->form->fhValue($field->name); // Do ... // Example: Add value to user during registration wire('fu')->userObj->myField = $mySanitizedCustomInput; // Need to set an field error? // $field->error('Custom field has an error...'); }); // Define the field before you call FU and add it as additional field... $fu->register(array('username', 'email', 'password', $myField)); To extend the FrontendUser module it's needed to know how to use form api and hooks. FrontendUser is just based on PW basic features.

Added the hint to use the hook before "save" to get the changes saved to the user.