REGISTRATION
PAGE CODE
<P>
<h3>Join club
IAS!</h3>
Be a proud IAS member ! ...
Where Excellence is a habit
<br>
<pre>
Select User Name
:<input
id="username"><br>
Select Password
:<input
id="password"><br>
<span id="register"></span><br>
<button id="create">Confirm</button> <a class
="hyperlinks1" href="/articleSix" align="center">Take
me to Login Page</a></h4></td></tr>
</pre>
<script>
var reg_btn= document.getElementById('create');
reg_btn.onclick=function(){
// Create a request object
var request =
new XMLHttpRequest();
// Capture the
response and store it in a variable
request.onreadystatechange = function () {
if (request.readyState
=== XMLHttpRequest.DONE) {
// Take
some action
if
(request.status === 200)
{
document.getElementById('register').innerHTML="Welcome to club IAS,
go to Login page";
}
else {
document.getElementById('register').innerHTML='Oops! Registeration
failed';
}
}
};
// Make the
request
var username =
document.getElementById('username').value;
var password =
document.getElementById('password').value;
console.log(username);
console.log(password);
request.open('POST', '/rg/create-user', true);
request.setRequestHeader('Content-Type',
'application/json');
request.send(JSON.stringify({username: username, password:
password}));
document.getElementById('register').innerHTML='Registering.....';
}
</script>
</p>
LOGIN
PAGE CODE
<p>
Login and post articles, ask questions or answer to reader's
queries.
<pre>
username :
<input
id="username">
password :
<input
id="password"><br>
<span
id="logger"></span><br>
<button id="login_btn">Login</button>
</pre>
<p id="login_area"></p>
<script>
// Submit
username/password to login
var submit =
document.getElementById('login_btn');
submit.onclick =
function () {
// Create a
request object
var request =
new XMLHttpRequest();
// Capture the
response and store it in a variable
request.onreadystatechange = function () {
if
(request.readyState === XMLHttpRequest.DONE) {
// Take
some action
if
(request.status === 200) {
document.getElementById('logger').innerHTML = 'Login Sucess!';
document.getElementById('login_area').innerHTML=LoggedInUser;
} else
if (request.status === 403) {
document.getElementById('logger').innerHTML = 'Invalid credentials. Try again?';
} else
if (request.status === 500) {
document.getElementById('logger').innerHTML = 'Something went wrong ...try after
sometime';
}
// document.getElementById('login_area').innerHTML=LoggedInUser;
}
};
// Make the
request
var username =
document.getElementById('username').value;
var password =
document.getElementById('password').value;
console.log(username);
console.log(password);
request.open('POST', '/lg/login', true);
request.setRequestHeader('Content-Type', 'application/json');
request.send(JSON.stringify({username: username, password:
password}));
document.getElementById('logger').innerHTML = 'Logging in...';
var LoggedInUser=`
<a class="hyperlinks1"
href="/lo/logout"
align="right">Logout</a><br>
<h3> Hi !<i> ${username} </i>
</h3>you are now logged-in to the IAS Forum <br>
Select
topic: <br>
<ol
type="i">
<li><a
class="hyperlinks1" href="/articleOne">Back-end
Developers: Node.js, Express.js, Koa.js,
RESTful APIs, json, Ajax, PHP ,Python and Ruby.</a></li>
<li><a
class="hyperlinks1" href="/articleTwo">Front-end
Developers: javaScript, HTML, css, Bootstrap,
Sass, JQuery, Backbone, Angular.js & React.js.</a></li>
<li><a
class="hyperlinks1" href="/articleThree">Database
Developers: SQL, Data modeling of
RDBMS,Database :Installation, Replication, Backups and
Sharding.</a></li>
</ol>
</pre>
`;
};
</script>
</p>
No comments:
Post a Comment