can edit status now :tada:

5 files changed, 66 insertions, 3 deletions

diff --git a/api/user/updateStatus.py b/api/user/updateStatus.py
new file mode 100644
index 0000000..de32e95
--- /dev/null
+++ b/api/user/updateStatus.py
@@ -0,0 +1,27 @@
+from flask import Blueprint, request
+from db import cursor, connection
+from auth.login_token import token_login
+import json
+
+updateStatus = Blueprint('updateStatus', __name__)
+
+@updateStatus.route('/updateStatus', methods = ['POST'])
+def index():
+    data = request.get_json()
+
+    status = data.get("status") or ""
+    token = request.cookies.get("token") or ""
+
+    if not token: return "", 401
+    login = token_login(token) or ""
+
+    if not login: return "", 403
+    if not status: return "", 400
+
+    cursor.execute("update users set status = ? where user_id = ?", [status[0:200], login])
+    connection.commit()
+
+    return "", 200
+
+dynamic_route = ["/user", updateStatus]
+
diff --git a/components/ui.tsx b/components/ui.tsx
index 8fa9657..7f10424 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -56,6 +56,7 @@ export function Button(props: {
 		position: "relative",
 		textDecoration: "none",
 		display: "block",
+		userSelect: "none",
 		...props.style
 	}}>
 	{ 
diff --git a/pages/search.tsx b/pages/search.tsx
index e2825e8..92de828 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -41,7 +41,7 @@ function SearchResult(props: { user: userInfo }) {
 				left: 48 + 12
 			}}>
 				<b>{props.user.username}</b>
-				<p>{props.user.status || "Hey daar!, ik ben nieuw op deze website en heb nog geen status."}</p>
+				<p>{props.user.status}</p>
 			</div>
 		</div>
 	</Vierkant>;
diff --git a/pages/user.tsx b/pages/user.tsx
index f190efd..1b6c2e3 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -16,6 +16,7 @@ import ArrowUpwardOutlinedIcon from '@material-ui/icons/ArrowUpwardOutlined';
 import PeopleOutlineOutlinedIcon from '@material-ui/icons/PeopleOutlineOutlined';
 import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined';
+import DoneOutlinedIcon from '@material-ui/icons/DoneOutlined';
 import {
 	mdiAccountCancelOutline,
 	mdiEqual,
@@ -72,6 +73,8 @@ export default function AccountPage() {
 	var [ownPage, setOwnPage] = useState(false);
 	var [gameInfo, setGameInfo] = useState<userGames>();
 
+	var [editingStatus, setEditingStatus] = useState(false);
+
 	useEffect(() => {(async() => {
 		if (gotData) return;
 		if (typeof window === "undefined") return;
@@ -130,7 +133,10 @@ export default function AccountPage() {
 					width: "calc(100% - 128px - 12px)"
 				}}>
 					<h2 style={{ fontSize: 32 }}>{user?.username}</h2>
-					<p style={{ marginTop: 6 }}>{user?.status}</p>
+					<p id="status" contentEditable={editingStatus ? "true" : "false"} style={{
+						marginTop: 6,
+						transitionDuration: ".3s"
+					}}>{user?.status}</p>
 				</div>
 				<div style={{
 					position: "absolute",
@@ -142,7 +148,25 @@ export default function AccountPage() {
 						ownPage ?
 						<div>
 							<IconLabelButton icon={<SettingsOutlinedIcon/>} href="/settings" text="Instellingen"/>
-							<IconLabelButton icon={<EditOutlinedIcon/>} text="Status bewerken"/>
+							{
+								!editingStatus ?
+								<IconLabelButton
+								icon={<EditOutlinedIcon/>}
+								text="Status bewerken"
+								onclick={() => setEditingStatus(true)}/> :
+								<IconLabelButton
+								icon={<DoneOutlinedIcon/>}
+								text="Status opslaan"
+								onclick={() => {
+									setEditingStatus(false)
+									axios.request({
+										method: "post",
+										url: `/api/user/updateStatus`,
+										headers: {"content-type": "application/json"},
+										data: { "status": document.getElementById("status").innerText }
+									});
+								}}/>
+							}
 						</div> :
 						<div>
 							<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/>
diff --git a/styles/global.css b/styles/global.css
index 03f329e..34c1b0d 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -79,3 +79,14 @@ input::placeholder { opacity: .75; }
 input.dark::placeholder { color: var(--text); }
 input.light::placeholder { color: var(--text-alt); }
 
+/* editable field status */
+*[contenteditable] { border-color: var(--background-alt); }
+*[contenteditable="true"]:focus { border-color: var(--disk-a); }
+*[contenteditable="true"] {
+	background-color: var(--page-background);
+	padding: 6px;
+	border-radius: 6px;
+	border-style: solid;
+	border-width: 2px;
+}
+