diff options
| -rw-r--r-- | api/user/updateStatus.py | 27 | ||||
| -rw-r--r-- | components/ui.tsx | 1 | ||||
| -rw-r--r-- | pages/search.tsx | 2 | ||||
| -rw-r--r-- | pages/user.tsx | 28 | ||||
| -rw-r--r-- | styles/global.css | 11 |
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; +} + |