How to make an external login form

NOTE: This function is available for versions r896 and later

There are 2 ways that an external form can be created.

Simple form that goes back to the default system one

If you want to simply redirect the user to the normal form after submission, you can make a page with a form as simple as this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>External login</title>
</head>
 
<body>
<form action="relative-path-to-your-projectsend-installation/process.php" id="login_form" method="get">
	<input type="hidden" name="do" value="login">
	<input type="hidden" name="external" value="1">
	<label>Username</label>
	<input type="text" name="username">
	<label>Password</label>
	<input type="password" name="password">
	<button type="submit" id="submit">Log in</button>
</form>
</body>
</html>

* Replace the action value on the form tag with the process.php location of your installation

Note that there are 2 hidden fields that must always be present:
– do with a value of “login”
– external with a value of “1”

After submitting the form, the user will be redirected to the corresponding location:

If login was successful:

Dashboard for system users, or file lists for clients.

If credentials are wrong:

The normal log in form on your ProjectSend installation.

Ajax form that shows the response in place

In this case, you would need to add a new hidden field to the form

– ajax with a value of 1

The end result could be something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>External login</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
 
<body>
	<script>
		$(document).ready(function() {
			$("#login_form").submit(function(e) {
				e.preventDefault();
				e.stopImmediatePropagation();
				$('.ajax_response').html();
 
				var url = $(this).attr('action');
				$('.ajax_response').html('');
				$('#submit').html('Logging in...');
				$.ajax({
						cache: false,
						type: "get",
						url: url,
						data: $(this).serialize(), // serializes the form's elements.
						success: function(response)
						{
							var json = jQuery.parseJSON(response);
							if ( json.status == 'success' ) {
								//$('.ajax_response').html(json.message);
								window.location.href = json.location;
							}
							else {
								$('.ajax_response').html(json.message);
								$('#submit').html('Login');
							}
						}
				});
			});
		});
	</script>
	<div class="ajax_response"></div>
 
	<form action="relative-path-to-your-projectsend-installation/process.php" id="login_form" method="get">
		<input type="hidden" name="do" value="login">
		<input type="hidden" name="external" value="1">
		<input type="hidden" name="ajax" value="1">
		<label>Username</label>
		<input type="text" name="username">
		<label>Password</label>
		<input type="password" name="password">
		<button type="submit" id="submit">Log in</button>
	</form>
</body>
</html>

In this case, if the username or password is wrong, you will get a message on your page.
If they are correct and belong to a current user or client, a redirection will take place to the corresponding location.

Top