From 7d6977d3d59ae127aadaf068d5bc4c14141f249d Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Sat, 8 Jun 2024 15:12:55 -0500 Subject: [PATCH] Added support for making an account --- index.js | 10 ++- webpage/channel.js | 4 +- webpage/index.html | 2 +- webpage/localuser.js | 2 +- webpage/login.html | 2 + webpage/login.js | 41 ++++++----- webpage/register.html | 34 +++++++++ webpage/register.js | 42 +++++++++++ webpage/style.css | 111 +++++++----------------------- webpage/{light.css => themes.css} | 54 +++++++++++++++ 10 files changed, 192 insertions(+), 110 deletions(-) create mode 100644 webpage/register.html create mode 100644 webpage/register.js rename webpage/{light.css => themes.css} (64%) diff --git a/index.js b/index.js index a780fdc..5bfa988 100755 --- a/index.js +++ b/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}) diff --git a/webpage/channel.js b/webpage/channel.js index 9776b20..91e2772 100644 --- a/webpage/channel.js +++ b/webpage/channel.js @@ -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"); } diff --git a/webpage/index.html b/webpage/index.html index c1ea700..8454190 100644 --- a/webpage/index.html +++ b/webpage/index.html @@ -3,7 +3,7 @@ - + diff --git a/webpage/localuser.js b/webpage/localuser.js index 302b923..a8f3915 100644 --- a/webpage/localuser.js +++ b/webpage/localuser.js @@ -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(){ diff --git a/webpage/login.html b/webpage/login.html index 31980aa..7b1db3d 100644 --- a/webpage/login.html +++ b/webpage/login.html @@ -1,6 +1,7 @@ +

Login


@@ -17,6 +18,7 @@

+Don't have an account?
diff --git a/webpage/login.js b/webpage/login.js index 6fd4cc4..ff20893 100644 --- a/webpage/login.js +++ b/webpage/login.js @@ -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={ diff --git a/webpage/register.html b/webpage/register.html new file mode 100644 index 0000000..ad7b117 --- /dev/null +++ b/webpage/register.html @@ -0,0 +1,34 @@ + + + + + +
+

Create an account


+
+
+

+

+ +
+

+ +
+

+ +
+

+ +
+

+ +
+



+

+ +
+Already have an account? +
+ + + diff --git a/webpage/register.js b/webpage/register.js new file mode 100644 index 0000000..356dab8 --- /dev/null +++ b/webpage/register.js @@ -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); +} diff --git a/webpage/style.css b/webpage/style.css index 0a0b8f5..e0f2445 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -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%; } diff --git a/webpage/light.css b/webpage/themes.css similarity index 64% rename from webpage/light.css rename to webpage/themes.css index 271e988..5c51514 100644 --- a/webpage/light.css +++ b/webpage/themes.css @@ -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;