Added support for making an account
This commit is contained in:
MathMan05
parent
f6d33a7aa8
commit
7d6977d3d5
10 changed files with 192 additions and 110 deletions
10
index.js
10
index.js
|
|
@ -9,6 +9,12 @@ app.get('/', (req, res) => {
|
|||
app.get('/login.html', (req, res) => {
|
||||
res.sendFile("./webpage/login.html", {root: __dirname})
|
||||
})
|
||||
app.get('/register.html', (req, res) => {
|
||||
res.sendFile("./webpage/register.html", {root: __dirname})
|
||||
})
|
||||
app.get('/register.js', (req, res) => {
|
||||
res.sendFile("./webpage/register.js", {root: __dirname})
|
||||
})
|
||||
app.get('/dirrect.js', (req, res) => {
|
||||
res.sendFile("./webpage/dirrect.js", {root: __dirname})
|
||||
})
|
||||
|
|
@ -51,8 +57,8 @@ app.get('/fullscreen.js', (req, res) => {
|
|||
app.get('/style.css', (req, res) => {
|
||||
res.sendFile("./webpage/style.css", {root: __dirname})
|
||||
})
|
||||
app.get('/light.css', (req, res) => {
|
||||
res.sendFile("./webpage/light.css", {root: __dirname})
|
||||
app.get('/themes.css', (req, res) => {
|
||||
res.sendFile("./webpage/themes.css", {root: __dirname})
|
||||
})
|
||||
app.get('/manifest.json', (req, res) => {
|
||||
res.sendFile("./webpage/manifest.json", {root: __dirname})
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ class channel{
|
|||
div.appendChild(caps)
|
||||
caps.classList.add("capsflex")
|
||||
decdiv.classList.add("channeleffects");
|
||||
decdiv.classList.add("Channel");
|
||||
decdiv.classList.add("channel");
|
||||
|
||||
lacechannel(decdiv);
|
||||
decdiv.all=this;
|
||||
|
|
@ -127,7 +127,7 @@ class channel{
|
|||
}
|
||||
div.appendChild(childrendiv);
|
||||
}else{
|
||||
div.classList.add("Channel");
|
||||
div.classList.add("channel");
|
||||
if(this.hasunreads){
|
||||
div.classList.add("cunread");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/light.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ class localuser{
|
|||
|
||||
const div=document.createElement("div");
|
||||
div.innerText="⌂";
|
||||
div.classList.add("Home","servericon")
|
||||
div.classList.add("home","servericon")
|
||||
div.all=this.guildids["@me"];
|
||||
serverlist.appendChild(div)
|
||||
div.onclick=function(){
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<body>
|
||||
<head>
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
</head>
|
||||
<div id="logindiv">
|
||||
<h1>Login</h1><br>
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
<p class="wrongred" id="wrong"></p>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<a href="/register.html">Don't have an account?</a>
|
||||
</div>
|
||||
<script src="/login.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,37 +3,46 @@ function getCookie(name) {
|
|||
}
|
||||
function setTheme(){
|
||||
const name=localStorage.getItem("theme");
|
||||
if(!name){
|
||||
document.body.className="Dark-theme";
|
||||
localStorage.setItem("theme","Dark");
|
||||
}
|
||||
document.body.className=name+"-theme";
|
||||
}
|
||||
setTheme();
|
||||
{
|
||||
const instancein=document.getElementById("instancein");
|
||||
let timeout=0;
|
||||
async function check(e){
|
||||
try{
|
||||
verify.innerText="Checking Instance"
|
||||
instanceinfo=await setInstance(instancein.value)
|
||||
localStorage.setItem("instanceinfo",JSON.stringify(instanceinfo));
|
||||
verify.innerText="Instance is all good"
|
||||
setTimeout(_=>{
|
||||
console.log(verify.innerText)
|
||||
verify.innerText="";
|
||||
},3000);
|
||||
|
||||
}catch(e){
|
||||
console.log("catch")
|
||||
verify.innerText="Invalid Instance, try again"
|
||||
}
|
||||
}
|
||||
if(instancein){
|
||||
console.log(instancein)
|
||||
instancein.addEventListener("keydown",e=>{
|
||||
const verify=document.getElementById("verify");
|
||||
verify.innerText="Waiting to check Instance"
|
||||
clearTimeout(timeout);
|
||||
timeout=setTimeout(async e=>{
|
||||
try{
|
||||
verify.innerText="Checking Instance"
|
||||
instanceinfo=await setInstance(instancein.value)
|
||||
localStorage.setItem("instanceinfo",JSON.stringify(instanceinfo));
|
||||
verify.innerText="Instance is all good"
|
||||
setTimeout(_=>{
|
||||
console.log(verify.innerText)
|
||||
verify.innerText="";
|
||||
},3000);
|
||||
|
||||
}catch(e){
|
||||
console.log("catch")
|
||||
verify.innerText="Invalid Instance, try again"
|
||||
}
|
||||
},1000);
|
||||
timeout=setTimeout(check,1000);
|
||||
});
|
||||
}
|
||||
if(localStorage.getItem("instanceinfo")){
|
||||
instancein.value=localStorage.getItem("instanceinfo").wellKnown
|
||||
}else{
|
||||
check("https://spacebar.chat/");
|
||||
}
|
||||
}
|
||||
async function login(username, password){
|
||||
const options={
|
||||
|
|
|
|||
34
webpage/register.html
Normal file
34
webpage/register.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<body>
|
||||
<head>
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
</head>
|
||||
<div id="logindiv">
|
||||
<h1>Create an account</h1><br>
|
||||
<form id="register" submit="registertry(e)">
|
||||
<label for="instance"><b>Instance:</b></label><br>
|
||||
<p id="verify"></p>
|
||||
<input type="text" placeholder="Instance URL" name="instance" value="https://spacebar.chat/" id="instancein" required><br><br>
|
||||
|
||||
<label for="uname"><b>Email:</b></label><br>
|
||||
<input type="text" placeholder="Enter Email" name="email" required><br><br>
|
||||
|
||||
<label for="uname"><b>Username:</b></label><br>
|
||||
<input type="text" placeholder="Enter Username" name="uname" required><br><br>
|
||||
|
||||
<label for="psw"><b>Password:</b></label><br>
|
||||
<input type="password" placeholder="Enter Password" name="psw" required><br><br>
|
||||
|
||||
<label for="psw2"><b>Enter password again:</b></label><br>
|
||||
<input type="password" placeholder="Enter Password Again" name="psw2" required><br><br>
|
||||
|
||||
<label for="date"><b>Date of birth:</b></label><br>
|
||||
<input type="date" id="start" name="trip-start" name="date"/><br><br><br><br>
|
||||
<p class="wrongred" id="wrong"></p>
|
||||
<button type="submit">Create account</button>
|
||||
</form>
|
||||
<a href="/login.html">Already have an account?</a>
|
||||
</div>
|
||||
<script src="/login.js"></script>
|
||||
<script src="/register.js"></script>
|
||||
</body>
|
||||
42
webpage/register.js
Normal file
42
webpage/register.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
if(document.getElementById("register")){
|
||||
document.getElementById("register").addEventListener("submit", registertry);
|
||||
}
|
||||
async function registertry(e){
|
||||
|
||||
e.preventDefault();
|
||||
const elements=e.srcElement;
|
||||
const email=elements[1].value;
|
||||
const username=elements[2].value;
|
||||
if(elements[3].value!==elements[4].value){
|
||||
document.getElementById("wrong").innerText="Passwords don't match";
|
||||
}
|
||||
const password=elements[3].value;
|
||||
const dateofbirth=elements[5].value;
|
||||
const apiurl=new URL(JSON.parse(localStorage.getItem("instanceinfo")).api)
|
||||
|
||||
fetch(apiurl+"/auth/register",{
|
||||
body:JSON.stringify({
|
||||
date_of_birth:dateofbirth,
|
||||
email:email,
|
||||
username:username,
|
||||
password:password,
|
||||
consent:true,
|
||||
}),
|
||||
headers:{
|
||||
"content-type": "application/json"
|
||||
},
|
||||
method:"POST"
|
||||
}).then(e=>{
|
||||
e.json().then(e=>{
|
||||
if(!e.token){
|
||||
console.log(e);
|
||||
document.getElementById("wrong").innerText=e.errors[Object.keys(e.errors)[0]]._errors[0].message;
|
||||
}else{
|
||||
localStorage.setItem("token",e.token);
|
||||
window.location.href = '/channels/@me';
|
||||
}
|
||||
})
|
||||
})
|
||||
//document.getElementById("wrong").innerText=h;
|
||||
// console.log(h);
|
||||
}
|
||||
|
|
@ -1,66 +1,10 @@
|
|||
:root {
|
||||
--servertd-height: 0px;
|
||||
/* Default value */
|
||||
}
|
||||
|
||||
.Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
|
||||
color-scheme: dark;
|
||||
|
||||
--primary-text: #FFF;
|
||||
--primary-bg: #282832;
|
||||
--black: #000;
|
||||
|
||||
--message-bg-hover: #1e1e28;
|
||||
--typing-bg: #161616;
|
||||
--profile-bg: #2e2d33;
|
||||
--timestamp-color: #a2a2a2;
|
||||
--code-bg: #101014;
|
||||
--info-bg: #1a1a1e;
|
||||
--user-info-bg: #323039;
|
||||
--user-dock-bg: #1a1a23;
|
||||
--channels-bg: #32323c;
|
||||
--channel-hover: #1c1b25;
|
||||
--blank-bg: #1b1b1b;
|
||||
--light-border: #929292;
|
||||
--settings-hover: #0e0d10;
|
||||
--quote-bg: #7a798e;
|
||||
--button-bg: #1b1b28;
|
||||
--textarea-bg: #26272c;
|
||||
--filename: #47bbff;
|
||||
--mention-bg: #F00;
|
||||
--pronouns: #797979;
|
||||
|
||||
--server-border: #1b1b24;
|
||||
--server-hover: #252530;
|
||||
|
||||
--reply-border: #474b76;
|
||||
--reply-bg: #0b0d20;
|
||||
--reply-text: #acacac;
|
||||
|
||||
--spoiler-hover: #111111;
|
||||
--spoiler-open-bg: #1e1e1e;
|
||||
|
||||
--unknown-file-bg: #141316;
|
||||
--unknown-file-border: #474555;
|
||||
|
||||
--login-border: #131315;
|
||||
--loading-bg: #22232c;
|
||||
|
||||
--dialog-bg: #33363d;
|
||||
--dialog-border: #1c1b31;
|
||||
|
||||
--scrollbar-track: #34313c;
|
||||
--scrollbar-thumb: #201f29;
|
||||
--scrollbar-thumb-hover: #16161f;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
background-color: var(--primary-bg);
|
||||
color: var(--primary-text);
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -117,7 +61,7 @@ samp {
|
|||
}
|
||||
|
||||
.contextbutton {
|
||||
transition: background 0.1s ease-in-out;
|
||||
transition: background .1s ease-in-out;
|
||||
background-color: var(--message-bg-hover);
|
||||
color: var(--primary-text);
|
||||
font-weight: bold;
|
||||
|
|
@ -130,7 +74,7 @@ samp {
|
|||
|
||||
.infosection {
|
||||
display: inline-block;
|
||||
background-color: var(--info-bg);
|
||||
background-color: var(--profile-info-bg);
|
||||
border-radius: 10%;
|
||||
padding: .3cm;
|
||||
width: calc(100% - .6cm);
|
||||
|
|
@ -312,13 +256,11 @@ input {
|
|||
}
|
||||
|
||||
div {
|
||||
transition: background 0.1s ease-in-out;
|
||||
}
|
||||
.unkownfile{
|
||||
background: var(--unknown-file-bg);
|
||||
transition: background .1s ease-in-out;
|
||||
}
|
||||
|
||||
#typebox {
|
||||
font-family: "sans-serif";
|
||||
font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
padding: 3px;
|
||||
border-radius: .25cm;
|
||||
|
|
@ -328,7 +270,7 @@ div {
|
|||
}
|
||||
|
||||
p {
|
||||
transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
|
||||
transition: background .1s ease-in-out, color .1s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -337,6 +279,9 @@ p {
|
|||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
.username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
background-color: var(--black);
|
||||
|
|
@ -372,7 +317,7 @@ p {
|
|||
transform: translateY(-100%);
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 4px;
|
||||
transition: transform 0.5s ease, opacity 0.1s ease;
|
||||
transition: transform .5s ease, opacity .1s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -396,11 +341,11 @@ p {
|
|||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
animation-delay: 0.333s;
|
||||
animation-delay: .33s;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
animation-delay: .666s;
|
||||
animation-delay: .66s;
|
||||
}
|
||||
|
||||
#typing p {
|
||||
|
|
@ -433,7 +378,7 @@ p {
|
|||
width: 80%;
|
||||
}
|
||||
|
||||
.Home {
|
||||
.home {
|
||||
border-radius: 50%;
|
||||
width: .5in;
|
||||
height: .5in;
|
||||
|
|
@ -473,7 +418,9 @@ p {
|
|||
.startreply {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: .4in;
|
||||
width: 22px;
|
||||
margin-left: 25px;
|
||||
border-color: var(--reply-border);
|
||||
}
|
||||
|
||||
.replypfp {
|
||||
|
|
@ -502,6 +449,7 @@ p {
|
|||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
box-shadow: 0 2px 5px var(--black);
|
||||
transition: .1s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
|
|
@ -524,16 +472,16 @@ textarea {
|
|||
|
||||
.channels {
|
||||
overflow: auto;
|
||||
transition: height 0.2s ease-in-out;
|
||||
transition: height .2s ease-in-out;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Channel:hover {
|
||||
.channel:hover {
|
||||
background-color: var(--channel-hover);
|
||||
}
|
||||
|
||||
.Channel {
|
||||
.channel {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -549,7 +497,7 @@ textarea {
|
|||
}
|
||||
|
||||
.servertd {
|
||||
background-color: var(--server-hover);
|
||||
background-color: var(--server-bg);
|
||||
border-color: var(--server-border);
|
||||
border-width: .1cm;
|
||||
border-style: solid;
|
||||
|
|
@ -580,12 +528,9 @@ textarea {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: .13in;
|
||||
font-weight: 500;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
|
|
@ -613,16 +558,6 @@ textarea {
|
|||
border-radius: .1in;
|
||||
}
|
||||
|
||||
.replyusername {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.replyusername:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.servernamediv {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,57 @@
|
|||
:root {
|
||||
--servertd-height: 0px;
|
||||
/* Default value */
|
||||
}
|
||||
.Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
|
||||
color-scheme: dark;
|
||||
|
||||
--primary-text: #FFF;
|
||||
--primary-bg: #282832;
|
||||
--black: #000;
|
||||
|
||||
--message-bg-hover: #1e1e28;
|
||||
--typing-bg: #161616;
|
||||
--profile-bg: #2e2d33;
|
||||
--timestamp-color: #a2a2a2;
|
||||
--code-bg: #101014;
|
||||
--info-bg: #1a1a1e;
|
||||
--user-info-bg: #323039;
|
||||
--user-dock-bg: #1a1a23;
|
||||
--channels-bg: #32323c;
|
||||
--channel-hover: #1c1b25;
|
||||
--blank-bg: #1b1b1b;
|
||||
--light-border: #929292;
|
||||
--settings-hover: #0e0d10;
|
||||
--quote-bg: #7a798e;
|
||||
--button-bg: #1b1b28;
|
||||
--textarea-bg: #26272c;
|
||||
--filename: #47bbff;
|
||||
--mention-bg: #F00;
|
||||
--pronouns: #797979;
|
||||
|
||||
--server-border: #1b1b24;
|
||||
--server-hover: #252530;
|
||||
|
||||
--reply-border: #474b76;
|
||||
--reply-bg: #0b0d20;
|
||||
--reply-text: #acacac;
|
||||
|
||||
--spoiler-hover: #111111;
|
||||
--spoiler-open-bg: #1e1e1e;
|
||||
|
||||
--unknown-file-bg: #141316;
|
||||
--unknown-file-border: #474555;
|
||||
|
||||
--login-border: #131315;
|
||||
--loading-bg: #22232c;
|
||||
|
||||
--dialog-bg: #33363d;
|
||||
--dialog-border: #1c1b31;
|
||||
|
||||
--scrollbar-track: #34313c;
|
||||
--scrollbar-thumb: #201f29;
|
||||
--scrollbar-thumb-hover: #16161f;
|
||||
}
|
||||
.WHITE-theme {
|
||||
color-scheme: light;
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue