From edf97f63dda699a20df6b4794e083eee73fb9e84 Mon Sep 17 00:00:00 2001 From: Aelita4 Date: Sat, 11 Nov 2023 23:28:42 +0100 Subject: [PATCH] Implement basic layout of website --- src/components/NavBar.astro | 57 +++++++++++++---- src/pages/game/index.astro | 120 +++++++++++++++++++++++++++++++++++ src/pages/index.astro | 7 ++- src/pages/login.astro | 76 ++++++++++++++++++++++ src/pages/logout.astro | 7 +++ src/pages/register.astro | 122 ++++++++++++++++++++++++++++++++++++ 6 files changed, 375 insertions(+), 14 deletions(-) create mode 100644 src/pages/game/index.astro create mode 100644 src/pages/login.astro create mode 100644 src/pages/logout.astro create mode 100644 src/pages/register.astro diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro index eb43486..934b61e 100644 --- a/src/components/NavBar.astro +++ b/src/components/NavBar.astro @@ -1,4 +1,5 @@ --- +import { getHighestWeightedLanguage, getLocales } from '../lib/lang/langDriver'; interface Props { loggedIn: string; } @@ -10,20 +11,34 @@ interface NavElement { dropdowns?: Array; } +const lang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'navbar'); + const listOfElements: Array = [{ - title: "home", - type: "simple", - url: "#" -}, { - title: "login", + title: lang["Link_home"], type: "simple", url: "/" }, { - title: "dropdown", + title: lang["Link_login"], + type: "simple", + url: "/login" +}, { + title: lang["Link_register"], + type: "simple", + url: "/register" +},{ + title: lang["Link_dropdown"], type: "dropdown", url: "about:blank", dropdowns: [{ - title: "chuj", + title: "drop1", + type: "simple", + url: "aaa" + }, { + title: "drop2", + type: "simple", + url: "aaa" + }, { + title: "drop3", type: "simple", url: "aaa" }] @@ -38,8 +53,8 @@ const { loggedIn } = Astro.props; element.type === "dropdown" ?
  • {element.title}
    • -
    - +
    +
    : // else
  • {element.title}
    • @@ -66,21 +81,37 @@ nav ul { } .nav-item:not(:first-child) { - margin-left: 20px; - color: green; + margin-left: 50px; + /* color: green; */ } .nav-item-dropdown { color: red; font-size: xx-large; + position: relative; + display: inline-block; } -.nav-item-dropdown-content { +.nav-item-dropdown-div { display: none; + position: absolute; + background-color: green; +} + +.nav-item-dropdown-div ul { + display: flex; + flex-direction: column; +} + +.nav-item-dropdown:hover .nav-item-dropdown-div { + display: inline-block; + /* position: relative; */ + /* padding-top: 100px; */ } .nav-item-dropdown:hover .nav-item-dropdown-content { - display: block; + z-index: 1; + padding-top: 5px; } .nav-url { diff --git a/src/pages/game/index.astro b/src/pages/game/index.astro new file mode 100644 index 0000000..6946d9a --- /dev/null +++ b/src/pages/game/index.astro @@ -0,0 +1,120 @@ +--- +import Layout from '../../layouts/Layout.astro'; +import NavBar from '../../components/NavBar.astro'; +import { getUserResources, updateUserResources } from '../../lib/users'; +import { getHighestWeightedLanguage, getLocales } from '../../lib/lang/langDriver'; + +String.prototype.format = function() { + return [...arguments].reduce((p,c) => p.replace(/{}/,c), this); +}; + +const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null; +const username = Astro.cookies.get('username')?.value ?? ""; + +if(loggedToken === null || username === "") return Astro.redirect('/'); + +const resources = await getUserResources(username); + +await updateUserResources(username, { + coal: resources.coal * 2, + iron: resources.iron * 3, + gold: resources.gold * 4, +}); + +const langResources = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'resources'); +const langGame = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'game'); +// console.log(resources); +--- + + + + {langGame['Link_logout']} +

    {langGame['Header_user'].format(username)}

    +
      +
    • {langResources['Label_coal']}: {resources.coal * 2}
      • +
    • {langResources['Label_iron']}: {resources.iron * 3}
      • +
    • {langResources['Label_gold']}: {resources.gold * 4}
      • +
    + + +     + + + \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 2dbb278..094956e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,12 @@ --- import Layout from '../layouts/Layout.astro'; -import Card from '../components/Card.astro'; +// import Card from '../components/Card.astro'; import NavBar from '../components/NavBar.astro'; + +const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null; + +if(loggedToken === null) return Astro.redirect('/login'); + --- diff --git a/src/pages/login.astro b/src/pages/login.astro new file mode 100644 index 0000000..03a956b --- /dev/null +++ b/src/pages/login.astro @@ -0,0 +1,76 @@ +--- +import Layout from '../layouts/Layout.astro'; +import NavBar from '../components/NavBar.astro'; + +import { getUserByNickOrEmail } from '../lib/users'; + +import { compare } from 'bcrypt'; + +let error = ""; + +if(Astro.request.method === "POST") { + const data = await Astro.request.formData(); + const username = data.get("username") as string | ""; + const password = data.get("password") as string | ""; + + if(username === "") { + error = "username is required"; + Astro.redirect("/login"); + } + + if(password === "") { + error = "password is required"; + Astro.redirect("/login"); + } + + const user = await getUserByNickOrEmail(username as string); + + if(user !== null && await compare(password as string, user.password)) { + const sessionTime = import.meta.env.SESSION_TIME_MINUTES * 60; + + const res = await fetch(`${Astro.url.origin}/api/auth/generateAccessToken`, { + method: 'POST', + body: JSON.stringify({ + username, + createdFrom: 'loginForm', + duration: sessionTime + }), + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + import.meta.env.MASTER_ACCESSTOKEN + } + }); + + const token = (await res.json()).accessToken; + + Astro.cookies.set("sessionToken", token, { + path: "/", + maxAge: sessionTime, + sameSite: "lax", + secure: true + }); + + Astro.cookies.set("username", username, { + path: "/", + maxAge: sessionTime, + sameSite: "lax", + secure: true + }); + + return Astro.redirect("/game"); + } else { + error = "invalid username or password"; + return Astro.redirect("/login"); + } +} +--- + + + +
    +
    +
    + + { error !== "" ?

    {error}

    : "" } +
    +     \ No newline at end of file diff --git a/src/pages/logout.astro b/src/pages/logout.astro new file mode 100644 index 0000000..2e50cf2 --- /dev/null +++ b/src/pages/logout.astro @@ -0,0 +1,7 @@ +--- +if(Astro.cookies.has('sessionToken')) { + Astro.cookies.delete('sessionToken'); +} + +return Astro.redirect('/'); +--- \ No newline at end of file diff --git a/src/pages/register.astro b/src/pages/register.astro new file mode 100644 index 0000000..167b0a7 --- /dev/null +++ b/src/pages/register.astro @@ -0,0 +1,122 @@ +--- +import Layout from '../layouts/Layout.astro'; +import NavBar from '../components/NavBar.astro'; + +import { createUser } from '../lib/users'; +import type User from '../types/User'; + +import bcrypt from 'bcrypt'; + +let error = ""; + +if(Astro.request.method === "POST") { + const data = await Astro.request.formData(); + const username = data.get("username") as string | ""; + const email = data.get("email") as string | ""; + const password = data.get("password") as string | ""; + const password2 = data.get("password2") as string | ""; + + if(username === "") { + error = "username is required"; + Astro.redirect("/register"); + } + + if(email === "") { + error = "email is required"; + Astro.redirect("/register"); + } + + if(password === "") { + error = "password is required"; + Astro.redirect("/register"); + } + + if(password2 === "") { + error = "password2 is required"; + Astro.redirect("/register"); + } + + if(username.length < 3 || username.length > 20) { + error = "username must be between 3 and 20 characters long"; + Astro.redirect("/register"); + } + + if(email.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) === null) { + error = "email is invalid"; + Astro.redirect("/register"); + } + + if(password.length < 8 || password.length > 50) { + error = "password must be between 8 and 50 characters long"; + Astro.redirect("/register"); + } + + if(password !== password2) { + error = "passwords must match"; + Astro.redirect("/register"); + } + + if(error === "") { + const user: User = { + username, + email, + password: await bcrypt.hash(password, 10), + lastLogin: new Date(), + createdAt: new Date(), + updatedAt: new Date(), + resources: { + coal: 1, + iron: 2, + gold: 3 + } + } + + await createUser(user); + + const sessionTime = import.meta.env.SESSION_TIME_MINUTES * 60; + + const res = await fetch(`${Astro.url.origin}/api/auth/generateAccessToken`, { + method: 'POST', + body: JSON.stringify({ + username, + createdFrom: 'loginForm', + duration: sessionTime + }), + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + import.meta.env.MASTER_ACCESSTOKEN + } + }); + + const token = (await res.json()).accessToken; + + Astro.cookies.set("sessionToken", token, { + path: "/", + maxAge: sessionTime, + sameSite: "lax", + secure: true + }); + + Astro.cookies.set("username", username, { + path: "/", + maxAge: sessionTime, + sameSite: "lax", + secure: true + }); + + return Astro.redirect("/game"); + } +} +--- + + + +
    +
    +
    +
    +
    + + { error !== "" ?

    {error}

    : "" } +
    +     \ No newline at end of file