Jump to content
gebeer

Mask page edit URL to custom profile edit page

Recommended Posts

Hello,

I have a user page template with many fields that are organised in tabs. Tabs do not work on the profile edit screen. So I had to find a way how to let users edit their page with tabs in place.

The way I solved this is having users edit their user page in the backend instead of their profile page. So basically they are on a page edit screen and not on their profile edit screen which is a different process. The drawback of this method is that the users edit their profile on a URL like .../youradminurl/access/users/edit/?id=1377. So I needed to make sure that users cannot edit other users' profiles by just switching out the id. I did this through hooks that redirect them to their own profile.
This is far from a perfect solution. Ideally I would like to mask the page edit url to something like /myprofile but haven't found a way on how to do this, yet.

How would you go about this?

  1. redirect rules in .htaccess
  2. hooking into the profile edit process?

Either way I couldn't figure out how to accomplish it. Any pointers towards a solution would be very much appreciated.

Share this post


Link to post
Share on other sites

I haven't needed to do anything like this before, but I think it might be better to use a separate template for all these extra profile fields. When a user is added you use a hook to automatically create a profile page for the user. Or potentially vice-versa. The user page and the profile page would be connected via a Page Reference field.

When it comes to editing the profile pages you may want to let users change their password or email address. This could be done by providing a (modal?) link to ProcessProfile within the Page Edit interface (using Runtime Markup or similar) or you could add password and email address fields to the profile template and then update the equivalent fields in the user page in a saveReady hook.

Share this post


Link to post
Share on other sites

Thank you @Robin S for looking into this.

My question was: how can I make a user edit screen under a URL like  '/adminurl/access/users/edit/?id=1377' available under a URL like '/adminurl/myprofile/'. So that all user edit URLs with different user ids are routed to that 'myprofile' URL and the users that edit their user pages (which are their profiles in my case) never sees the actual user id and cannot try to mess with it.
Thus I chose the term 'mask' in the thread title. Maybe the way I explained it was confusing or not clear.

16 hours ago, Robin S said:

I haven't needed to do anything like this before, but I think it might be better to use a separate template for all these extra profile fields. When a user is added you use a hook to automatically create a profile page for the user. Or potentially vice-versa. The user page and the profile page would be connected via a Page Reference field.

I am not  using the default user template but my own user template. User pages live under their own parent (https://processwire.com/blog/posts/processwire-core-updates-2.5.14/#multiple-templates-or-parents-for-users)

Users can edit their pages via the page edit process. This is working fine. I just need to change (mask) the URL for that process.

The 2 ways that I can think of for approaching this:

  1. make the user edit process available under a custom process module which resolves to '/adminurl/myprofile/'
  2. have some htaccess rewrite magic in place

I'd prefer number 1, as I cannot easily adjust the htaccess rules so that they only kick in for the custom user type and not for all ''/adminurl/access/users/edit/?id=1377' type of URLs.

Hope this clears things up a bit 🙄

 

Share this post


Link to post
Share on other sites

I think you could just create a new page under /youradmin that has the admin template and the process "ProcessUser" assigned. Then you can hook into executeEdit to always set the userid to the currently logged in user:

$wire->addHookBefore('ProcessUser::executeEdit', function($event) {
  $this->wire->input->get->id = $this->wire->user->id;
});

I'm once more impressed by the flexibility of PW 😮 

ldjhiVg.png

My user has id 41 of course, and not 123456789.

  • Like 1

Share this post


Link to post
Share on other sites

Great idea, thank you @bernhard

I tried your solution, added a new child page under Admin with name 'my-profile' and assigned the ProcessUser process.

When I go to that URL,

  1. I get a list of users. When I click on one of the users' name,
  2. I get to an URL like .../my-profile/edit/?id=1020 and am on the user edit screen.

I need to avoid the first step and go right to the second while still having only '.../my-profile' in the address bar, without the edit/?id=xxx.

But your hook is a great way of securing my current setup!

Another thing I tried some time ago:
In my custom user dashboard which is a process module, I have a method

	public function ___executeMyprofile() {
	 
	    $processUser = $this->modules->get('ProcessUser');
	    return $processUser->executeEdit();

	}

But this never worked because there are some wired in redirects in place, that always redirect to the .../access/users/edit/?id=xxx URL. At that time I even opened a thread on this topic which was never resolved.

Share this post


Link to post
Share on other sites

The easiest solution would be a redirect to the edit screen:

$wire->addHookBefore('ProcessUser::execute', function($event) {
  $this->wire->session->redirect('./edit');
});

You'd still have the /edit in your url, but is that a problem? At least you don't need any additional clicks...

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 Robin S
      A new module that hasn't had a lot of testing yet. Please do your own testing before deploying on any production website.
      Custom Paths
      Allows any page to have a custom path/URL.
      Screenshot

      Usage
      The module creates a field named custom_path on install. Add the custom_path field to the template of any page you want to set a custom path for. Whatever path is entered into this field determines the path and URL of the page ($page->path and $page->url). Page numbers and URL segments are supported if these are enabled for the template, and previous custom paths are managed by PagePathHistory if that module is installed.
      The custom_path field appears on the Settings tab in Page Edit by default but there is an option in the module configuration to disable this if you want to position the field among the other template fields.
      If the custom_path field is populated for a page it should be a path that is relative to the site root and that starts with a forward slash. The module prevents the same custom path being set for more than one page.
      The custom_path value takes precedence over any ProcessWire path. You can even override the Home page by setting a custom path of "/" for a page.
      It is highly recommended to set access controls on the custom_path field so that only privileged roles can edit it: superuser-only is recommended.
      It is up to the user to set and maintain suitable custom paths for any pages where the module is in use. Make sure your custom paths are compatible with ProcessWire's $config and .htaccess settings, and if you are basing the custom path on the names of parent pages you will probably want to have a strategy for updating custom paths if parent pages are renamed or moved.
      Example hooks to Pages::saveReady
      You might want to use a Pages::saveReady hook to automatically set the custom path for some pages. Below are a couple of examples.
      1. In this example the start of the custom path is fixed but the end of the path will update dynamically according to the name of the page:
      $pages->addHookAfter('saveReady', function(HookEvent $event) { $page = $event->arguments(0); if($page->template == 'my_template') { $page->custom_path = "/some-custom/path-segments/$page->name/"; } }); 2. The Custom Paths module adds a new Page::realPath method/property that can be used to get the "real" ProcessWire path to a page that might have a custom path set. In this example the custom path for news items is derived from the real ProcessWire path but a parent named "news-items" is removed:
      $pages->addHookAfter('saveReady', function(HookEvent $event) { $page = $event->arguments(0); if($page->template == 'news_item') { $page->custom_path = str_replace('/news-items/', '/', $page->realPath); } }); Caveats
      The custom paths will be used automatically for links created in CKEditor fields, but if you have the "link abstraction" option enabled for CKEditor fields (Details > Markup/HTML (Content Type) > HTML Options) then you will see notices from MarkupQA warning you that it is unable to resolve the links.
      Installation
      Install the Custom Paths module.
      Uninstallation
      The custom_path field is not automatically deleted when the module is uninstalled. You can delete it manually if the field is no longer needed.
       
      https://github.com/Toutouwai/CustomPaths
      https://modules.processwire.com/modules/custom-paths/
    • By sambadave
      Hi everyone, here's the problem I'm trying to solve.
      I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:
      ADMIN SETUP
      Home Config Aesthetics Colours Red Field: Custom Label - "Red" Field: Class name - "theme--red' Green Field: Custom Label - "Green" Field: Class name - "theme--green' Blue Field: Custom Label - "Blue" Field: Class name - "theme--blue' etc... Sizes Small Field: Custom Label - "Small" Field: Class name - "sm' Medium Field: Custom Label - "Medium" Field: Class name - "md Large Field: Custom Label - "Medium" Field: Class name - "lg" etc... Icons Target Field: Custom Label - "Hands shaking Icon" Field: Icon SVG - "[svg code]' Target Field: Custom Label - "Target icon" Field: Icon SVG - "[svg code]' Success Field: Custom Label - "Happy face icon" Field: Icon SVG - "[svg code]' etc... HOW I USE THIS
      I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.
      This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.
      THE PROBLEM
      I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.
      Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:
      Navy Blue Deep Blue Bright Blue Sea Blue ... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.
      Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:
      Hands shaking icon Target icon Happy face icon Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.
      ANY SOLUTIONS?
      I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.
      Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?
      Thank you in advance for anyone who's read this far and has any words of wisdom!
      Dave
       
    • By Thomas Diroll
      Hi guys I'm relatively new to PW and just finished developing a page for a client. I was able to include all necessary functionality using the core fieldtypes but now I it seems that I need to extend them with a custom one. What I need is a simple button, that copies the absolute url (frontend not PW-backend) of the page which is currently edited to the clipboard. As this feature is only needed inside a specific template, I tend to use a custom fieldtype which provides this feature. I've been looking inside the core modules code (eg. FieldtypeCheckbox.module) but I don't really get the structure of it and how its rendered to the admin page. I also didn't find a lot of tutorials covering custom fieldtypes.
      Maybe some of you could give me some tips on how to write a basic custom fieldtype that renders a button which copies the value of
      page->httpUrl() to the clipboard using JS. Thanks!
    • By matsn0w
      Hey all,
      I am working on a website and I want to style the login page, but I'm a bit confused. 
      I want either the existing login page styled in my own way using some CSS (I guess I prefer that) or I want to create a custom page with a form to login. (Which I could style too).
      I used the code from Ryan and Renobird posted here - which works great - but that doesn't replace the original login page. 
      Is there a way to some sort of 'disable' the original login?
      I hope my question is clear and thanks in advance,
      matsn0w
    • By theoretic
      Hi there! And thanks for Processwire!
      Maybe i'm not very attentive but couldn't find any tutorial on creating custom fieldtype with custom inputfield. Would like to make one for selecting color(s) from predefined list of colors. The closest existing match is FieldtypeSelectOptions with InputfieldSelect but i need something different. There's a very good post from @Soma   which is, however, insufficient to begin building my own fieldtype or at least to attach the existing inputfield to an existing field.
      Will appreciate any help. Thanks in advance!
×
×
  • Create New...