Skip to content

Commit

Permalink
more index and login changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arushi-maker
Arushi-maker committed Feb 6, 2024
1 parent 83445c2 commit d019e37
Show file tree
Hide file tree
Showing 3 changed files with 272 additions and 110 deletions.
120 changes: 58 additions & 62 deletions _layouts/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,68 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: " en" }}">

<html lang="en">

<head>
<style>
form {
background-color: #d3709b;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
max-width: 400px;
width: 100%;
text-align: center;
margin-top: 20px;
}
</style>
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="your_stylesheet.css">
<title>Login Page</title>
</head>
<body>
<div class="container" style="text-align: center;">
<h1>Nice to see you on Arushi's Blog!</h1>
<input id="usernameInput" type="text" class="input-text" placeholder="Username">
<input id="passwordInput" type="password" class="input-text" placeholder="Password">
<button id="loginButton" class="button" onclick="loginUser()">Login</button>
<button id="registerButton" class="button register-button" onclick="showRegistrationForm()">Register New User</button>


<div id="registrationForm" style="display: none;">
<h2>Register New User</h2>
<input id="newUsernameInput" type="text" class="input-text" placeholder="New Username">
<input id="newPasswordInput" type="password" class="input-text" placeholder="New Password">
<button id="registerNewUserButton" class="button" onclick="registerUser()">Register</button>
</div>
</div>
</head>
<body>
<script>
function showRegistrationForm() {
document.getElementById("registrationForm").style.display = "block";
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}

function registerUser() {
const newUsername = document.getElementById("newUsernameInput").value;
const newPassword = document.getElementById("newPasswordInput").value;

// Make a POST request to register a new user
fetch('http://127.0.0.1:5000/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: newUsername,
password: newPassword,
}),
})
.then(response => response.json())
.then(data => {
console.log('User registration successful:', data);
alert('Registration successful!');
// Optionally, you can show a success message or redirect the user
})
.catch(error => {
console.error('Error registering user:', error);
alert('Registration failed. Please try again.');
// Handle error, show error message, etc.
});
input[type="submit"] {
background-color: #4caf50;
color: #fff;
cursor: pointer;
}
const apiUrl = "http://127.0.0.1:8086/api/users/authenticate";

input[type="submit"]:hover {
background-color: #45a049;
}

.error-message {
color: #ff0000;
margin-top: 10px;
}
</style>
</head>

<body>
{%- include header.html -%}

<main class="page-content" aria-label="Content">
<div class="wrapper">

<form id="authenticate">
<label for="uid">UUID</label>
<input type="text" id="uid" name="uid"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
<script>
const apiUrl = "http://172.19.155.56:8086/api/users/authenticate";

document.getElementById("authenticate").onsubmit = async function (e) {
e.preventDefault();
Expand All @@ -85,7 +81,7 @@ <h2>Register New User</h2>
});

if (!response.ok) {
throw new Error('Authentication was not successful');
throw new Error('Authentication request was not successful');
}

const token = await response.text();
Expand Down Expand Up @@ -114,4 +110,4 @@ <h2>Register New User</h2>
</main>
</body>

</html>
</html>
137 changes: 137 additions & 0 deletions _layouts/loginog.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: " en" }}">

<html lang="en">
<head>
<style>
form {
background-color: #d3709b;
}
</style>
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="your_stylesheet.css">
<title>Login Page</title>
</head>
<body>
<div class="container" style="text-align: center;">
<h1>Nice to see you on Arushi's Blog!</h1>
<input id="usernameInput" type="text" class="input-text" placeholder="Username">
<input id="passwordInput" type="password" class="input-text" placeholder="Password">
<button id="loginButton" class="button" onclick="loginUser()">Login</button>
<button id="registerButton" class="button register-button" onclick="showRegistrationForm()">Register New User</button>


<div id="registrationForm" style="display: none;">
<h2>Register New User</h2>
<input id="newUsernameInput" type="text" class="input-text" placeholder="New Username">
<input id="newPasswordInput" type="password" class="input-text" placeholder="New Password">
<button id="registerNewUserButton" class="button" onclick="registerUser()">Register</button>
</div>
</div>
</head>
<body>
<script>
function showRegistrationForm() {
document.getElementById("registrationForm").style.display = "block";
}

function registerUser() {
const newUsername = document.getElementById("newUsernameInput").value;
const newPassword = document.getElementById("newPasswordInput").value;

// Make a POST request to register a new user
fetch('http://127.0.0.1:8086/api/users/authenticate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: newUsername,
password: newPassword,
}),
})
.then(response => response.json())
.then(data => {
console.log('User registration successful:', data);
alert('Registration successful!');
// Optionally, you can show a success message or redirect the user
})
.catch(error => {
console.error('Error registering user:', error);
alert('Registration failed. Please try again.');
// Handle error, show error message, etc.
});
}
const apiUrl = "http://127.0.0.1:8086/api/users/authenticate";

document.getElementById("authenticate").onsubmit = async function (e) {
e.preventDefault();
const uid = document.getElementById("uid").value;
const password = document.getElementById("password").value;

const obj = { uid: uid, password: password };

try {
const response = await fetch(apiUrl, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(obj)
});
var myHeaders = new Headers();

myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
"uid": "toby",
"password": "123toby"
});

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};

fetch("http://127.0.0.1:8086/api/users/authenticate", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

if (!response.ok) {
throw new Error('Authentication was not successful');
}

const token = await response.text();

if (token) {
// Authentication was successful, you can handle the token as needed
console.log('Authentication successful');
document.cookie = `token=${token}; path=/`;

localStorage.setItem("token", token);
localStorage.setItem("flagData", 1);

window.location.href = "./";
window.location.replace("./");

} else {
// Authentication failed, show an error message or take appropriate action
console.error('Authentication failed');
}
} catch (error) {
console.error('Error:', error);
}
}
</script>
</div>
</main>
</body>

</html>
Loading

0 comments on commit d019e37

Please sign in to comment.