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

* registration UI/UX improvements and better welcome page

Browse source
This commit is contained in:
Dominika 2021-11-10 22:52:22 +01:00
parent 47955299e2
commit d859dbad0a
2 changed files with 289 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
front/src/index.ts
View file

@ -204,24 +204,24 @@ const request = (resource: string, data: any) =>
break; break;
case -2: case -2:
// mail unverified // mail unverified
showElements([".mail-box"]); showElements([".mail-box", ".logout-button"]);
hideElements([ hideElements([
".login-box", ".login-box",
".register-box", ".register-box",
".sms-box", ".sms-box",
".package-list", ".package-list",
".logout-button", ".description",
]); ]);
break; break;
case -3: case -3:
// phone unverified // phone unverified
showElements([".sms-box"]); showElements([".sms-box", ".logout-button"]);
hideElements([ hideElements([
".login-box", ".login-box",
".register-box", ".register-box",
".mail-box", ".mail-box",
".package-list", ".package-list",
".logout-button", ".description",
]); ]);
break; break;
default: default:
@ -347,7 +347,11 @@ const refreshPackages = async (response?: Package[]) => {
const openButton = detailsBox.querySelector( const openButton = detailsBox.querySelector(
".modal-card-foot button.is-primary", ".modal-card-foot button.is-primary",
)! as HTMLButtonElement; )! as HTMLButtonElement;
if (data.status === PackageStatus.READY_TO_PICKUP || data.status === PackageStatus.UNSTACK_FROM_BOX_MACHINE || data.status === PackageStatus.STACK_IN_BOX_MACHINE) { if (
data.status === PackageStatus.READY_TO_PICKUP ||
data.status === PackageStatus.UNSTACK_FROM_BOX_MACHINE ||
data.status === PackageStatus.STACK_IN_BOX_MACHINE
) {
openButton.removeAttribute("disabled"); openButton.removeAttribute("disabled");
openButton.onclick = (e: Event) => { openButton.onclick = (e: Event) => {
e.preventDefault(); e.preventDefault();
@ -505,7 +509,7 @@ window.addEventListener("load", () => {
phone, phone,
}); });
if (res.status == 200) { if (res.status == 200) {
hideElements([".mail-box"]); hideElements([".mail-box", ".description"]);
showElements([".sms-box"]); showElements([".sms-box"]);
if (!phone) { if (!phone) {
showElements([".sms-phone-field"]); showElements([".sms-phone-field"]);
@ -527,7 +531,7 @@ window.addEventListener("load", () => {
phone, phone,
}); });
if (res.status == 200) { if (res.status == 200) {
hideElements([".sms-box"]); hideElements([".sms-box", ".description"]);
phone = null; phone = null;
localStorage.removeItem("phone"); localStorage.removeItem("phone");
await refreshPackages(); await refreshPackages();

475
webroot/index.html
View file

@ -1,194 +1,275 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Otwarty Czapkomat Webowy</title> <title>Otwarty Czapkomat Webowy</title>
<link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="assets/style.css" />
</head> </head>
<body> <body>
<nav class="navbar is-success"> <nav class="navbar is-success">
<div class="navbar-menu"> <div class="navbar-menu">
<div class="navbar-brand"> <div class="navbar-brand">
<a href="/" class="navbar-item"> <a href="/" class="navbar-item">
<img src="/ocw.png" alt="OCW"> <img src="/ocw.png" alt="OCW" />
</a> </a>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<a class="button is-light logout-button"> <a class="button is-light logout-button">
<span>Log out</span> <span>Log out</span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </nav>
</nav> <div class="container">
<div class="container"> <div class="description">
<div class="description"> <div class="title is-1">Welcome to OCW!</div>
<div class="title is-1">Welcome to OCW!</div> <p class="paragraph">
<p class="paragraph">OCW (Otwarty Czapkomat Mobilny) is an open-source webapp, made for easy opening of Czapkomat compartments. It's free, easy to use, and we collect minimal required data (your username, e-mail and necessary API tokens - not even your phone number*)</p> OCW (Otwarty Czapkomat Mobilny) is an open-source webapp, made for
<p class="paragraph">Made by <a href="https://selfisekai.rocks">selfisekai</a> and <a href="https://sdomi.pl">sdomi</a>. Please note that this is still Work in Progress.</p> easy opening of Czapkomat compartments. It's free, easy to use, and we
<hr> collect minimal required data (your username, e-mail and necessary API
</div> tokens - not even your phone number*)
<div class="columns"> <br />
<div class="login-box column"> <small>* it's in the JWT, but we don't do anything with that</small>
<label class="label is-large">Login</label> </p>
<form method="POST" class="login-form"> <p class="paragraph">
<div class="field"> Made by <a href="https://selfisekai.rocks">selfisekai</a> and
<label for="login" class="label">Username</label> <a href="https://sdomi.pl">sdomi</a>. Please note that this is still
<div class="control"> Work in Progress.<br />Want to help? Check out
<input type="text" name="login" class="input" placeholder="dominika" required> <a href="https://git.sakamoto.pl/laudom/ocw">The Source</a>!
</div> </p>
</div> <hr />
<div class="field"> </div>
<label for="password" class="label">Password</label> <div class="columns">
<div class="control"> <div class="login-box column">
<input type="password" name="password" class="input" placeholder="***** ***" required> <label class="label is-large">Login</label>
</div> <form method="POST" class="login-form">
</div>
<div class="control">
<input type="submit" class="button" value="Login">
</div>
</form>
<div class="password-reset-open-box">
<span>Forgot your password?</span>
<button class="button is-light is-small">Reset it here.</button>
</div>
<div class="password-reset-box">
<form class="password-reset-form">
<div class="field"> <div class="field">
<label for="login" class="label">Username</label> <label for="login" class="label">Username</label>
<div class="control"> <div class="control">
<input type="login" name="login" class="input" placeholder="filip.grzywok" required> <input
type="text"
name="login"
class="input"
placeholder="dominika"
required
/>
</div>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input
type="password"
name="password"
class="input"
placeholder="***** ***"
required
/>
</div> </div>
</div> </div>
<div class="control"> <div class="control">
<input type="submit" class="button" value="Reset password"> <input type="submit" class="button" value="Login" />
</div>
</form>
<div class="password-reset-open-box">
<span>Forgot your password?</span>
<button class="button is-light is-small">Reset it here.</button>
</div>
<div class="password-reset-box">
<form class="password-reset-form">
<div class="field">
<label for="login" class="label">Username</label>
<div class="control">
<input
type="login"
name="login"
class="input"
placeholder="filip.grzywok"
required
/>
</div>
</div>
<div class="control">
<input type="submit" class="button" value="Reset password" />
</div>
</form>
</div>
</div>
<div class="password-reset-verify-box column">
<form class="password-reset-verify-form">
<div class="field">
<label for="hash" class="label">Verification code</label>
<div class="control">
<input
type="text"
name="hash"
class="input"
placeholder="aoeu"
required
/>
</div>
<p class="help">We've sent you that in an e-mail</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input
type="password"
name="password"
class="input"
placeholder="***** ***"
required
/>
</div>
</div>
<div class="control">
<input type="submit" class="button" value="Set password" />
</div> </div>
</form> </form>
</div> </div>
<div class="register-box column">
<label class="label is-large">Register</label>
<form method="POST" class="register-form">
<div class="field">
<label for="login" class="label">Username</label>
<div class="control">
<input
type="text"
name="login"
class="input"
placeholder="laura"
required
/>
</div>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input
type="password"
name="password"
class="input"
placeholder="***** ***"
required
/>
</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"
required
/>
</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">
<input
type="tel"
name="phone"
class="input"
placeholder="222922597"
required
/>
</div>
<p class="help">The one your packages are assigned to</p>
</div>
<div
class="h-captcha"
data-sitekey="06ade6bc-1e3f-42be-85d8-f578c2c9de90"
></div>
<div class="control">
<input type="submit" class="button" value="Register" />
</div>
</form>
</div>
<div class="mail-box column">
<label class="label is-large">E-mail verification</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 class="sms-box column">
<label class="label is-large">SMS verification</label>
<form method="POST" class="sms-form">
<div class="field">
<label for="code" class="label">SMS code</label>
<div class="control">
<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>
</div> </div>
<div class="password-reset-verify-box column"> <div class="areyousure-box modal">
<form class="password-reset-verify-form"> <div class="modal-background"></div>
<div class="field"> <div class="modal-card">
<label for="hash" class="label">Verification code</label> <header class="modal-card-head">
<div class="control"> <p class="modal-card-title">Are you sure?</p>
<input type="text" name="hash" class="input" placeholder="aoeu" required> <button class="delete" aria-label="close"></button>
</div> </header>
<p class="help">We've sent you that in an e-mail</p> <section class="modal-card-body">
</div> <p class="areyousure-text">
<div class="field"> The parcel locker will open even if you're not close to it, and
<label for="password" class="label">Password</label> so, anyone could take your package.
<div class="control"> </p>
<input type="password" name="password" class="input" placeholder="***** ***" required> </section>
</div> <footer class="modal-card-foot">
</div> <button class="areyousure-button button is-danger">
<div class="control"> Open locker
<input type="submit" class="button" value="Set password"> </button>
</div> <button class="areyousure-button-deny button">Cancel</button>
</form> </footer>
</div>
</div> </div>
<div class="register-box column"> <div class="error-box modal">
<label class="label is-large">Register</label> <div class="modal-background"></div>
<form method="POST" class="register-form"> <div class="modal-card">
<div class="field"> <header class="modal-card-head">
<label for="login" class="label">Username</label> <p class="modal-card-title">Error</p>
<div class="control"> <button class="delete" aria-label="close"></button>
<input type="text" name="login" class="input" placeholder="laura" required> </header>
</div> <section class="modal-card-body">
</div> <p class="error-box-text"></p>
<div class="field"> </section>
<label for="password" class="label">Password</label> <footer class="modal-card-foot">
<div class="control"> <button class="error-box-button button">OK</button>
<input type="password" name="password" class="input" placeholder="***** ***" required> </footer>
</div> </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" required>
</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">
<input type="tel" name="phone" class="input" placeholder="222922597" required>
</div>
<p class="help">The one your packages are assigned to</p>
</div>
<div class="h-captcha" data-sitekey="06ade6bc-1e3f-42be-85d8-f578c2c9de90"></div>
<div class="control">
<input type="submit" class="button" value="Register">
</div>
</form>
</div> </div>
<div class="mail-box column"> <div class="package-list container">
<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 class="sms-box column">
<label class="label is-large">SMS</label>
<form method="POST" class="sms-form">
<div class="field">
<label for="code" class="label">SMS code</label>
<div class="control">
<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>
</div>
<div class="areyousure-box modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Are you sure?</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="areyousure-text">The parcel locker will open even if you're not close to it, and so, anyone could take your package.</p>
</section>
<footer class="modal-card-foot">
<button class="areyousure-button button is-danger">Open locker</button>
<button class="areyousure-button-deny button">Cancel</button>
</footer>
</div>
</div>
<div class="error-box modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Error</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="error-box-text"></p>
</section>
<footer class="modal-card-foot">
<button class="error-box-button button">OK</button>
</footer>
</div>
</div>
<div class="package-list container">
<div class="table-container"> <div class="table-container">
<table class="table is-striped"> <table class="table is-striped">
<thead> <thead>
@ -202,35 +283,35 @@
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
</table> </table>
</div>
</div>
<div class="modal details-box">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Details</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="columns">
<div class="column">
<div id="map"></div>
</div>
<div class="column">
<table class="details-text table">
<tbody></tbody>
</table>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-primary">Open the locker</button>
</footer>
</div>
</div> </div>
</div> </div>
<div class="modal details-box"> <script src="assets/index.js"></script>
<div class="modal-background"></div> <script src="https://hcaptcha.com/1/api.js" async defer></script>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Details</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="columns">
<div class="column">
<div id="map"></div>
</div>
<div class="column">
<table class="details-text table">
<tbody></tbody>
</table>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-primary">Open the locker</button>
</footer>
</div>
</div>
</div>
<script src="assets/index.js"></script>
<script src="https://hcaptcha.com/1/api.js" async defer></script>
</body> </body>
</html> </html>