added user logins and signups

This commit is contained in:
Arlo Filley 2022-11-11 13:04:13 +00:00
parent f6d52f1610
commit 9f2a5641db
13 changed files with 177 additions and 29 deletions

View File

@ -1,6 +1,6 @@
[default] [default]
address = "192.168.0.131" address = "192.168.0.109"
port = 8000 port = 10713
workers = 4 workers = 4
max_blocking = 512 max_blocking = 512
keep_alive = 5 keep_alive = 5

View File

@ -74,10 +74,16 @@ fn create_user(
).expect("Error: Couldn't create new user"); ).expect("Error: Couldn't create new user");
} }
#[get("/login/<username>/<password>")]
fn login(username: &str, password: &str) -> String {
let user_id = sql::find_user(username, password).expect("error finding user_id");
user_id.to_string()
}
#[launch] #[launch]
fn rocket() -> Rocket<Build> { fn rocket() -> Rocket<Build> {
rocket::build() rocket::build()
.mount("/test", routes![test]) // testing only, should return "Hello world" .mount("/test", routes![test]) // testing only, should return "Hello world"
.mount("/api", routes![post_test, create_user]) .mount("/api", routes![post_test, create_user, login])
.mount("/typing", FileServer::from(relative!("website"))) // hosts the fileserver .mount("/typing", FileServer::from(relative!("website"))) // hosts the fileserver
} }

View File

@ -89,6 +89,7 @@ pub fn create_user(
username: &str, username: &str,
password: &str password: &str
) -> Result<()> { ) -> Result<()> {
println!("{} {}",username, password);
let connection = get_connection(); let connection = get_connection();
connection.execute( connection.execute(
@ -110,3 +111,36 @@ pub fn create_user(
Ok(()) Ok(())
} }
#[derive(Debug)]
pub struct User {
user_id: u32,
}
pub fn find_user(
username: &str,
password: &str
) -> Result<u32> {
let mut user_id: u32 = 0;
let connection = get_connection();
let mut statement = connection.prepare(
"SELECT user_id
FROM users
WHERE username=:username AND password=:password",
)?;
let iter = statement
.query_map(
&[(":username", username), (":password", password)], |row| {
Ok( User {
user_id: row.get(0)?
})
}
)?;
for i in iter {
user_id = i.unwrap().user_id;
}
Ok(user_id)
}

View File

@ -1,7 +1,7 @@
class API { class API {
constructor() { constructor() {
this.url = "http://192.168.0.131:8000/api/"; this.url = "http://arlofilley.com/api/";
// this is the url of the server // this is the url of the server
// this may have to change later on // this may have to change later on
} }
@ -169,6 +169,7 @@ class API {
username, username,
password password
) { ) {
console.log(username, password);
const user = { const user = {
username: username, username: username,
password: password password: password
@ -184,4 +185,25 @@ class API {
JSON.stringify(user) JSON.stringify(user)
); );
} }
login(pUsername, pPassword) {
if (localStorage.getItem("userId") === null) {
let xhr = new XMLHttpRequest();
xhr.open('GET', `${this.url}/login/${pUsername}/${pPassword}`);
xhr.send();
xhr.onload = () => {
user.userId = Number(xhr.response);
if (user.userId > 0) {
user.username = pUsername
localStorage.setItem("userId", user.userId);
localStorage.setItem("username", pUsername);
localStorage.setItem("password", pPassword);
}
};
} else {
this.userId = localStorage.getItem("userId");
this.username = localStorage.getItem("username");
}
}
} }

7
website/api/user.js Normal file
View File

@ -0,0 +1,7 @@
class User {
constructor() {
this.username;
this.password;
this.userId;
}
}

View File

@ -22,9 +22,11 @@
<script src="./screens/startscreen.js"></script> <script src="./screens/startscreen.js"></script>
<script src="./screens/testscreen.js"></script> <script src="./screens/testscreen.js"></script>
<script src="./screens/endscreen.js"></script> <script src="./screens/endscreen.js"></script>
<script src="./screens/signUpScreen.js"></script>
<!-- API Script Files --> <!-- API Script Files -->
<script src="./api/api.js"></script> <script src="./api/api.js"></script>
<script src="./api/user.js"></script>
</head> </head>
<body> <body>

View File

@ -21,7 +21,7 @@ function draw() {
// whenever a key is pressed this function is called // whenever a key is pressed this function is called
function keyPressed() { function keyPressed() {
screenManager.textbox.letterTyped(key); screenManager.letterTyped(key);
} }
// This ensures that the canvas is always the correct size and at the center // This ensures that the canvas is always the correct size and at the center

View File

@ -16,4 +16,13 @@ class ScreenManager {
getScreen() { getScreen() {
return this.screen; return this.screen;
} }
letterTyped(key) {
let methods = Object.getOwnPropertyNames(Object.getPrototypeOf(this.screen));
for (let i = 0; i < methods.length; i++) {
if (methods[i] === "letterTyped") {
this.screen.letterTyped(key)
}
}
}
} }

View File

@ -1,9 +1,10 @@
class SignUpScreen { class SignUpScreen {
constructor() { constructor() {
textboxes = [ this.textboxes = [
new Textbox( new Textbox(
0,0, 120,250,
0,0, 500,100,
0,
true, true,
"#000", "#000",
false, "#000", false, "#000",
@ -11,14 +12,50 @@ class SignUpScreen {
), ),
new Textbox( new Textbox(
0,0, 120,400,
0,0, 500,100,
0,
true, true,
"#000", "#000",
false,"000", false,"000",
"#000" "#000"
) )
] ]
this.buttons = [
new Button(
100,200,
500,100,
0,
true,
"#000",
false,"#000",
"#fff",""
),
new Button(
100,350,
500,100,
0,
true,
"#000",
false,"#000",
"#fff",""
),
new Button(
700,300,
100,50,
0,
true,
"#000",
false,"#000",
"#00ff00","Sign Up"
),
]
this.activeTextBox = 0
// keeps track of which textbox the user last clicked on
} }
/** /**
@ -27,8 +64,27 @@ class SignUpScreen {
*/ */
draw() { draw() {
background("#eeeee4"); background("#eeeee4");
for (texbox in this.textboxes) { for (let i = 0; i < this.buttons.length; i++) {
textbox.draw(); this.buttons[i].draw();
}
for (let i = 0; i < this.textboxes.length; i++) {
this.textboxes[i].draw();
}
text("Username", 110, 175);
text("Password", 110, 325);
if (this.buttons[0].isPressed()) {
this.activeTextBox=0;
} else if (this.buttons[1].isPressed()) {
this.activeTextBox=1;
} else if (this.buttons[2].isPressed()) {
api.createUser(
this.textboxes[0].getWords(),
this.textboxes[1].getWords()
)
screenManager.setScreen(new StartScreen());
} }
} }
@ -37,6 +93,6 @@ class SignUpScreen {
* @param {key} key * @param {key} key
*/ */
letterTyped(key) { letterTyped(key) {
this.textboxes[0].letterTyped(); this.textboxes[this.activeTextBox].letterTyped(key);
} }
} }

View File

@ -1,12 +1,23 @@
class StartScreen { class StartScreen {
constructor() { constructor() {
screenManager.textbox = new Textbox(0,0,0,0,0,false,"#000", false, "#000", "#000"); this.buttons = [new Button(0,0,100,30,0,true,"#fff",false,"#000","#000","Sign Up")]
} }
draw() { draw() {
background("#eeeee4"); background("#eeeee4");
textSize(100); textSize(100);
textAlign(CENTER, CENTER); textAlign(CENTER, CENTER);
fill("#000");
text("Press enter to start test", 0, 0, windowWidth - 100, windowHeight - 100); text("Press enter to start test", 0, 0, windowWidth - 100, windowHeight - 100);
this.buttons[0].draw();
if (this.buttons[0].isPressed()) {
screenManager.setScreen(new SignUpScreen());
}
}
letterTyped(key) {
if (key === "Enter") {
screenManager.setScreen(new TestScreen());
}
} }
} }

View File

@ -1,14 +1,18 @@
class TestScreen { class TestScreen {
constructor() { constructor() {
screenManager.textbox = new Textbox(100,100,windowWidth - 100,windowHeight,0,true,"#000", false, "#000", "#000"); this.textbox = new Textbox(100,100,windowWidth - 100,windowHeight,0,true,"#000", false, "#000", "#000");
screenManager.timer = new Timer(0,0,windowWidth,50,0,true,"#fff", true, "#000", "#666", 15, true); screenManager.timer = new Timer(0,0,windowWidth,50,0,true,"#fff", true, "#000", "#666", 15, true);
screenManager.timer.start(); screenManager.timer.start();
} }
draw() { draw() {
background("#eeeee4"); background("#eeeee4");
screenManager.textbox.draw(); this.textbox.draw();
screenManager.timer.draw(); screenManager.timer.draw();
screenManager.timer.tick(); screenManager.timer.tick();
} }
letterTyped(key) {
this.textbox.letterTyped(key);
}
} }

View File

@ -129,7 +129,6 @@ class Button {
// if the mouse is within the bounds of the return that the button has been pressed // if the mouse is within the bounds of the return that the button has been pressed
if (mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height) { if (mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height) {
console.log("button has been pressed");
return true; return true;
} }
return false; return false;
@ -139,11 +138,12 @@ class Button {
* This function draws the button with the label * This function draws the button with the label
*/ */
draw() { draw() {
textSize(20);
fill(this.backgroundColor); fill(this.backgroundColor);
rect(this.x, this.y, this.width, this.height); rect(this.x, this.y, this.width, this.height);
fill(this.textColor); fill(this.textColor);
text(this.label, this.x, this.y, this.x + this.width, this.y + this.height); text(this.label, this.x, this.y, this.width, this.height);
// passing 4 arguments to this function means the text will wrap within this box // passing 4 arguments to this function means the text will wrap within this box
} }
} }

View File

@ -127,23 +127,20 @@ class Textbox {
* @returns * @returns
*/ */
letterTyped(pKey) { letterTyped(pKey) {
if (pKey === "Enter" && (screenManager.screen.constructor.name === "StartScreen" /* || screenManager.screen.constructor.name === "EndScreen" */)) { if (screenManager.screen.constructor.name === "TestScreen" && screenManager.timer.time === 0) {
screenManager.setScreen(new TestScreen());
return;
}
if (screenManager.timer.time === 0) {
return; return;
} }
if (pKey === "Backspace" && this.letters.length > 0) { if (pKey === "Backspace" && this.letters.length > 0) {
this.letters.pop(); this.letters.pop();
this.words.substring(0, this.words.length-1)
return; return;
} }
for (let i = 0; i < this.allowedLetters.length; i++) { for (let i = 0; i < this.allowedLetters.length; i++) {
if (pKey.toLowerCase() === this.allowedLetters[i]) { if (pKey.toLowerCase() === this.allowedLetters[i]) {
this.letters.push(pKey); this.letters.push(pKey);
this.words += pKey;
return; return;
} }
} }