laudom
/
ocw
2
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

yeah so I rewrote the other half

master
selfisekai 2020-10-29 23:37:32 +01:00
parent 184cfe2454
commit 38156aaaab
3 changed files with 95 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
front/src/index.ts
View File

@ -139,7 +139,7 @@ enum PackageStatus {
STACK_PARCEL_IN_BOX_MACHINE_PICKUP_TIME_EXPIRED = "stack_parcel_in_box_machine_pickup_time_expired",
}
let phone = 0;
let phone: string | null = localStorage.getItem("phone");
const leafletLoaderJS = document.createElement("script");
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
leafletLoaderJS.setAttribute(
@ -302,17 +302,37 @@ window.addEventListener("load", () => {
register.addEventListener("submit", async (event) => {
event.preventDefault();
const form = event.target as HTMLFormElement;
phone = form.phone.value;
phone = (form.querySelector('input[name="phone"]')! as HTMLInputElement).value;
localStorage.setItem("phone", phone);
const res = await request("register", {
login: form.login.value,
password: form.password.value,
phone: form.phone.value,
login: (form.querySelector('input[name="login"]')! as HTMLInputElement).value,
password: (form.querySelector('input[name="password"]')! as HTMLInputElement).value,
mail: (form.querySelector('input[name="email"]')! as HTMLInputElement).value,
});
if (res.status == 200) {
[".register-box", ".login-box"].forEach((element) => {
(document.querySelector(element)! as HTMLDivElement).style.display = "none";
});
(document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block";
} else {
openError(res.description || res.msg);
}
});
const mail = document.querySelector(".mail-form")!;
mail.addEventListener("submit", async (event) => {
event.preventDefault();
const form = event.target as HTMLFormElement;
const res = await request("mailcode", {
code: form.code.value,
phone,
});
if (res.status == 200) {
(document.querySelector(".mail-box")! as HTMLDivElement).style.display = "none";
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
if (!phone) {
(document.querySelector(".sms-phone-field")! as HTMLDivElement).style.display = "block";
}
} else {
openError(res.description || res.msg);
}
@ -322,12 +342,17 @@ window.addEventListener("load", () => {
sms.addEventListener("submit", async (event) => {
event.preventDefault();
const form = event.target as HTMLFormElement;
if (!phone) {
phone = (form.querySelector('input[name="phone"]')! as HTMLInputElement).value;
}
const res = await request("smscode", {
code: form.code.value,
phone,
});
if (res.status == 200) {
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "none";
phone = null;
localStorage.removeItem("phone");
await refreshPackages();
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
} else {
@ -347,16 +372,28 @@ window.addEventListener("load", () => {
});
request("session", {}).then((res) => {
if (res.status == 200) {
// logged in
refreshPackages().then(() => {
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
});
} else {
// not logged in
[".login-box", ".register-box"].forEach((elementName) => {
(document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
});
switch (parseInt(res.status, 10)) {
case 200:
// logged in, verified e-mail and phone
refreshPackages().then(() => {
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
});
localStorage.removeItem("phone");
break;
case -1:
// not logged in
[".login-box", ".register-box"].forEach((elementName) => {
(document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
});
break;
case -2:
(document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block";
break;
case -3:
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
break;
default:
openError(res.description || res.msg || `Session error: ${res.status}`);
}
});
});

2
front/src/style.scss
View File

@ -4,7 +4,9 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
.login-box,
.register-box,
.mail-box,
.sms-box,
.sms-phone-field,
.error-box,
.areyousure-box,
.package-list {

55
webroot/index.html
View File

@ -44,6 +44,13 @@
<input type="password" name="password" class="input" placeholder="***** ***">
</div>
</div>
<div class="field">
<label for="email" class="label">E-mail address</label>
<div class="control">
<input type="email" name="email" class="input" placeholder="@2137.pl">
</div>
<p class="help">For password recovery. Verified on account registration</p>
</div>
<div class="field">
<label for="phone" class="label">Phone number</label>
<div class="control">
@ -56,6 +63,19 @@
</div>
</form>
</div>
<div class="mail-box column">
<label class="label is-large">E-mail</label>
<form method="POST" class="mail-form">
<div class="field">
<label for="code" class="label">E-mail code</label>
<div class="control">
<input type="number" name="code" class="input">
</div>
</div>
<input type="submit" class="button" value="Submit">
</form>
</div>
</div>
<div class="sms-box column">
<label class="label is-large">SMS</label>
<form method="POST" class="sms-form">
@ -65,6 +85,13 @@
<input type="number" name="code" class="input">
</div>
</div>
<div class="field sms-phone-field">
<label for="phone" class="label">Phone number</label>
<div class="control">
<input type="tel" name="phone" class="input" placeholder="222922597">
</div>
<p class="help">The one your packages are assigned to</p>
</div>
<input type="submit" class="button" value="Submit">
</form>
</div>
@ -87,21 +114,21 @@
</div>
</div>
</div>
<div class="package-list table-container">
<div class="package-list container">
<div class="logout-button button">Log out</div>
<table class="table is-striped">
<thead>
<tr>
<th>Package number</th>
<th>Sender</th>
<th>Status</th>
<th>Location</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
<table class="table is-striped">
<thead>
<tr>
<th>Package number</th>
<th>Sender</th>
<th>Status</th>
<th>Location</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="details-box">
<div id="map">