init
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
<script>
|
||||
export let name;
|
||||
export let side = "48";
|
||||
const colors = [
|
||||
"#00AA55",
|
||||
"#009FD4",
|
||||
"#B381B3",
|
||||
"#939393",
|
||||
"#E3BC00",
|
||||
"#D47500",
|
||||
"#DC2A2A",
|
||||
"#3ede91",
|
||||
"#377dd4",
|
||||
"#0256b0",
|
||||
"#053d82",
|
||||
"#3d026e",
|
||||
"#b378e3",
|
||||
"#c4065c",
|
||||
"#543208",
|
||||
"#d97811",
|
||||
"#0c6b40",
|
||||
];
|
||||
let initials = "";
|
||||
if (name.split(" ").length > 1) {
|
||||
initials =
|
||||
name.split(" ")[0].charAt(0).toUpperCase() +
|
||||
name.split(" ")[1].charAt(0).toUpperCase();
|
||||
} else {
|
||||
initials =
|
||||
name.split(" ")[0].charAt(0).toUpperCase() +
|
||||
name.split(" ")[0].charAt(1).toUpperCase();
|
||||
}
|
||||
|
||||
let charIndex = name.charCodeAt(1) + name.length;
|
||||
let colorIndex = charIndex % 19;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="avatar"
|
||||
title={name}
|
||||
style="background-color:{colors[
|
||||
colorIndex
|
||||
]}; height: {side}px;width: {side}px; font-size:{side / 2}px"
|
||||
>
|
||||
<div class="avatar__letters">{initials}</div>
|
||||
</div>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script>
|
||||
import {getContext} from "svelte";
|
||||
import SpinnerButton from "../common/SpinnerButton.svelte";
|
||||
import SuccessAlert from "../common/SuccessAlert.svelte";
|
||||
|
||||
const channel = getContext("channel");
|
||||
let email = "";
|
||||
let successAlert;
|
||||
|
||||
function login(e) {
|
||||
e.preventDefault();
|
||||
|
||||
axios
|
||||
.post(channel.lucentUrl + "/login", {
|
||||
email: email,
|
||||
})
|
||||
.then((response) => {
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<SuccessAlert bind:this={successAlert}/>
|
||||
<div class="wrapper-tiny">
|
||||
|
||||
<form on:submit={login}>
|
||||
<div class="mb-3">
|
||||
<label for="emailaddress" class="form-label">Email address</label>
|
||||
<input
|
||||
type="email"
|
||||
bind:value={email}
|
||||
class="form-control"
|
||||
id="emailaddress"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-center mt-5 d-block">
|
||||
<SpinnerButton label="Login"/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script>
|
||||
export let active = "";
|
||||
import { getContext } from "svelte";
|
||||
const user = getContext("user");
|
||||
let logged = user?.id ? true : false;
|
||||
let menuItems = [
|
||||
{
|
||||
name: "Account",
|
||||
link: "/profile",
|
||||
auth: true,
|
||||
guest: false,
|
||||
},
|
||||
{
|
||||
name: "Login",
|
||||
link: "/login",
|
||||
auth: false,
|
||||
guest: true,
|
||||
},
|
||||
{
|
||||
name: "Register",
|
||||
link: "/register",
|
||||
auth: false,
|
||||
guest: true,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<ul class="nav justify-content-center mt-4 mb-5">
|
||||
{#each menuItems as item}
|
||||
{#if item.auth == logged || item.guest == !logged}
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link"
|
||||
class:active={active == item.name}
|
||||
href={item.link}>{item.name}</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
<style>
|
||||
.nav-item a.active{
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script>
|
||||
import ErrorAlert from "../common/ErrorAlert.svelte";
|
||||
import SpinnerButton from "../common/SpinnerButton.svelte";
|
||||
import Nav from "./Nav.svelte";
|
||||
import Avatar from "./Avatar.svelte";
|
||||
import {getContext} from "svelte";
|
||||
|
||||
const user = getContext("user");
|
||||
let name = user.name;
|
||||
let email = user.email;
|
||||
let errorMessage = "";
|
||||
|
||||
function saveName(e) {
|
||||
e.preventDefault();
|
||||
errorMessage = "";
|
||||
|
||||
axios
|
||||
.post("/account/update-name", {
|
||||
name: name,
|
||||
})
|
||||
.then((response) => {
|
||||
// window.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
errorMessage = error.response?.data.error;
|
||||
console.log({errorMessage});
|
||||
});
|
||||
}
|
||||
|
||||
function saveEmail(e) {
|
||||
e.preventDefault();
|
||||
errorMessage = "";
|
||||
|
||||
axios
|
||||
.post("/account/update-email", {
|
||||
email: email,
|
||||
})
|
||||
.then((response) => {
|
||||
// window.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
errorMessage = error.response?.data.error;
|
||||
console.log({errorMessage});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Nav active="Account"/>
|
||||
|
||||
<div class="wrapper-tiny">
|
||||
<ErrorAlert message={errorMessage}/>
|
||||
<h3 class="header-small mb-5">
|
||||
<Avatar name={user.name}/>
|
||||
</h3>
|
||||
<form on:submit={saveName}>
|
||||
<div class="input-group mb-3">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={name}
|
||||
class="form-control"
|
||||
placeholder="Name"
|
||||
/>
|
||||
<SpinnerButton label="Update"/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- <form on:submit={saveEmail}>-->
|
||||
<!-- <div class="input-group mb-3">-->
|
||||
<!-- <input-->
|
||||
<!-- type="text"-->
|
||||
<!-- bind:value={email}-->
|
||||
<!-- class="form-control"-->
|
||||
<!-- placeholder="Email"-->
|
||||
<!-- />-->
|
||||
<!-- <SpinnerButton label="Update" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<div class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="/logout">Logout from this device</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script>
|
||||
import ErrorAlert from "../common/ErrorAlert.svelte";
|
||||
import SpinnerButton from "../common/SpinnerButton.svelte";
|
||||
|
||||
import Nav from "./Nav.svelte";
|
||||
|
||||
let name = "";
|
||||
export let userCount = 1;
|
||||
export let email = "";
|
||||
export let token = "";
|
||||
let password = "";
|
||||
let errorMessage = "";
|
||||
|
||||
function register(e) {
|
||||
e.preventDefault();
|
||||
errorMessage = "";
|
||||
|
||||
axios
|
||||
.post("/register", {
|
||||
name: name,
|
||||
password: password,
|
||||
email: email,
|
||||
token: token,
|
||||
isAdmin: userCount === 0,
|
||||
})
|
||||
.then(() => {
|
||||
window.location = "/login";
|
||||
})
|
||||
.catch((error) => {
|
||||
errorMessage = error.response?.data.error;
|
||||
console.log({errorMessage});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Nav active="Register"/>
|
||||
<div class="wrapper-tiny">
|
||||
{#if token || userCount === 0}
|
||||
<ErrorAlert message={errorMessage}/>
|
||||
|
||||
<form on:submit={register}>
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={name}
|
||||
class="form-control"
|
||||
id="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<input
|
||||
type="email"
|
||||
bind:value={email}
|
||||
class="form-control"
|
||||
id="email"
|
||||
disabled={userCount !== 0}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
bind:value={password}
|
||||
class="form-control"
|
||||
id="password"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="terms"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="terms"
|
||||
>I Agree to the <a
|
||||
href="https://www.radical-elements.com/terms-of-service"
|
||||
target="_blank">terms and conditions</a
|
||||
></label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5 d-block">
|
||||
<SpinnerButton label="Register"/>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<p class="text-center mb-0">Registrations are currently closed</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
import {getContext} from "svelte";
|
||||
import SpinnerButton from "../common/SpinnerButton.svelte";
|
||||
import SuccessAlert from "../common/SuccessAlert.svelte";
|
||||
|
||||
const channel = getContext("channel");
|
||||
export let email;
|
||||
export let token;
|
||||
let successAlert;
|
||||
|
||||
function login(e) {
|
||||
e.preventDefault();
|
||||
|
||||
axios
|
||||
.post(channel.lucentUrl + "/verify", {
|
||||
email: email,
|
||||
token: token,
|
||||
})
|
||||
.then((response) => {
|
||||
window.location = channel.lucentUrl;
|
||||
})
|
||||
.catch((error) => {
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<SuccessAlert bind:this={successAlert}/>
|
||||
<div class="wrapper-tiny">
|
||||
|
||||
<form on:submit={login}>
|
||||
<div class="mb-3 text-center">
|
||||
<h3>Login as {email}</h3>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-center mt-5 d-block">
|
||||
<SpinnerButton label="Enter"/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
export function avatar(name, side = 48) {
|
||||
const colors = [
|
||||
"#00AA55",
|
||||
"#009FD4",
|
||||
"#B381B3",
|
||||
"#939393",
|
||||
"#E3BC00",
|
||||
"#D47500",
|
||||
"#DC2A2A",
|
||||
"#3ede91",
|
||||
"#377dd4",
|
||||
"#0256b0",
|
||||
"#053d82",
|
||||
"#3d026e",
|
||||
"#b378e3",
|
||||
"#c4065c",
|
||||
"#543208",
|
||||
"#d97811",
|
||||
"#0c6b40",
|
||||
];
|
||||
let initials = "";
|
||||
if (name.split(" ").length > 1) {
|
||||
initials =
|
||||
name.split(" ")[0].charAt(0).toUpperCase() +
|
||||
name.split(" ")[1].charAt(0).toUpperCase();
|
||||
} else {
|
||||
initials =
|
||||
name.split(" ")[0].charAt(0).toUpperCase() +
|
||||
name.split(" ")[0].charAt(1).toUpperCase();
|
||||
}
|
||||
|
||||
let charIndex = name.charCodeAt(1) + name.length;
|
||||
let colorIndex = charIndex % 19;
|
||||
|
||||
return `
|
||||
<div
|
||||
class="avatar"
|
||||
style="background-color:${
|
||||
colors[colorIndex]
|
||||
};height: ${side}px;width: ${side}px; font-size:${side / 2}px">
|
||||
<div class="avatar__letters">${initials}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export function usernameById(users, id) {
|
||||
if (users) {
|
||||
return users.find((u) => u.id === id)?.name ?? id;
|
||||
}
|
||||
return id;
|
||||
}
|
||||
Reference in New Issue
Block a user