working ish website

This commit is contained in:
Siwat Sirichai 2024-05-05 18:13:58 +07:00
parent 5540ac6d81
commit b194d2031d
8 changed files with 271 additions and 6 deletions

View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<title>Authentication Check</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
#loginButton {
margin-top: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<h2 style="text-align: center;">SATITM<br/>Parent-Student Relationship<br/>Management</h2>
<p id="subtitle">Please log in to continue</p>
<a href="/selfservice/api/login" style="text-decoration: none;">
<button id="loginButton">Login</button>
</a>
</div>
<script>
$(document).ready(function() {
$.get('/selfservice/api/whoami')
.done(function(response) {
if (response.userType == 1) { //Student
window.location.href = '/selfservice/student.html';
} else if (response.userType == 2) { //Parent
window.location.href = '/selfservice/parent.html';
} else { // Unknown, change login button and change subtitle to "Your account is not allowed to access this service. Please log out."
let loginButton = $('#loginButton');
loginButton.text('Logout').on('click', function() {
window.location.href = '/selfservice/api/logout';
});
// Make button red
loginButton.css('background-color', 'red');
$('#subtitle').text('Your account is not allowed to access this service. Please log out.');
}
})
.fail(function() {
$('#loginButton').show().on('click', function() {
window.location.href = '/selfservice/api/login';
});
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,94 @@
<!-- FILEPATH: /D:/Git/satitm-sso-node/statics/selfservice/student.html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.student-box {
background-color: #f2f2f2;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}
.inner-box {
margin-bottom: 20px;
}
h2 {
font-size: 20px;
margin-bottom: 10px;
}
p {
margin: 5px 0;
}
.linked-parent {
margin-bottom: 20px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
#generate-token-btn {
background-color: #007bff;
margin-right: 10px;
}
#logout-btn {
background-color: #dc3545;
}
</style>
<div class="student-box">
<div class="inner-box">
<h2>Student Information</h2>
<p><span id="student-name">Name:</span> </p>
<p><span id="student-surname">Surname:</span> </p>
<p><span id="student-email">Email:</span> </p>
</div>
<div class="linked-parent">
<h2>Linked Parent</h2>
<p><span id="linked-parent-info"></span></p>
</div>
<button id="generate-token-btn">Generate Parent Link Token</button>
<a href="/selfservice/api/logout" style="text-decoration: none;">
<button id="logout-btn">Logout</button>
</a>
</div>
<script>
// Get student information on page load
// Student information is at /selfservice/api/student/${upn}
// UPN can be obtained from /selfservice/api/whoami
$(document).ready(function() {
$.get('/selfservice/api/whoami')
.done(function(response) {
$.get(`/selfservice/api/student/${response.upn}`)
.done(function(student) {
$('#student-name').text(`Name: ${student.first_name}`);
$('#student-surname').text(`Surname: ${student.last_name}`);
$('#student-email').text(`Email: ${student.username}`);
})
.fail(function() {
alert('Failed to get student information');
});
})
.fail(function() {
alert('Failed to get user information');
});
});
</script>