Merge pull request #183 from wlmac/develop

Develop

Author: Trentiumz

public/resources/static/css/base.css

@@ -422,6 +422,17 @@ blockquote {
     list-style-type: inherit;
 }
 
+.deleted-notif{
+    background-color: var(--status-red);
+    text-align: center;
+    padding: 0.5em;
+}
+
+.deleted-notif span{
+    color: white;
+    font-size: 1.25em;
+}
+
 @media screen and (display-mode: standalone) {
     #back {
         display: flex;

public/resources/static/css/profile/update.css

@@ -1,3 +1,8 @@
+:root{
+    --delete-light: #c22727;
+    --delete-dark: #960000;
+}
+
 label {
     font-size: 14px;
 }
@@ -28,3 +33,42 @@ label {
 button {
     margin: 1rem 0;
 }
+
+.delete {
+    background-color: var(--delete-light) !important;
+}
+
+.delete:hover{
+    background-color: var(--delete-dark) !important;
+}
+
+.delete-container{
+    border: solid var(--status-red) 2px;
+    padding: 2em;
+}
+
+.delete-title{
+    margin-top: 0;
+}
+
+.delete-confirmation{
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    transition: all .2s;
+}
+
+.delete-confirmation .delete-box{
+    padding: 1em;
+    margin: auto;
+    background-color: white;
+    border: solid var(--status-red) 2px;
+    border-radius: 10px;
+    box-shadow: 3px 3px 5px;
+}
+
+.delete-confirmation span{
+    height: fit-content;
+}

src/components/account/profile/edit/index.tsx

@@ -21,15 +21,17 @@ export const ProfileEdit = (): JSX.Element => {
     const nav: NavigateFunction = useNavigate();
 
     const session: Session = React.useContext(SessionContext);
+    const [showDelete, setShowDelete] = React.useState<boolean>(false);
     let user: User = session.user;
 
     // Form
     const { register, handleSubmit, watch, reset, formState: { errors } } = useForm<Inputs>();
 
     React.useEffect(() => {
+        // console.log(user)
         if ("username" in user) {
-            console.log("User:", { ...session.user, graduating_year: session.user.graduating_year!.toString() });
-            reset({ ...session.user, graduating_year: session.user.graduating_year!.toString() });
+            // console.log("User:", { ...session.user, graduating_year: session.user.graduating_year?.toString() });
+            reset({ ...session.user, graduating_year: session.user.graduating_year?.toString() });
         }
     }, [session.user]);
 
@@ -42,6 +44,15 @@ export const ProfileEdit = (): JSX.Element => {
         });
     }
 
+    const deleteUser = () => {
+        session.request('post', `${Routes.USER}/me/delete`).then((res) => {
+            if(res.status === 200){
+                session.refreshUser();
+                nav(`/user/${user.username}`)
+            }
+        })
+    }
+
     // console.log(watch("graduating_year")) // watch input value by passing the name of it
     // console.log(user.timezone);
 
@@ -955,13 +966,13 @@ export const ProfileEdit = (): JSX.Element => {
 
                     <div className="field">
                         <div className="label"><label htmlFor="id_first_name">First name:</label></div>
-                        <span><input {...register("first_name")} type="text" name="first_name" value="Jimmy" maxLength={150} id="id_first_name" /><div data-lastpass-icon-root="true" style={{ position: "relative", height: "0px", width: "0px", float: "left" }}><template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" data-lastpass-icon="true" style={{ position: "absolute", cursor: "pointer", height: "22px", maxHeight: "22px", width: "22px", maxWidth: "22px", top: "11.5px", left: "154px", zIndex: "auto", color: "rgb(215, 64, 58)" }}><rect x="0.680176" y="0.763062" width="22.6392" height="22.4737" rx="4" fill="currentColor"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M19.7935 7.9516C19.7935 7.64414 20.0427 7.3949 20.3502 7.3949C20.6576 7.3949 20.9069 7.64414 20.9069 7.9516V16.0487C20.9069 16.3562 20.6576 16.6054 20.3502 16.6054C20.0427 16.6054 19.7935 16.3562 19.7935 16.0487V7.9516Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.76288 13.6577C5.68525 13.6577 6.43298 12.9154 6.43298 11.9998C6.43298 11.0842 5.68525 10.3419 4.76288 10.3419C3.8405 10.3419 3.09277 11.0842 3.09277 11.9998C3.09277 12.9154 3.8405 13.6577 4.76288 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3298 13.6577C11.2521 13.6577 11.9999 12.9154 11.9999 11.9998C11.9999 11.0842 11.2521 10.3419 10.3298 10.3419C9.4074 10.3419 8.65967 11.0842 8.65967 11.9998C8.65967 12.9154 9.4074 13.6577 10.3298 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8964 13.6577C16.8188 13.6577 17.5665 12.9154 17.5665 11.9998C17.5665 11.0842 16.8188 10.3419 15.8964 10.3419C14.974 10.3419 14.2263 11.0842 14.2263 11.9998C14.2263 12.9154 14.974 13.6577 15.8964 13.6577Z" fill="white"></path></svg></template></div></span>
+                        <span><input {...register("first_name")} type="text" name="first_name" value={`${user?.first_name}`} maxLength={150} id="id_first_name" /><div data-lastpass-icon-root="true" style={{ position: "relative", height: "0px", width: "0px", float: "left" }}><template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" data-lastpass-icon="true" style={{ position: "absolute", cursor: "pointer", height: "22px", maxHeight: "22px", width: "22px", maxWidth: "22px", top: "11.5px", left: "154px", zIndex: "auto", color: "rgb(215, 64, 58)" }}><rect x="0.680176" y="0.763062" width="22.6392" height="22.4737" rx="4" fill="currentColor"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M19.7935 7.9516C19.7935 7.64414 20.0427 7.3949 20.3502 7.3949C20.6576 7.3949 20.9069 7.64414 20.9069 7.9516V16.0487C20.9069 16.3562 20.6576 16.6054 20.3502 16.6054C20.0427 16.6054 19.7935 16.3562 19.7935 16.0487V7.9516Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.76288 13.6577C5.68525 13.6577 6.43298 12.9154 6.43298 11.9998C6.43298 11.0842 5.68525 10.3419 4.76288 10.3419C3.8405 10.3419 3.09277 11.0842 3.09277 11.9998C3.09277 12.9154 3.8405 13.6577 4.76288 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3298 13.6577C11.2521 13.6577 11.9999 12.9154 11.9999 11.9998C11.9999 11.0842 11.2521 10.3419 10.3298 10.3419C9.4074 10.3419 8.65967 11.0842 8.65967 11.9998C8.65967 12.9154 9.4074 13.6577 10.3298 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8964 13.6577C16.8188 13.6577 17.5665 12.9154 17.5665 11.9998C17.5665 11.0842 16.8188 10.3419 15.8964 10.3419C14.974 10.3419 14.2263 11.0842 14.2263 11.9998C14.2263 12.9154 14.974 13.6577 15.8964 13.6577Z" fill="white"></path></svg></template></div></span>
                     </div>
 
 
                     <div className="field">
                         <div className="label"><label htmlFor="id_last_name">Last name:</label></div>
-                        <span><input {...register("last_name")} type="text" name="last_name" value="Liu" maxLength={150} id="id_last_name" /><div data-lastpass-icon-root="true" style={{ position: "relative", height: "0px", width: "0px", float: "left" }}><template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" data-lastpass-icon="true" style={{ position: "absolute", cursor: "pointer", height: "22px", maxHeight: "22px", width: "22px", maxWidth: "22px", top: "11.5px", left: "154px", zIndex: "auto", color: "rgb(215, 64, 58)" }}><rect x="0.680176" y="0.763062" width="22.6392" height="22.4737" rx="4" fill="currentColor"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M19.7935 7.9516C19.7935 7.64414 20.0427 7.3949 20.3502 7.3949C20.6576 7.3949 20.9069 7.64414 20.9069 7.9516V16.0487C20.9069 16.3562 20.6576 16.6054 20.3502 16.6054C20.0427 16.6054 19.7935 16.3562 19.7935 16.0487V7.9516Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.76288 13.6577C5.68525 13.6577 6.43298 12.9154 6.43298 11.9998C6.43298 11.0842 5.68525 10.3419 4.76288 10.3419C3.8405 10.3419 3.09277 11.0842 3.09277 11.9998C3.09277 12.9154 3.8405 13.6577 4.76288 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3298 13.6577C11.2521 13.6577 11.9999 12.9154 11.9999 11.9998C11.9999 11.0842 11.2521 10.3419 10.3298 10.3419C9.4074 10.3419 8.65967 11.0842 8.65967 11.9998C8.65967 12.9154 9.4074 13.6577 10.3298 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8964 13.6577C16.8188 13.6577 17.5665 12.9154 17.5665 11.9998C17.5665 11.0842 16.8188 10.3419 15.8964 10.3419C14.974 10.3419 14.2263 11.0842 14.2263 11.9998C14.2263 12.9154 14.974 13.6577 15.8964 13.6577Z" fill="white"></path></svg></template></div></span>
+                        <span><input {...register("last_name")} type="text" name="last_name" value={`${user?.last_name}`} maxLength={150} id="id_last_name" /><div data-lastpass-icon-root="true" style={{ position: "relative", height: "0px", width: "0px", float: "left" }}><template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" data-lastpass-icon="true" style={{ position: "absolute", cursor: "pointer", height: "22px", maxHeight: "22px", width: "22px", maxWidth: "22px", top: "11.5px", left: "154px", zIndex: "auto", color: "rgb(215, 64, 58)" }}><rect x="0.680176" y="0.763062" width="22.6392" height="22.4737" rx="4" fill="currentColor"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M19.7935 7.9516C19.7935 7.64414 20.0427 7.3949 20.3502 7.3949C20.6576 7.3949 20.9069 7.64414 20.9069 7.9516V16.0487C20.9069 16.3562 20.6576 16.6054 20.3502 16.6054C20.0427 16.6054 19.7935 16.3562 19.7935 16.0487V7.9516Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.76288 13.6577C5.68525 13.6577 6.43298 12.9154 6.43298 11.9998C6.43298 11.0842 5.68525 10.3419 4.76288 10.3419C3.8405 10.3419 3.09277 11.0842 3.09277 11.9998C3.09277 12.9154 3.8405 13.6577 4.76288 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3298 13.6577C11.2521 13.6577 11.9999 12.9154 11.9999 11.9998C11.9999 11.0842 11.2521 10.3419 10.3298 10.3419C9.4074 10.3419 8.65967 11.0842 8.65967 11.9998C8.65967 12.9154 9.4074 13.6577 10.3298 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8964 13.6577C16.8188 13.6577 17.5665 12.9154 17.5665 11.9998C17.5665 11.0842 16.8188 10.3419 15.8964 10.3419C14.974 10.3419 14.2263 11.0842 14.2263 11.9998C14.2263 12.9154 14.974 13.6577 15.8964 13.6577Z" fill="white"></path></svg></template></div></span>
                     </div>
 
 
@@ -983,10 +994,25 @@ export const ProfileEdit = (): JSX.Element => {
             <!--     </span> -->
             <!-- </div> --> */}
                     <div style={{ display: "flex", alignItems: "center", "gap": "3px" }}>
-                        <button type="submit" className="btn">Submit</button>
-                        <NavLink to={`/user/${user.username}`} className="btn" role="button" aria-pressed="true">Cancel</NavLink>
+                        <button type="submit" className="btn btn-primary">Submit</button>
+                        <NavLink to={`/user/${user.username}`} className="btn btn-primary" role="button" aria-pressed="true">Cancel</NavLink>
                     </div>
                 </form>
+                <br />
+                {!session.user.is_deleted && <div className="delete-container">
+                    <h2 className="delete-title">Danger Zone</h2>
+                    <button className="delete btn-small btn-primary" style={{width: "100%"}} onClick={() => setShowDelete(true)}>Delete User</button>
+                </div>}
+
+                <div className="delete-confirmation" style={{display: "flex", flexDirection: "column", justifyContent: "center", visibility: showDelete ? "visible" : "hidden", opacity: showDelete ? "100%" : "0%"}} >
+                    <div className="delete-box" style={{display: "flex", flexDirection: "column"}}>
+                        <h3>Are you sure you want to delete this user?</h3>
+                        <span style={{display: "flex", flexDirection: "row", justifyContent: "right"}}>
+                            <button className="delete btn-small btn-primary" onClick={deleteUser}>YES</button>
+                            <button className="btn btn-small btn-primary" onClick={() => setShowDelete(false)}>No</button>
+                        </span>
+                    </div>
+                </div>
             </div>
         </>
     );

src/components/account/profile/index.tsx

@@ -12,6 +12,7 @@ export const Profile = (props: { children?: JSX.Element }): JSX.Element => {
     return (
         <LoginRequired>
             <>
+                <meta name="robots" content="noindex"></meta>
                 <link rel="stylesheet" href="/resources/static/css/profile/detail.css" />
                 <link rel="stylesheet" href="/resources/static/css/secondary.css" />
                 <div className="container">

src/components/account/profile/my-profile/index.tsx

@@ -5,6 +5,7 @@ import { NavigateFunction, useNavigate } from "react-router-dom";
 // Login Required
 export const MyProfile = (): JSX.Element => {
     const session: Session = React.useContext(SessionContext);
+    console.log(session)
     const nav: NavigateFunction = useNavigate();
 
     React.useEffect(() => {

src/components/announcements/index.tsx

@@ -8,7 +8,7 @@ import Organization from "../../util/core/interfaces/organization";
 import MembershipStatus from "../../util/core/misc/membership";
 import Media from "../../util/core/misc/media";
 import Tag from "../../util/core/interfaces/tag";
-import { getTags, TagElement, DeletableTagElement } from "../../util/core/tags";
+import { TagElement, DeletableTagElement } from "../../util/core/tags";
 import { Session, SessionContext, User } from "../../util/core/session";
 import UserField from '../../util/core/interfaces/post';
 import Routes from "../../util/core/misc/routes";

src/components/app/delete-component.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export const DeletionNotification = (props: {onRestore: ()=>void}): JSX.Element => {
+    return <div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", gap: "10px"}} className="deleted-notif">
+        <span>WARNING: Account will soon be deleted</span>
+        <button className="btn btn-primary" onClick={props.onRestore}>Restore</button>
+    </div>
+}

src/components/app/index.tsx

@@ -34,6 +34,9 @@ import { Theme, ThemeContext, ThemeProvider } from '../../util/core/client/theme
 import { NewCourse } from "../account/timetable/edit/new-course";
 import { LoginRequired } from "../../util/login-required";
 import { MyProfile } from "../account/profile/my-profile";
+import { DeletionNotification } from "./delete-component";
+
+import * as URLRoutes from "../../util/core/misc/routes";
 
 export const _App = (): JSX.Element => {
     const nav: NavigateFunction = useNavigate();
@@ -49,11 +52,21 @@ export const _App = (): JSX.Element => {
         window.scrollTo(0, 0);
     }, [location]);
 
+    const onRestore = (): void => {
+        session.request('post', `${URLRoutes.default.USER}/me/restore`).then((res) => {
+            session.refreshUser();
+            window.location.reload();
+        }).catch((err) => {
+            alert("failed to restore account - please contact us!")
+        })
+    }
+
     return (
         <>
             <link rel="stylesheet" href={theme.bannerPath} />
             <link rel="stylesheet" href={theme.palettePath} />
             <div className="page" style={{backgroundColor: "white"}}>
+                {session.user?.is_deleted ? <DeletionNotification onRestore={onRestore} /> : <></>}
                 <NavigationBar />
 
                 <div className="router-outlet">

src/components/app/navigation/index.tsx

@@ -4,6 +4,7 @@ import { Link, NavigateFunction, useNavigate } from "react-router-dom";
 import { getToken, loggedIn, logout } from "../../../util/core/AuthService";
 import { Session, SessionContext } from "../../../util/core/session";
 import { Theme, ThemeContext } from "../../../util/core/client/theme/ThemeContext";
+import Routes from "../../../util/core/misc/routes";
 
 export const NavigationBar = (): JSX.Element => {
     const nav: NavigateFunction = useNavigate();
@@ -66,6 +67,7 @@ export const NavigationBar = (): JSX.Element => {
                         <>
                             <li><NavLink href={`/user/${session.user.username}`} className="sidenav-close">Profile</NavLink></li>
                             <li><NavLink href={`/timetable`} className="sidenav-close">Timetable</NavLink></li>
+                            {(session.user?.is_superuser || session.user?.organizations_leading && session.user?.organizations_leading?.length > 0 || session.user?.organizations_supervising && session.user?.organizations_supervising?.length > 0) && <li tabIndex={0}><a href={`${Routes.BASEURL}/admin/`}>Admin</a></li>}
                             <li><a className="nav-link" onClick={(ev: React.MouseEvent) => {
                                 ev.preventDefault();
                                 logout();
@@ -143,7 +145,7 @@ export const NavigationBar = (): JSX.Element => {
                                     <ul id="dropdownAcc" className="dropdown-content" tabIndex={0}>
                                         <li tabIndex={0}><Link to={`/user/${session.user.username}`}>Profile</Link></li>
                                         <li tabIndex={0}><Link to="/timetable">Timetable</Link></li>
-                                        {session.user.is_staff && <li tabIndex={0}><a href="/admin/">Admin</a></li>}
+                                        {(session.user?.is_superuser || session.user?.organizations_leading && session.user?.organizations_leading?.length > 0 || session.user?.organizations_supervising && session.user?.organizations_supervising?.length > 0) && <li tabIndex={0}><a href={`${Routes.BASEURL}/admin/`}>Admin</a></li>}
                                         <li tabIndex={0}><Link to="/account/logout">Logout</Link></li>
                                     </ul>
                                 </>

src/components/blog/details/index.tsx

@@ -12,6 +12,7 @@ import { dateFormat } from "../../../util/core/misc/date";
 import { TagElement } from "../../../util/core/tags";
 import { loggedIn } from "../../../util/core/AuthService";
 import { NotFound } from "../../notfound";
+import { cleanUrl } from "../../../util/core/misc/tools";
 
 export const BlogDetails = (): JSX.Element => {
     const { slug } = useParams();
@@ -34,7 +35,7 @@ export const BlogDetails = (): JSX.Element => {
             <link rel="stylesheet" href="/resources/static/css/blog-detail.css" />
             <div className="container">
                 <div className="card-container">
-                    <img className="card-image" src={post.featured_image+"?w=800&fmt=webp"} />
+                    <img className="card-image" src={cleanUrl(post.featured_image)} />
                     <div className="tag-section">
                         {
                             tags.map((tag: Tag) => {

src/components/blog/index.tsx

@@ -9,10 +9,11 @@ import Media from "../../util/core/misc/media";
 import MembershipStatus from "../../util/core/misc/membership";
 import Routes from "../../util/core/misc/routes";
 import { Session, SessionContext, User } from "../../util/core/session";
-import { getTags, TagElement } from "../../util/core/tags";
+import { TagElement } from "../../util/core/tags";
 import Markdown, { markdownToPlainText } from "../markdown";
 import { loggedIn } from "../../util/core/AuthService";
 import { dateFormat } from "../../util/core/misc/date";
+import { cleanUrl } from "../../util/core/misc/tools";
 
 const BLOG_FETCHLIMIT = 10; // how many anns to fetch each api request
 
@@ -119,7 +120,7 @@ const BlogPostElement = (props: { post: BlogPost, tags: Array<Tag> }): JSX.Eleme
         <>
             <div className="card">
                 <div className="card-headers">
-                    <img className="card-image" src={post.featured_image+"?w=800&fmt=webp"} />
+                    <img className="card-image" src={cleanUrl(post.featured_image)} />
                     <div className="card-text">
                         <div className="tag-section">
                             {