Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added support for making an account

Browse source
This commit is contained in:
MathMan05 2024-06-08 15:12:55 -05:00
parent f6d33a7aa8
commit 7d6977d3d5
10 changed files with 192 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

10
index.js
View file

@ -9,6 +9,12 @@ app.get('/', (req, res) => {
app.get('/login.html', (req, res) => { app.get('/login.html', (req, res) => {
res.sendFile("./webpage/login.html", {root: __dirname}) 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) => { app.get('/dirrect.js', (req, res) => {
res.sendFile("./webpage/dirrect.js", {root: __dirname}) res.sendFile("./webpage/dirrect.js", {root: __dirname})
}) })
@ -51,8 +57,8 @@ app.get('/fullscreen.js', (req, res) => {
app.get('/style.css', (req, res) => { app.get('/style.css', (req, res) => {
res.sendFile("./webpage/style.css", {root: __dirname}) res.sendFile("./webpage/style.css", {root: __dirname})
}) })
app.get('/light.css', (req, res) => { app.get('/themes.css', (req, res) => {
res.sendFile("./webpage/light.css", {root: __dirname}) res.sendFile("./webpage/themes.css", {root: __dirname})
}) })
app.get('/manifest.json', (req, res) => { app.get('/manifest.json', (req, res) => {
res.sendFile("./webpage/manifest.json", {root: __dirname}) res.sendFile("./webpage/manifest.json", {root: __dirname})

4
webpage/channel.js
View file

@ -103,7 +103,7 @@ class channel{
div.appendChild(caps) div.appendChild(caps)
caps.classList.add("capsflex") caps.classList.add("capsflex")
decdiv.classList.add("channeleffects"); decdiv.classList.add("channeleffects");
decdiv.classList.add("Channel"); decdiv.classList.add("channel");
lacechannel(decdiv); lacechannel(decdiv);
decdiv.all=this; decdiv.all=this;
@ -127,7 +127,7 @@ class channel{
} }
div.appendChild(childrendiv); div.appendChild(childrendiv);
}else{ }else{
div.classList.add("Channel"); div.classList.add("channel");
if(this.hasunreads){ if(this.hasunreads){
div.classList.add("cunread"); div.classList.add("cunread");
} }

2
webpage/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<link href="/style.css" rel="stylesheet" type="text/css" /> <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" /> <link rel="manifest" href="/manifest.json" />
</head> </head>

2
webpage/localuser.js
View file

@ -91,7 +91,7 @@ class localuser{
const div=document.createElement("div"); const div=document.createElement("div");
div.innerText="⌂"; div.innerText="⌂";
div.classList.add("Home","servericon") div.classList.add("home","servericon")
div.all=this.guildids["@me"]; div.all=this.guildids["@me"];
serverlist.appendChild(div) serverlist.appendChild(div)
div.onclick=function(){ div.onclick=function(){

2
webpage/login.html
View file

@ -1,6 +1,7 @@
<body> <body>
<head> <head>
<link href="/style.css" rel="stylesheet" type="text/css" /> <link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
</head> </head>
<div id="logindiv"> <div id="logindiv">
<h1>Login</h1><br> <h1>Login</h1><br>
@ -17,6 +18,7 @@
<p class="wrongred" id="wrong"></p> <p class="wrongred" id="wrong"></p>
<button type="submit">Login</button> <button type="submit">Login</button>
</form> </form>
<a href="/register.html">Don't have an account?</a>
</div> </div>
<script src="/login.js"></script> <script src="/login.js"></script>
</body> </body>

41
webpage/login.js
View file

@ -3,37 +3,46 @@ function getCookie(name) {
} }
function setTheme(){ function setTheme(){
const name=localStorage.getItem("theme"); const name=localStorage.getItem("theme");
if(!name){
document.body.className="Dark-theme";
localStorage.setItem("theme","Dark");
}
document.body.className=name+"-theme"; document.body.className=name+"-theme";
} }
setTheme(); setTheme();
{ {
const instancein=document.getElementById("instancein"); const instancein=document.getElementById("instancein");
let timeout=0; 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){ if(instancein){
console.log(instancein) console.log(instancein)
instancein.addEventListener("keydown",e=>{ instancein.addEventListener("keydown",e=>{
const verify=document.getElementById("verify"); const verify=document.getElementById("verify");
verify.innerText="Waiting to check Instance" verify.innerText="Waiting to check Instance"
clearTimeout(timeout); clearTimeout(timeout);
timeout=setTimeout(async e=>{ timeout=setTimeout(check,1000);
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);
}); });
} }
if(localStorage.getItem("instanceinfo")){
instancein.value=localStorage.getItem("instanceinfo").wellKnown
}else{
check("https://spacebar.chat/");
}
} }
async function login(username, password){ async function login(username, password){
const options={ const options={

34
webpage/register.html Normal file
View 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
View 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);
}

111
webpage/style.css
View file

@ -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 { body {
font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400; font-weight: 400;
background-color: var(--primary-bg); background-color: var(--primary-bg);
color: var(--primary-text); color: var(--primary-text);
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -117,7 +61,7 @@ samp {
} }
.contextbutton { .contextbutton {
transition: background 0.1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--message-bg-hover); background-color: var(--message-bg-hover);
color: var(--primary-text); color: var(--primary-text);
font-weight: bold; font-weight: bold;
@ -130,7 +74,7 @@ samp {
.infosection { .infosection {
display: inline-block; display: inline-block;
background-color: var(--info-bg); background-color: var(--profile-info-bg);
border-radius: 10%; border-radius: 10%;
padding: .3cm; padding: .3cm;
width: calc(100% - .6cm); width: calc(100% - .6cm);
@ -312,13 +256,11 @@ input {
} }
div { div {
transition: background 0.1s ease-in-out; transition: background .1s ease-in-out;
}
.unkownfile{
background: var(--unknown-file-bg);
} }
#typebox { #typebox {
font-family: "sans-serif"; font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px; font-size: 16px;
padding: 3px; padding: 3px;
border-radius: .25cm; border-radius: .25cm;
@ -328,7 +270,7 @@ div {
} }
p { 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%; width: 100%;
} }
@ -337,6 +279,9 @@ p {
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
} }
.username:hover {
text-decoration: underline;
}
.spoiler { .spoiler {
background-color: var(--black); background-color: var(--black);
@ -372,7 +317,7 @@ p {
transform: translateY(-100%); transform: translateY(-100%);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
padding: 4px; padding: 4px;
transition: transform 0.5s ease, opacity 0.1s ease; transition: transform .5s ease, opacity .1s ease;
opacity: 1; opacity: 1;
} }
@ -396,11 +341,11 @@ p {
} }
.dot:nth-child(2) { .dot:nth-child(2) {
animation-delay: 0.333s; animation-delay: .33s;
} }
.dot:nth-child(3) { .dot:nth-child(3) {
animation-delay: .666s; animation-delay: .66s;
} }
#typing p { #typing p {
@ -433,7 +378,7 @@ p {
width: 80%; width: 80%;
} }
.Home { .home {
border-radius: 50%; border-radius: 50%;
width: .5in; width: .5in;
height: .5in; height: .5in;
@ -473,7 +418,9 @@ p {
.startreply { .startreply {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: .4in; width: 22px;
margin-left: 25px;
border-color: var(--reply-border);
} }
.replypfp { .replypfp {
@ -502,6 +449,7 @@ p {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb); background-color: var(--scrollbar-thumb);
box-shadow: 0 2px 5px var(--black); box-shadow: 0 2px 5px var(--black);
transition: .1s;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
@ -524,16 +472,16 @@ textarea {
.channels { .channels {
overflow: auto; overflow: auto;
transition: height 0.2s ease-in-out; transition: height .2s ease-in-out;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
.Channel:hover { .channel:hover {
background-color: var(--channel-hover); background-color: var(--channel-hover);
} }
.Channel { .channel {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
@ -549,7 +497,7 @@ textarea {
} }
.servertd { .servertd {
background-color: var(--server-hover); background-color: var(--server-bg);
border-color: var(--server-border); border-color: var(--server-border);
border-width: .1cm; border-width: .1cm;
border-style: solid; border-style: solid;
@ -580,12 +528,9 @@ textarea {
user-select: none; user-select: none;
} }
.username:hover {
text-decoration: underline;
}
.tag { .tag {
font-size: .13in; font-size: .13in;
font-weight: 500;
color: var(--primary-text); color: var(--primary-text);
} }
@ -613,16 +558,6 @@ textarea {
border-radius: .1in; border-radius: .1in;
} }
.replyusername {
user-select: none;
cursor: pointer;
word-break: normal;
}
.replyusername:hover {
text-decoration: underline;
}
.servernamediv { .servernamediv {
width: 100%; width: 100%;
} }

54
webpage/light.css → webpage/themes.css
View file

@ -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 { .WHITE-theme {
color-scheme: light; color-scheme: light;