Creating a Front End Admin

[Joss]

I have been concentrating so much on working out the best (for me) way of structuring sites using ProcessWire, creating snippets for myself, understanding how it works together, that I have yet to look at how to create a custom, front end system for adding pages, basic management and so on.

What I am thinking about is creating a simple system, perhaps with a blog, where you can create/edit/publish/unpublish a particular set of articles via the front end in custom forms without having to worry about page structure and so on.

So, this would entail:

• Front end login/logout/account management
• Front end page list with edit/delete/publish buttons
• Front end Create New....
• Er ... maybe a couple of other things.

The thing is, I really don't know where to start!

How do I protect my front end forms/templates so that only a logged in user can see them?

How do I create a management area?

How do I edit an existing page in a front end customised form?

What I need is just some very simple pointers of what I should search for, which elements of the API I should be looking at and so on.

This is just for my own learning, so I don't want to use the form builder - I need to understand this properly for my own education.

Thanks

Joss

[thomas]

Hi Joss,

I found /wire/modules/Process/ProcessPageEdit really helpful. There you'll find all you need to know to use PW inputfields in your own form. Also look at roles and permissions and $users.

Hope this helps.

[Joss]

Thanks Thomas

[onjegolders]

Hi Joss, you'll find loads of that information littered around the forum.

Certainly lots of custom login, page creation API stuff.

The testing if user is logged in is probably the simplest part, you're looking at a relatively simple if/else statement.

For content creation/editing, you're looking at creating HTML forms and you can use the current value as <input value="" /> just be sure to look into sanitizing the form data.

I've already created a create/edit/delete students front-end system and am happy to share if needed.

It's fun doing it and nothing too complex.

[Joss]

Thanks onjegolders!

It was the "littered" that has been giving me a problem.

If I can sort this out, this is probably a better candidate than most for writing up properly!

Joss

[onjegolders]

Yep, I'm starting to think you should be made official archivist and editor and everything has to come through you!

[SiNNuT]

I haven't done much front-end user stuff but the API and flexible role/permission/user system makes this pretty easy. Of course, depending on the exact needs it could get more complex.

So for example you could create a new permission called frontend-edit. Create a role called frontend-editor and give it page-view and frontend-edit permissions. This will keep a user with (only) the role frontend-editor out of the back-end but allows you to log him and check for permissions in templates, allowing stuff you want.

if ($user->hasPermission("frontend-edit")) {
    echo "<a href='{$page->url}edit'>EDIT</a>";
    } else {
    echo "you are not logged in or you do not have permission to edit this page";
}

if ($user->isLoggedin()) {
    echo "here you go, view this awesome page";
    } else {
    echo "plz login if you wish to view this awesome page";

A front-end login could be as simple as creating a page, why not name it login, and putting this into the template file:

<?php

/**
 * Login template
 * Based on a forum contribution by Ryan, can't locate it, but the are many examples of login forms.
 * 
 */

if($user->isLoggedin()) {
	// user is already logged in, so they don't need to be here
	$session->redirect($config->urls->root); 
}

// check for login before outputting markup
if($input->post->user && $input->post->pass) {

	$user = $sanitizer->username($input->post->user);
	$pass = $input->post->pass; 

	if($session->login($user, $pass)) {
		// login successful
		$session->redirect($config->urls->root); 
	}
}

include("./inc/head.inc");

?>

<?php if($input->post->user) echo "<div class='alert alert-error'>Vekeerde combinatie van gebruikersnaam en wachtwoord</div>"; ?>

<form class="" action='./' method='post'>
	<label for="user">Gebruikersnaam</label>
	<input type="text" name="user" id="user" placeholder="Gebruikersnaam...">
	<label for="pass">Wachtwoord</label>
	<input type="password" name="pass" id="pass" placeholder="Wachtwoord...">
	<label></label>
	<button type="submit" name="submit" class="btn btn-primary">Login</button>
</form>

<?php include("./inc/foot.inc"); ?>

These are just some examples but most if not all what you need is already available. It's up to you to code it the way you want. The API cheatsheet gives a nice overview of available building blocks.

For the Create, Update and Delete stuff i think you would need to roll your own forms, populate them via the API and do with it what you want. Of course making sure you properly sanitize the inputs, maybe do some of your own validation etc.

[Joss]

Hey, thanks SiNNut!

That gives ms a big leap in the right direction!

[Tyssen]

I've already created a create/edit/delete students front-end system and am happy to share if needed.

I wouldn't mind taking a look at that if the offer is still on the table.

[OrganizedFellow]

I wouldn't mind taking a look at that if the offer is still on the table.

I second this!

 

[quickjeff]

I haven't done much front-end user stuff but the API and flexible role/permission/user system makes this pretty easy. Of course, depending on the exact needs it could get more complex.

So for example you could create a new permission called frontend-edit. Create a role called frontend-editor and give it page-view and frontend-edit permissions. This will keep a user with (only) the role frontend-editor out of the back-end but allows you to log him and check for permissions in templates, allowing stuff you want.

if ($user->hasPermission("frontend-edit")) {
    echo "<a href='{$page->url}edit'>EDIT</a>";
    } else {
    echo "you are not logged in or you do not have permission to edit this page";
}

if ($user->isLoggedin()) {
    echo "here you go, view this awesome page";
    } else {
    echo "plz login if you wish to view this awesome page";

A front-end login could be as simple as creating a page, why not name it login, and putting this into the template file:

<?php

/**
 * Login template
 * Based on a forum contribution by Ryan, can't locate it, but the are many examples of login forms.
 * 
 */

if($user->isLoggedin()) {
	// user is already logged in, so they don't need to be here
	$session->redirect($config->urls->root); 
}

// check for login before outputting markup
if($input->post->user && $input->post->pass) {

	$user = $sanitizer->username($input->post->user);
	$pass = $input->post->pass; 

	if($session->login($user, $pass)) {
		// login successful
		$session->redirect($config->urls->root); 
	}
}

include("./inc/head.inc");

?>

<?php if($input->post->user) echo "<div class='alert alert-error'>Vekeerde combinatie van gebruikersnaam en wachtwoord</div>"; ?>

<form class="" action='./' method='post'>
	<label for="user">Gebruikersnaam</label>
	<input type="text" name="user" id="user" placeholder="Gebruikersnaam...">
	<label for="pass">Wachtwoord</label>
	<input type="password" name="pass" id="pass" placeholder="Wachtwoord...">
	<label></label>
	<button type="submit" name="submit" class="btn btn-primary">Login</button>
</form>

<?php include("./inc/foot.inc"); ?>

These are just some examples but most if not all what you need is already available. It's up to you to code it the way you want. The API cheatsheet gives a nice overview of available building blocks.

For the Create, Update and Delete stuff i think you would need to roll your own forms, populate them via the API and do with it what you want. Of course making sure you properly sanitize the inputs, maybe do some of your own validation etc.

This solution really helped me but how would I create a logout link that does not show the front end user where my backend admin is located?  Any light on this?  

Thanks for this BIG HELP!!!

[SiNNuT]

Have tried $session->logout() maybe combined with $session->redirect($url)

Make some PHP logic that says "if user is logged out show a login link or if user is logged in show a logout link.

Also: https://www.google.nl/search?hl=nl&q=logout+site%3Aprocesswire.com%2Ftalk will give you alot of info on possible ways to get it just the way you want.

[quickjeff]

My only concern is when a normal user logouts out they are redirected to the logout backend and i don't want a front end editor user knowing where this is. Any way around this? Also any way to also provide a forgot password for a front end editor user?

Thanks.

[Joss]

Logout: https://processwire.com/talk/topic/684-client-logout-page/

Forgot Password: https://processwire.com/talk/topic/5869-forgotten-password-on-the-front-end/

[quickjeff]

Sweet! I will take a look!

[quickjeff]

@joss

I have setup the logout! Works like a charm thank you so much !!!

In regards to the forgot password, I have also set this up. Issue is, the password does get sent to the users email but upon logging in the user can still use their old password tool login. Is this a bug? Or perhaps an issue? I do have the forgot password form on the same template as the login and logout.

Any help would be great!

[quickjeff]

@joss, do you know if there is a way to setup a forgot user form, in case the front end editor forgets his username?

[Joss]

That I don't know, I am afraid - there may well be something in this forum, however.

I am never sure about the security of being able to reset everything, at least not without a lot of hoop jumping.

[quickjeff]

Okay, thanks Joss! I will keep looking. 

[adrian]

Isn't that what Joss linked to above: https://processwire.com/talk/topic/5869-forgotten-password-on-the-front-end/

There is also this solution which I use all the time: https://processwire.com/talk/topic/1716-integrating-a-member-visitor-login-form/?p=15919

Hope that helps.

[quickjeff]

Amazing, thanks Adrian! 

However, I have now added this but after so many incorrect login attempts I get a server error white page!

Any help on this?

[adrian]

Is the page completely blank? It sounds like you have a PHP fatal error which is a code issue, rather than a login attempts issue.

What happens if you remove that code you just added - can you login again, does the error go away?

[quickjeff]

So Im getting 

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Error has been logged. 

After I attempt to login multiple times. 

I have used Ryans method for front end editor login, reset pass and profile.  

I have tested it. When I pretend to forget my password and reset, it works fine.  I log back in, change the password and logout. If I go to attempt to login to the backend.  It gives me a fail attempt. If I then go to login to the front end login form I made with Ryans help, I cannot log in.  I get the 500 error, especially after multiple failed attempts, even though the password is correct.  Its strange lol

[quickjeff]

Here is some weird stuff.  

If I go to the template file I created login.php

And change the highlighted line

$username = $sanitizer->username($input->post->username);

to 

$username = $sanitizer->pageName($input->post->username);

It will work, then when I try to login again, it doesn't work.  SO I change it back, then it works. 

So what could it be?

<?php

if($user->isLoggedin()) $session->redirect('/profile/'); 
if($input->post->username && $input->post->pass) {
  $username = $sanitizer->username($input->post->username); 
  $pass = $input->post->pass; 
  $u = $users->get($username); 
  if($u->id && $u->tmp_pass && $u->tmp_pass === $pass) {
    // user logging in with tmp_pass, so change it to be their real pass
    $u->of(false);
    $u->pass = $u->tmp_pass;
    $u->save();
    $u->of(true);
  }
  $u = $session->login($username, $pass); 
  if($u) {
    // user is logged in, get rid of tmp_pass
    $u->of(false);
    $u->tmp_pass = '';
    $u->save();
    // now redirect to the profile edit page
    $session->redirect('/profile/'); 
  }
}

// present the login form
$headline = $input->post->username ? "Login failed" : "Please login";
$page->body = "
  <h2>$headline</h2>
  <p>Need to update your profile?</p>
  <form action='./' method='post'>
  <p>
  <label style='color:#fff;'>Enter Username <input type='text' name='username'></label>
  <label style='color:#fff;'>Enter Password <input type='password' name='pass'></label>
  </p>
  <input type='submit'>
  </form>
  <p><a href='/reset-pass/'>Forgot your password?</a></p>
";

include("./main.php"); // main markup template
?>

[adrian]

What is your username? If you log $username with both different sanitizer options, is it the same?

Do you have debug set to true? Are there any other php errors? Anything in the PW assets/logs/errors.txt file?