I am making a login page and a button that opens a small popup window, which is replit auth.
https://akea-chat.osoft.repl.co/
How do I get my code to redirect the page to index.html when the authentication is succesful?
Try this instead of the default script:
<script type="text/javascript">
function LoginWithReplit() {
window.addEventListener("message", authComplete);
const authWindow = window.open("https://repl.it/auth_with_repl_site?domain=" + window.location.host, "_blank", "modal=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=350, height=500, top=" + (screen.height / 2 - 250) + ", left=" + (screen.width / 2 - 175));
function authComplete(e) {
if (e.data !== "auth_complete") {
return;
}
window.removeEventListener("message", authComplete);
authWindow.close();
// this is what you want, in the default script this is `location.reload();`
window.location.href = "<url to redirect to>";
}
}
</script>
2 Likes
Another problem. How do I get it so that the user cannot access https://akea-chat.osoft.repl.co/chat.hml
if the user is not logged in? This is a problem because the user can simply enter Akea Chat to get to the chat without logging in. I need a script or something that keeps the user from accessing any of those without logging in.
Try adding a script like this in chat.html:
<script type="text/javascript">
fetch("https://" + window.location.host + "/__replauthuser")
.then(function(res) { return res ? res.json() : null; })
.then(function(userData) {
if (userData) {
// ...
} else {
window.location.href = "<url to redirect to if not logged in>";
}
});
</script>
2 Likes
What does
Blockquote
//…
Mean?
I’m new to replit auth, so I would like to know specifically what changes I should make.
This is my chat code, please tell me if I’m doing anything wrong with the script you gave me, (it is at the end).
<!DOCTYPE html>
<html>
<head>
<title>Akea Chat</title>
<link rel="icon" type="image/png" href="images_/logo.svg">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Outfit' rel='stylesheet'>
<div id="side-nav">
<a href="about.html">About</a>
<a href="api.html">API</a>
<a href="index.html">Chat</a>
</div>
<style>
#side-nav {
position: fixed;
left: -200px;
width: 200px;
height: 60%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #FFFFFF;
transition: left 0.3s cubic-bezier(0.38, 0, 1, 1);
margin-top: 40px;
}
#side-nav a {
display: block;
padding: 30px;
font-family: 'Poppins', sans-serif;
color: black;
text-decoration: none;
font-size: 12px;
transition: color 0.3s ease-in-out, background-color 0.2s ease-in-out;
transform: 0.8s cubic-bezier(.33,.08,.02,.92);
}
#side-nav a:hover {
background-color: #D6D6D6;
color: #4DCFFF;
border: 1px solid #C4C4C4;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#side-nav.open {
left: 10px;
}
#command-text {
position: static;
right: -150;
margin-top: 30px;
margin-left: -30px;
}
body {
background-color: #28292B;
font-family: 'Poppins', sans-serif;
color: white;
text-align: right;
}
button {
background-color: #02C7F8;
border-radius: 6px;
height: 10.2%;
color: white;
box-shadow: 0 0 30px rgba(0, 152, 255);
border: none;
position: fixed;
font-family: 'Poppins', sans-serif;
bottom: 30px;
display: inline-block;
left: 500px;
}
#command-input {
width: 26%;
color: white;
box-shadow: 0 0 30px #82868E;
background-color: #656970;
height: 10%;
border-radius: 6px;
margin: center;
font-family: 'Poppins', sans-serif;
display: inline-block;
font-size: 15px;
position: fixed;
bottom: 30px;
left: 580px;
border-width: none;
border: none;
text-align: center;
}
form {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: fixed;
bottom: 0;
left: 0;
}
button:hover {
transition: box-shadow 0.6s;
box-shadow: 0 0 30px #FFFFFF;
}
#logo:hover {
transform: rotate(350deg) scale(140%);
cursor: pointer;
}
#logo {
z-index: 1;
}
#logo:active {
transform: rotate(300deg) scale(100%);
}
#command-text {
font-size: 20px;
}
.header {
background-color: #3B3D41;
height: 125px;
border-radius: 10px;
width: 40%;
position: fixed;
top: 560px;
left: 450px;
box-shadow: 0 0 30px #656970;
}
.header2 {
background-color: #3B3D41;
height: 60px;
width: 100%;
position: fixed;
border: whitesmoke;
top: 0px;
left: 0px;
box-shadow: 0 0 10px #7F8FBC;
transition: background-color 0.3s ease-in-out;
}
#command-input::placeholder {
color: #C8C8C8;
}
#logo-text {
z-index: 2;
color: white;
font-family: 'Outfit', sans-serif;
position: absolute;
left: 70px;
top: 19px;
}
</style>
<img id="logo" src="images_/logo.svg" alt="Akea Logo"
style="position: absolute; left: 10px; display: inline-block; position: fixed; width: 50px; height: 50px; transition: transform 0.8s cubic-bezier(.33,.08,.02,.92); margin-top: -26px;"
onclick="toggleNav()"">
</head>
<audio id="note" src="pop.wav"></audio>
<body>
<body class="nav-open">
<div id="command-text">Welcome..</div>
<div id="logo-text">Akea Chat</div>
<div class="header">
<div id="header2" class="header2">
<form autocomplete="off">
<input type="text" id="command-input">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
<script>
function toggleNav() {
document.getElementById("side-nav").classList.toggle("open");
}
const inputElement = document.getElementById("command-input");
inputElement.placeholder = "Enter Text";
inputElement.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
sendFetchRequest();
}
});
const form = document.querySelector("form");
const commandText = document.getElementById("command-text");
form.addEventListener("submit", function(event) {
event.preventDefault();
const commandInput = document.getElementById("command-input");
const encodedCommandInput = encodeURIComponent(commandInput.value);
commandInput.value = "";
fetch("https://akea-core-intelligence.osoft.repl.co/commands_/" + encodedCommandInput + ".txt")
.then(response => {
if (!response.ok) {
throw new Error("Fetch request was not valid");
}
return response.text();
audio.play('pop.wav');
})
.then(responseText => {
const clone = commandText.cloneNode(true);
clone.innerHTML = responseText;
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 50 + "px";
commandText.style.top = top + 50 + "px";
})
.catch(error => {
const clone = commandText.cloneNode(true);
clone.innerHTML = "I did not understand";
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 30 + "px";
commandText.style.top = top + 30 + "px";
});
});
</script>
</body>
<script type="text/javascript">
fetch(window.location.host + "/__replauthuser")
.then(function(res) { return res ? res.json() : null; })
.then(function(userData) {
if (userData) {
// ...
} else {
window.location.href = "index.html";
}
});
</script>
</html>
Is just blank space for you to add whatever you want. Where the // ... is, you could write some code to do something with the userData collected.
If you’re trying to redirect to the main page, I would do this:
window.location.href = "https://" + window.location.host;
You could also add for example + "/some_path/some_file.html" after window.location.host, to redirect to a specific page.
Just looking at your code, you have:
Once the return keyword is called, no code below it will run. return stops the function, so you should move audio.play('pop.wav'); above the return statement.
Also, this function doesn’t seem to exists…
Okay so I will just show my code again, just in case:
<!DOCTYPE html>
<html>
<head>
<title>Akea Chat</title>
<link rel="icon" type="image/png" href="images_/logo.svg">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Outfit' rel='stylesheet'>
<div id="side-nav">
<a href="about.html">About</a>
<a href="api.html">API</a>
<a href="index.html">Chat</a>
</div>
<style>
#side-nav {
position: fixed;
left: -200px;
width: 200px;
height: 60%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #FFFFFF;
transition: left 0.3s cubic-bezier(0.38, 0, 1, 1);
margin-top: 40px;
}
#side-nav a {
display: block;
padding: 30px;
font-family: 'Poppins', sans-serif;
color: black;
text-decoration: none;
font-size: 12px;
transition: color 0.3s ease-in-out, background-color 0.2s ease-in-out;
transform: 0.8s cubic-bezier(.33,.08,.02,.92);
}
#side-nav a:hover {
background-color: #D6D6D6;
color: #4DCFFF;
border: 1px solid #C4C4C4;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#side-nav.open {
left: 10px;
}
#command-text {
position: static;
right: -150;
margin-top: 30px;
margin-left: -30px;
}
body {
background-color: #28292B;
font-family: 'Poppins', sans-serif;
color: white;
text-align: right;
}
button {
background-color: #02C7F8;
border-radius: 6px;
height: 10.2%;
color: white;
box-shadow: 0 0 30px rgba(0, 152, 255);
border: none;
position: fixed;
font-family: 'Poppins', sans-serif;
bottom: 30px;
display: inline-block;
left: 500px;
}
#command-input {
width: 26%;
color: white;
box-shadow: 0 0 30px #82868E;
background-color: #656970;
height: 10%;
border-radius: 6px;
margin: center;
font-family: 'Poppins', sans-serif;
display: inline-block;
font-size: 15px;
position: fixed;
bottom: 30px;
left: 580px;
border-width: none;
border: none;
text-align: center;
}
form {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: fixed;
bottom: 0;
left: 0;
}
button:hover {
transition: box-shadow 0.6s;
box-shadow: 0 0 30px #FFFFFF;
}
#logo:hover {
transform: rotate(350deg) scale(140%);
cursor: pointer;
}
#logo {
z-index: 1;
}
#logo:active {
transform: rotate(300deg) scale(100%);
}
#command-text {
font-size: 20px;
}
.header {
background-color: #3B3D41;
height: 125px;
border-radius: 10px;
width: 40%;
position: fixed;
top: 560px;
left: 450px;
box-shadow: 0 0 30px #656970;
}
.header2 {
background-color: #3B3D41;
height: 60px;
width: 100%;
position: fixed;
border: whitesmoke;
top: 0px;
left: 0px;
box-shadow: 0 0 10px #7F8FBC;
transition: background-color 0.3s ease-in-out;
}
#command-input::placeholder {
color: #C8C8C8;
}
#logo-text {
z-index: 2;
color: white;
font-family: 'Outfit', sans-serif;
position: absolute;
left: 70px;
top: 19px;
}
</style>
<img id="logo" src="images_/logo.svg" alt="Akea Logo"
style="position: absolute; left: 10px; display: inline-block; position: fixed; width: 50px; height: 50px; transition: transform 0.8s cubic-bezier(.33,.08,.02,.92); margin-top: -26px;"
onclick="toggleNav()"">
</head>
<audio id="note" src="pop.wav"></audio>
<body>
<body class="nav-open">
<div id="command-text">Welcome..</div>
<div id="logo-text">Akea Chat</div>
<div class="header">
<div id="header2" class="header2">
<form autocomplete="off">
<input type="text" id="command-input">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
<script>
function toggleNav() {
document.getElementById("side-nav").classList.toggle("open");
}
const inputElement = document.getElementById("command-input");
inputElement.placeholder = "Enter Text";
inputElement.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
sendFetchRequest();
}
});
const form = document.querySelector("form");
const commandText = document.getElementById("command-text");
form.addEventListener("submit", function(event) {
event.preventDefault();
const commandInput = document.getElementById("command-input");
const encodedCommandInput = encodeURIComponent(commandInput.value);
commandInput.value = "";
fetch("https://akea-core-intelligence.osoft.repl.co/commands_/" + encodedCommandInput + ".txt")
.then(response => {
if (!response.ok) {
throw new Error("Fetch request was not valid");
}
audio.play('pop.wav');
return response.text();
})
.then(responseText => {
const clone = commandText.cloneNode(true);
clone.innerHTML = responseText;
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 50 + "px";
commandText.style.top = top + 50 + "px";
})
.catch(error => {
const clone = commandText.cloneNode(true);
clone.innerHTML = "I did not understand";
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 30 + "px";
commandText.style.top = top + 30 + "px";
});
});
</script>
</body>
<script type="text/javascript">
fetch(window.location.host + "/__replauthuser")
.then(function(res) { return res ? res.json() : null; })
.then(function(userData) {
if (userData) {
// ...
} else {
window.location.href = window.location.host;
}
});
</script>
</html>
I used that code, and yet when I tried to go to Akea Chat
It still didn’t stop me, and I was using a browser window that was not signed in to replit.
Also, about the sound, I moved it up but I still heard no sound.
This should work (I didn’t account for errors with the fetch request):
fetch("https://" + window.location.host + "/__replauthuser")
.then(function(res) { return res ? res.json() : null; })
.then(function(userData) {
if (userData) {
// ...
} else {
window.location.href = "https://" + window.location.host;
}
})
.catch(function(err) {
window.location.href = "https://" + window.location.host;
});
So this should be correct?
<!DOCTYPE html>
<html>
<head>
<title>Akea Chat</title>
<link rel="icon" type="image/png" href="images_/logo.svg">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Outfit' rel='stylesheet'>
<div id="side-nav">
<a href="about.html">About</a>
<a href="api.html">API</a>
<a href="index.html">Chat</a>
</div>
<style>
#side-nav {
position: fixed;
left: -200px;
width: 200px;
height: 60%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #FFFFFF;
transition: left 0.3s cubic-bezier(0.38, 0, 1, 1);
margin-top: 40px;
}
#side-nav a {
display: block;
padding: 30px;
font-family: 'Poppins', sans-serif;
color: black;
text-decoration: none;
font-size: 12px;
transition: color 0.3s ease-in-out, background-color 0.2s ease-in-out;
transform: 0.8s cubic-bezier(.33,.08,.02,.92);
}
#side-nav a:hover {
background-color: #D6D6D6;
color: #4DCFFF;
border: 1px solid #C4C4C4;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#side-nav.open {
left: 10px;
}
#command-text {
position: static;
right: -150;
margin-top: 30px;
margin-left: -30px;
}
body {
background-color: #28292B;
font-family: 'Poppins', sans-serif;
color: white;
text-align: right;
}
button {
background-color: #02C7F8;
border-radius: 6px;
height: 10.2%;
color: white;
box-shadow: 0 0 30px rgba(0, 152, 255);
border: none;
position: fixed;
font-family: 'Poppins', sans-serif;
bottom: 30px;
display: inline-block;
left: 500px;
}
#command-input {
width: 26%;
color: white;
box-shadow: 0 0 30px #82868E;
background-color: #656970;
height: 10%;
border-radius: 6px;
margin: center;
font-family: 'Poppins', sans-serif;
display: inline-block;
font-size: 15px;
position: fixed;
bottom: 30px;
left: 580px;
border-width: none;
border: none;
text-align: center;
}
form {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: fixed;
bottom: 0;
left: 0;
}
button:hover {
transition: box-shadow 0.6s;
box-shadow: 0 0 30px #FFFFFF;
}
#logo:hover {
transform: rotate(350deg) scale(140%);
cursor: pointer;
}
#logo {
z-index: 1;
}
#logo:active {
transform: rotate(300deg) scale(100%);
}
#command-text {
font-size: 20px;
}
.header {
background-color: #3B3D41;
height: 125px;
border-radius: 10px;
width: 40%;
position: fixed;
top: 560px;
left: 450px;
box-shadow: 0 0 30px #656970;
}
.header2 {
background-color: #3B3D41;
height: 60px;
width: 100%;
position: fixed;
border: whitesmoke;
top: 0px;
left: 0px;
box-shadow: 0 0 10px #7F8FBC;
transition: background-color 0.3s ease-in-out;
}
#command-input::placeholder {
color: #C8C8C8;
}
#logo-text {
z-index: 2;
color: white;
font-family: 'Outfit', sans-serif;
position: absolute;
left: 70px;
top: 19px;
}
</style>
<img id="logo" src="images_/logo.svg" alt="Akea Logo"
style="position: absolute; left: 10px; display: inline-block; position: fixed; width: 50px; height: 50px; transition: transform 0.8s cubic-bezier(.33,.08,.02,.92); margin-top: -26px;"
onclick="toggleNav()"">
</head>
<audio id="note" src="pop.wav"></audio>
<body>
<body class="nav-open">
<div id="command-text">Welcome..</div>
<div id="logo-text">Akea Chat</div>
<div class="header">
<div id="header2" class="header2">
<form autocomplete="off">
<input type="text" id="command-input">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
<script>
function toggleNav() {
document.getElementById("side-nav").classList.toggle("open");
}
const inputElement = document.getElementById("command-input");
inputElement.placeholder = "Enter Text";
inputElement.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
sendFetchRequest();
}
});
const form = document.querySelector("form");
const commandText = document.getElementById("command-text");
form.addEventListener("submit", function(event) {
event.preventDefault();
const commandInput = document.getElementById("command-input");
const encodedCommandInput = encodeURIComponent(commandInput.value);
commandInput.value = "";
fetch("https://akea-core-intelligence.osoft.repl.co/commands_/" + encodedCommandInput + ".txt")
.then(response => {
if (!response.ok) {
throw new Error("Fetch request was not valid");
}
return response.text();
})
.then(responseText => {
const clone = commandText.cloneNode(true);
clone.innerHTML = responseText;
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 50 + "px";
commandText.style.top = top + 50 + "px";
})
.catch(error => {
const clone = commandText.cloneNode(true);
clone.innerHTML = "I did not understand";
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 30 + "px";
commandText.style.top = top + 30 + "px";
});
});
</script>
</body>
<script type="text/javascript">
fetch(window.location.host + "/__replauthuser")
.then(function(res) { return res ? res.json() : null; })
.then(function(userData) {
if (userData) {
// ...
} else {
window.location.href = "https://" + window.location.host;
}
})
.catch(function(err) {
window.location.href = "https://" + window.location.host;
});
</script>
</html>
It worked, when I tried to access the Chat page, it right after, went back to the login page. But now when I use the login page to login, it takes me to the chat page, then right after goes back to the login page. The login page is index.html and the chat page is chat.html.
LOGIN PAGE:
<!DOCTYPE html>
<title>Login - OSoft</title>
<head>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://replit.com/public/js/repl-auth-v2.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<link rel="icon" href="static/logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=IBM+Plex+Mono' rel='stylesheet'>
<link rel="icon" href="login.png">
<style>
body {
background-color: #2C2B2B;
margin: 0;
overflow: hidden;
}
header {
box-shadow: 0 0px 30px 0 rgba(0, 0, 0, 0.8);
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
}
.header-bg {
background-image: url('images_/background.png');
background-size: cover;
filter: blur(1px);
width: 100%;
height: 100%;
}
header img {
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
}
header h1 {
color: white;
font-family: 'Poppins', sans-serif;
font-size: 48px;
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
}
header h1:hover {
font-size: 58px;
cursor: default;
}
.login {
color: white;
font-family: 'Poppins', medium;
font-size: 30px;
position: absolute;
left: 76%;
top: 10%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
opacity: 1;
}
.login.fade-out {
opacity: 0;
}
.prompt {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
position: absolute;
left: 76%;
top: 20%;
transform: translate(-50%, -50%);
text-align: center;
}
#login-button{
background-color: #007EFF;
color: white;
border-radius: 6px;
text-align: center;
font-family: 'Poppins', sans-serif;
height: 50px;
width: 200px;
scale: 100%;
border: none;
position: absolute;
left: 76%;
top: 58%;
transform: translate(-50%, -50%);
box-shadow: 0 0px 10px 0 rgba(23, 165, 255);
transition: all 0.3s ease-in-out;
}
#login-button:hover{
box-shadow: 0 0px 10px 0 rgba(0, 0, 0);
}
#login-button:active{
box-shadow: 0 0px 10px 0 rgba(23, 165, 255);
height: 40px;
width: 250px;
font-size: 10px;
}
.info{
font-family: 'IBM Plex Mono', sans-serif;
color: white;
position: absolute;
left: 76%;
top: 90%;
transform: translate(-50%, -50%);
font-size: 13px;
text-align: center;
}
</style>
</head>
<body>
<button id='login-button' class="login-button" onclick="LoginWithReplit()"><ion-icon name="lock-open-outline"></ion-icon>Login With Replit</button>
<header>
<div class="header-bg"></div>
<img src="login.png" alt="Logo" height="100" width="100">
<h1>OSoft</h1>
</header>
<div class="login">Login</div>
<div class="info">This site uses Replit Authentication to sign you in to OSoft Services.</div>
<div class="prompt">Log in with Replit to start using Akea Chat today</div>
</body>
<script type="text/javascript">
function LoginWithReplit() {
window.addEventListener("message", authComplete);
const authWindow = window.open("https://repl.it/auth_with_repl_site?domain=" + window.location.host, "_blank", "modal=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=350, height=500, top=" + (screen.height / 2 - 250) + ", left=" + (screen.width / 2 - 175));
function authComplete(e) {
if (e.data !== "auth_complete") {
return;
}
window.removeEventListener("message", authComplete);
authWindow.close();
document.querySelector('.login').innerHTML = 'Success';
window.location.href = "chat.html";
}
}
</script>
CHAT PAGE
<!DOCTYPE html>
<html>
<head>
<title>Akea Chat</title>
<link rel="icon" type="image/png" href="images_/logo.svg">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Outfit' rel='stylesheet'>
<div id="side-nav">
<a href="about.html">About</a>
<a href="api.html">API</a>
<a href="index.html">Chat</a>
</div>
<style>
#side-nav {
position: fixed;
left: -200px;
width: 200px;
height: 60%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #FFFFFF;
transition: left 0.3s cubic-bezier(0.38, 0, 1, 1);
margin-top: 40px;
}
#side-nav a {
display: block;
padding: 30px;
font-family: 'Poppins', sans-serif;
color: black;
text-decoration: none;
font-size: 12px;
transition: color 0.3s ease-in-out, background-color 0.2s ease-in-out;
transform: 0.8s cubic-bezier(.33,.08,.02,.92);
}
#side-nav a:hover {
background-color: #D6D6D6;
color: #4DCFFF;
border: 1px solid #C4C4C4;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#side-nav.open {
left: 10px;
}
#command-text {
position: static;
right: -150;
margin-top: 30px;
margin-left: -30px;
}
body {
background-color: #28292B;
font-family: 'Poppins', sans-serif;
color: white;
text-align: right;
}
button {
background-color: #02C7F8;
border-radius: 6px;
height: 10.2%;
color: white;
box-shadow: 0 0 30px rgba(0, 152, 255);
border: none;
position: fixed;
font-family: 'Poppins', sans-serif;
bottom: 30px;
display: inline-block;
left: 500px;
}
#command-input {
width: 26%;
color: white;
box-shadow: 0 0 30px #82868E;
background-color: #656970;
height: 10%;
border-radius: 6px;
margin: center;
font-family: 'Poppins', sans-serif;
display: inline-block;
font-size: 15px;
position: fixed;
bottom: 30px;
left: 580px;
border-width: none;
border: none;
text-align: center;
}
form {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: fixed;
bottom: 0;
left: 0;
}
button:hover {
transition: box-shadow 0.6s;
box-shadow: 0 0 30px #FFFFFF;
}
#logo:hover {
transform: rotate(350deg) scale(140%);
cursor: pointer;
}
#logo {
z-index: 1;
}
#logo:active {
transform: rotate(300deg) scale(100%);
}
#command-text {
font-size: 20px;
}
.header {
background-color: #3B3D41;
height: 125px;
border-radius: 10px;
width: 40%;
position: fixed;
top: 560px;
left: 450px;
box-shadow: 0 0 30px #656970;
}
.header2 {
background-color: #3B3D41;
height: 60px;
width: 100%;
position: fixed;
border: whitesmoke;
top: 0px;
left: 0px;
box-shadow: 0 0 10px #7F8FBC;
transition: background-color 0.3s ease-in-out;
}
#command-input::placeholder {
color: #C8C8C8;
}
#logo-text {
z-index: 2;
color: white;
font-family: 'Outfit', sans-serif;
position: absolute;
left: 70px;
top: 19px;
}
</style>
<img id="logo" src="images_/logo.svg" alt="Akea Logo"
style="position: absolute; left: 10px; display: inline-block; position: fixed; width: 50px; height: 50px; transition: transform 0.8s cubic-bezier(.33,.08,.02,.92); margin-top: -26px;"
onclick="toggleNav()"">
</head>
<audio id="note" src="pop.wav"></audio>
<body>
<body class="nav-open">
<div id="command-text">Welcome..</div>
<div id="logo-text">Akea Chat</div>
<div class="header">
<div id="header2" class="header2">
<form autocomplete="off">
<input type="text" id="command-input">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
<script>
function toggleNav() {
document.getElementById("side-nav").classList.toggle("open");
}
const inputElement = document.getElementById("command-input");
inputElement.placeholder = "Enter Text";
inputElement.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
sendFetchRequest();
}
});
const form = document.querySelector("form");
const commandText = document.getElementById("command-text");
form.addEventListener("submit", function(event) {
event.preventDefault();
const commandInput = document.getElementById("command-input");
const encodedCommandInput = encodeURIComponent(commandInput.value);
commandInput.value = "";
fetch("https://akea-core-intelligence.osoft.repl.co/commands_/" + encodedCommandInput + ".txt")
.then(response => {
if (!response.ok) {
throw new Error("Fetch request was not valid");
}
return response.text();
})
.then(responseText => {
const clone = commandText.cloneNode(true);
clone.innerHTML = responseText;
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 50 + "px";
commandText.style.top = top + 50 + "px";
})
.catch(error => {
const clone = commandText.cloneNode(true);
clone.innerHTML = "I did not understand";
document.body.appendChild(clone);
const top = parseInt(commandText.style.top) || 0;
clone.style.top = top + 30 + "px";
commandText.style.top = top + 30 + "px";
});
});
</script>
</body>
<script type="text/javascript">
fetch(window.location.host + "/__replauthuser")
.then(function(res) { return res ? res.json() : null; })
.then(function(userData) {
if (userData) {
// ...
} else {
window.location.href = "https://" + window.location.host;
}
})
.catch(function(err) {
window.location.href = "https://" + window.location.host;
});
</script>
</html>
Yep, that’s because I forgot the https://:
fetch("https://" + window.location.host + "/__replauthuser");
1 Like
Nothing helped. I changed it, which DID prevent it from jumping back to the login window, but now I can still access chat.html without even being logged in.
Have a look at my entire project: https://replit.com/@OSoft/Akea-Chat?v=1
That’s because you have a syntax error, a semi-colon (;) at the end of line 230 which shouldn’t be there. Remove it and it should work fine.
Thank you for your time! It works perfectly now.
No problem! Glad I could help 
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.