-
-
-
-
-
-
-
Discord 伺服器
-
-
-
-
-
-
\ No newline at end of file
+ const res = err.request.response;
+ alert(res);
+ });
+ };
+
+
+
diff --git a/src/scripts/login.js b/src/scripts/login.js
new file mode 100644
index 0000000..ca9ae64
--- /dev/null
+++ b/src/scripts/login.js
@@ -0,0 +1,80 @@
+/**
+ * @type {HTMLInputElement}
+ */
+const email = document.getElementById("email");
+const password = document.getElementById("password");
+const submit = document.getElementById("submit");
+
+document.getElementById("register").addEventListener("click", (e) => {
+ window.location.href = "./register.html";
+});
+
+submit.addEventListener("submit", (e) => {
+ email.setCustomValidity("");
+ password.setCustomValidity("");
+
+ const values = {
+ email : email.value,
+ pass : password.value,
+ };
+
+ email.disabled = true;
+ password.disabled = true;
+ submit.disabled = true;
+
+ fetch("https://exptech.com.tw/api/v1/et/login", {
+ method : "POST",
+ headers : {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ email : values.email,
+ pass : values.pass,
+ }),
+ })
+ .then(async res => {
+ if (res.ok) {window.location.href = `./user.html?token=${await res.text()}`;} else {
+ switch (await res.text()) {
+ case "Invaild email!": {
+ email.setCustomValidity("電子郵件地址無效。");
+ break;
+ }
+
+ case "Invaild pass!": {
+ password.setCustomValidity("密碼無效。");
+ break;
+ }
+
+ case "Pass error!": {
+ password.setCustomValidity("密碼錯誤。");
+ break;
+ }
+
+ case "This account was not found!": {
+ email.setCustomValidity("找不到此帳戶，可能尚未註冊。");
+ setTimeout(() => window.location.href = "./register.html", 5_000);
+ break;
+ }
+
+ default: {
+ console.error(res);
+ break;
+ }
+ }
+
+ email.disabled = false;
+ password.disabled = false;
+ submit.disabled = false;
+ email.reportValidity();
+ password.reportValidity();
+ }
+ })
+ .catch(err => {
+ console.error(err);
+ email.disabled = false;
+ password.disabled = false;
+ submit.disabled = false;
+ const res = err.request.response;
+ alert(res);
+ });
+});
\ No newline at end of file
diff --git a/src/stylesheets/login.scss b/src/stylesheets/login.scss
new file mode 100644
index 0000000..dfbfc75
--- /dev/null
+++ b/src/stylesheets/login.scss
@@ -0,0 +1,197 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
+
+:root {
+ --background: 285deg, 100%, 99%;
+ --on-background: 240deg, 7%, 11%;
+ --primary: 211deg, 100%, 37%;
+ --on-primary: 0deg, 0%, 100%;
+ --primary-container: 224deg, 100%, 92%;
+ --on-primary-container: 216deg, 100%, 13%;
+ --outline: 224deg, 5%, 48%;
+ --surface-variant: 230deg, 24%, 90%;
+ --on-surface-variant: 222deg, 7%, 29%;
+}
+
+body {
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ margin: 0;
+ height: 100svh;
+ line-height: 18px;
+ background-color: hsl(var(--background));
+ color: hsl(var(--on-background));
+ user-select: none;
+ font-family: "Noto Sans TC", sans-serif;
+ overflow-x: hidden;
+}
+
+.container {
+ width: 400px;
+ padding: 48px 36px;
+ padding-left: 28px;
+ background-color: hsla(var(--primary), 0.04);
+ outline: 1px solid hsl(var(--surface-variant));
+ box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+}
+
+.title {
+ font-size: 24px;
+ line-height: 26px;
+ font-weight: bold;
+ text-align: center;
+ margin-bottom: 8px;
+}
+
+.description {
+ text-align: center;
+ margin: 16px;
+}
+
+.login-form {
+ display: table;
+ margin: 0;
+ width: 100%;
+}
+
+.form-item-container {
+ margin-left: 8px;
+ margin-bottom: 48px;
+}
+
+.form-item {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 12px;
+}
+
+.form-item {
+ margin-bottom: 12px;
+}
+
+label {
+ font-size: 14px;
+ line-height: 16px;
+ padding: 8px 0;
+ color: hsl(var(--on-surface-variant));
+}
+
+input[type=text],
+input[type=password],
+input[type=email] {
+ all: unset;
+ flex: 1;
+ padding: 12px;
+ font-size: 14px;
+ line-height: 16px;
+ border-radius: 4px;
+ outline: 1px solid hsla(var(--outline), .4);
+ transition: outline .1s ease-in-out;
+
+ &:disabled {
+ outline: 1px solid hsla(var(--on-surface-variant), .12);
+ color: hsla(var(--on-surface-variant), .38);
+ cursor: not-allowed;
+ }
+
+ &:not(:disabled) {
+ &:hover {
+ outline-color: hsl(var(--on-surface-variant));
+ }
+
+ &:active {
+ opacity: 0.8;
+ }
+
+ &:focus {
+ outline: 2px solid hsl(var(--primary));
+ background-color: hsla(var(--primary), .08);
+ color: hsl(var(--on-primary-container));
+ }
+ }
+
+ &::placeholder {
+ color: hsla(var(--on-surface-variant), .6)
+ }
+}
+
+#register {
+ all: unset;
+ padding: 10px 8px;
+ background-color: transparent;
+ color: hsl(var(--primary));
+ border-radius: 4px;
+ font-size: 16px;
+ line-height: 18px;
+ font-weight: bold;
+ transition: background-color .1s ease-in-out,
+ opacity .1s ease-in-out;
+}
+
+#register:hover {
+ background-color: hsla(var(--primary), 0.12);
+}
+
+#submit {
+ all: unset;
+ padding: 10px 24px;
+ background-color: hsl(var(--primary));
+ color: hsl(var(--on-primary));
+ border-radius: 4px;
+ font-size: 16px;
+ line-height: 18px;
+ font-weight: bold;
+ float: right;
+ transition: opacity .1s ease-in-out;
+}
+
+#register:active,
+#submit:active,
+a:active {
+ opacity: 0.8;
+}
+
+.forget-password {
+ align-self: start;
+ font-size: 14px;
+ font-weight: bold;
+ margin: 12px 0;
+ color: hsl(var(--primary));
+ text-decoration: none;
+}
+
+.info {
+ display: inline-block;
+ margin: 16px;
+ font-size: 14px;
+ line-height: 16px;
+ color: hsla(var(--on-surface-variant), .6);
+ text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --background: 240deg, 7%, 11%;
+ --on-background: 255deg, 7%, 89%;
+ --primary: 220deg, 100%, 84%;
+ --on-primary: 213deg, 100%, 20%;
+ --primary-container: 212deg, 100%, 28%;
+ --on-primary-container: 224deg, 100%, 92%;
+ --outline: 229deg, 5%, 58%;
+ --surface-variant: 222deg, 7%, 29%;
+ --on-surface-variant: 230deg, 11%, 79%;
+ }
+
+ ::-ms-reveal {
+ filter: invert(100%);
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .container {
+ width: auto;
+ }
+}
\ No newline at end of file
diff --git a/src/user.css b/src/stylesheets/user.css
similarity index 100%
rename from src/user.css
rename to src/stylesheets/user.css
diff --git a/src/utils.css b/src/stylesheets/utils.css
similarity index 100%
rename from src/utils.css
rename to src/stylesheets/utils.css
diff --git a/src/user.html b/src/user.html
index f3f0926..3f813a6 100644
--- a/src/user.html
+++ b/src/user.html
@@ -8,7 +8,7 @@
-
+
From 2bc16cd5997dc1c03aca8563ef6cdc70acaa05f0 Mon Sep 17 00:00:00 2001
From: Kamiya <58339640+kamiya10@users.noreply.github.com>
Date: Fri, 14 Jul 2023 08:10:17 +0800
Subject: [PATCH 04/34] refactor: move into individual file
---
src/login.pug | 4 +-
src/register.html | 120 --
src/scripts/register.js | 117 ++
src/{ => scripts}/user.js | 0
src/stylesheets/components/input.scss | 46 +
src/stylesheets/login.scss | 66 +-
src/user.html | 1465 +++++++++++++++----------
7 files changed, 1083 insertions(+), 735 deletions(-)
create mode 100644 src/scripts/register.js
rename src/{ => scripts}/user.js (100%)
create mode 100644 src/stylesheets/components/input.scss
diff --git a/src/login.pug b/src/login.pug
index a3e0b81..a2da3b4 100644
--- a/src/login.pug
+++ b/src/login.pug
@@ -23,7 +23,9 @@ html(lang="zh-Hant")
meta(name="twitter:image", content="https://raw.githubusercontent.com/ExpTechTW/ExpTechTW.github.io/master/image/main/ExpTech.jpg")
link(rel="stylesheet", href="./stylesheets/login.scss")
-
+ link(rel="preconnect", href="https://fonts.googleapis.com")
+ link(rel="preconnect", href="https://fonts.gstatic.com", crossorigin)
+ link(href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap", rel="stylesheet")
body
main
div.container
diff --git a/src/register.html b/src/register.html
index 4b26b39..326bada 100644
--- a/src/register.html
+++ b/src/register.html
@@ -106,125 +106,5 @@
>Discord 伺服器
-
-
- 
-