fix formatting in a few files (spaces vs tabs)
This commit is contained in:
spiral
parent
d2550b4c3c
commit
1d51b2333b
86
src/App.js
86
src/App.js
@ -17,51 +17,51 @@ import Navbar from './Components/Navbar.js'
|
|||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [isSubmit, setIsSubmit] = useState(false);
|
const [isSubmit, setIsSubmit] = useState(false);
|
||||||
const [isInvalid, setIsInvalid] = useState(false);
|
const [isInvalid, setIsInvalid] = useState(false);
|
||||||
|
|
||||||
const [, updateState] = useState();
|
const [, updateState] = useState();
|
||||||
const forceUpdate = useCallback(() => updateState({}), []);
|
const forceUpdate = useCallback(() => updateState({}), []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (localStorage.getItem("pk-darkmode")) {
|
if (localStorage.getItem("pk-darkmode")) {
|
||||||
document.body.classList.add('dark-mode')
|
document.body.classList.add('dark-mode')
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
document.body.classList.remove('dark-mode')
|
document.body.classList.remove('dark-mode')
|
||||||
}
|
}
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
|
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
|
||||||
<Router history={history}>
|
<Router history={history}>
|
||||||
<Navbar forceUpdate={forceUpdate} setIsSubmit={setIsSubmit} />
|
<Navbar forceUpdate={forceUpdate} setIsSubmit={setIsSubmit} />
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<BS.Container>
|
<BS.Container>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/dash">
|
<Route path="/dash">
|
||||||
{ !localStorage.getItem('token') || isInvalid ? <Redirect to="/"/> : <Dash />
|
{ !localStorage.getItem('token') || isInvalid ? <Redirect to="/"/> : <Dash />
|
||||||
}
|
}
|
||||||
</Route>
|
</Route>
|
||||||
<Route exact path="/">
|
<Route exact path="/">
|
||||||
<Home forceUpdate={forceUpdate} isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
|
<Home forceUpdate={forceUpdate} isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/profile">
|
<Route path="/profile">
|
||||||
<Public />
|
<Public />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/settings">
|
<Route path="/settings">
|
||||||
<Settings forceUpdate={forceUpdate}/>
|
<Settings forceUpdate={forceUpdate}/>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/template">
|
<Route path="/template">
|
||||||
<Template/>
|
<Template/>
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
</BS.Container>
|
</BS.Container>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Router>
|
</Router>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,148 +8,148 @@ import "moment-timezone";
|
|||||||
import API_URL from "../../../Constants/constants.js";
|
import API_URL from "../../../Constants/constants.js";
|
||||||
|
|
||||||
const EditSystem = ({
|
const EditSystem = ({
|
||||||
name,
|
name,
|
||||||
tag,
|
tag,
|
||||||
timezone,
|
timezone,
|
||||||
avatar,
|
avatar,
|
||||||
banner,
|
banner,
|
||||||
editDesc,
|
editDesc,
|
||||||
setEditMode,
|
setEditMode,
|
||||||
setErrorAlert,
|
setErrorAlert,
|
||||||
user,
|
user,
|
||||||
setUser,
|
setUser,
|
||||||
setErrorMessage
|
setErrorMessage
|
||||||
}) => {
|
}) => {
|
||||||
const [invalidTimezone, setInvalidTimezone] = useState(false);
|
const [invalidTimezone, setInvalidTimezone] = useState(false);
|
||||||
|
|
||||||
const { register: registerEdit, handleSubmit: handleSubmitEdit } = useForm();
|
const { register: registerEdit, handleSubmit: handleSubmitEdit } = useForm();
|
||||||
|
|
||||||
const submitEdit = (data) => {
|
const submitEdit = (data) => {
|
||||||
if (data.tz) {
|
if (data.tz) {
|
||||||
if (!moment.tz.zone(data.tz)) {
|
if (!moment.tz.zone(data.tz)) {
|
||||||
setInvalidTimezone(true);
|
setInvalidTimezone(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
fetch(`${API_URL}s`, {
|
fetch(`${API_URL}s`, {
|
||||||
method: "PATCH",
|
method: "PATCH",
|
||||||
body: JSON.stringify(data),
|
body: JSON.stringify(data),
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
Authorization: localStorage.getItem("token"),
|
Authorization: localStorage.getItem("token"),
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (!res.ok)
|
if (!res.ok)
|
||||||
throw new Error('HTTP Status ' + res.status)
|
throw new Error('HTTP Status ' + res.status)
|
||||||
return res.json();
|
return res.json();
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
setUser((prevState) => {
|
setUser((prevState) => {
|
||||||
return { ...prevState, ...data };
|
return { ...prevState, ...data };
|
||||||
});
|
});
|
||||||
localStorage.setItem("user", JSON.stringify(user));
|
localStorage.setItem("user", JSON.stringify(user));
|
||||||
setEditMode(false);
|
setEditMode(false);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
setErrorMessage(error.message);
|
setErrorMessage(error.message);
|
||||||
if (error.message === 'HTTP Status 401') {
|
if (error.message === 'HTTP Status 401') {
|
||||||
setErrorMessage("Your token is invalid, please log out and enter a new token.")
|
setErrorMessage("Your token is invalid, please log out and enter a new token.")
|
||||||
};
|
};
|
||||||
if (error.message === 'HTTP Status 500') {
|
if (error.message === 'HTTP Status 500') {
|
||||||
setErrorMessage("500: Internal server error.")
|
setErrorMessage("500: Internal server error.")
|
||||||
}
|
}
|
||||||
setErrorAlert(true);
|
setErrorAlert(true);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BS.Form onSubmit={handleSubmitEdit(submitEdit)}>
|
<BS.Form onSubmit={handleSubmitEdit(submitEdit)}>
|
||||||
<BS.Form.Text className="mb-4">
|
<BS.Form.Text className="mb-4">
|
||||||
<b>Note:</b> if you refresh the page, the old data might show up again,
|
<b>Note:</b> if you refresh the page, the old data might show up again,
|
||||||
this is due to the bot caching data.
|
this is due to the bot caching data.
|
||||||
<br />
|
<br />
|
||||||
Try editing a member to clear the cache, or wait a few minutes before
|
Try editing a member to clear the cache, or wait a few minutes before
|
||||||
refreshing.
|
refreshing.
|
||||||
</BS.Form.Text>
|
</BS.Form.Text>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Name:</BS.Form.Label>
|
<BS.Form.Label>Name:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
name="name"
|
name="name"
|
||||||
{...registerEdit("name")}
|
{...registerEdit("name")}
|
||||||
defaultValue={name}
|
defaultValue={name}
|
||||||
/>
|
/>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Tag:</BS.Form.Label>
|
<BS.Form.Label>Tag:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
name="tag"
|
name="tag"
|
||||||
{...registerEdit("tag")}
|
{...registerEdit("tag")}
|
||||||
defaultValue={tag}
|
defaultValue={tag}
|
||||||
/>
|
/>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Timezone:</BS.Form.Label>
|
<BS.Form.Label>Timezone:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
name="tz"
|
name="tz"
|
||||||
{...registerEdit("tz")}
|
{...registerEdit("tz")}
|
||||||
defaultValue={timezone}
|
defaultValue={timezone}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
{invalidTimezone ? (
|
{invalidTimezone ? (
|
||||||
<BS.Form.Text>
|
<BS.Form.Text>
|
||||||
Please enter a valid
|
Please enter a valid
|
||||||
<a
|
<a
|
||||||
href="https://xske.github.io/tz/"
|
href="https://xske.github.io/tz/"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
timezone
|
timezone
|
||||||
</a>
|
</a>
|
||||||
</BS.Form.Text>
|
</BS.Form.Text>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Avatar url:</BS.Form.Label>
|
<BS.Form.Label>Avatar url:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
type="url"
|
type="url"
|
||||||
name="avatar_url"
|
name="avatar_url"
|
||||||
{...registerEdit("avatar_url")}
|
{...registerEdit("avatar_url")}
|
||||||
defaultValue={avatar}
|
defaultValue={avatar}
|
||||||
/>
|
/>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Banner url:</BS.Form.Label>
|
<BS.Form.Label>Banner url:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
type="url"
|
type="url"
|
||||||
name="banner"
|
name="banner"
|
||||||
{...registerEdit("banner")}
|
{...registerEdit("banner")}
|
||||||
defaultValue={banner}
|
defaultValue={banner}
|
||||||
/>
|
/>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<BS.Form.Group className="mt-3">
|
<BS.Form.Group className="mt-3">
|
||||||
<BS.Form.Label>Description:</BS.Form.Label>
|
<BS.Form.Label>Description:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
maxLength="1000"
|
maxLength="1000"
|
||||||
as="textarea"
|
as="textarea"
|
||||||
name="description"
|
name="description"
|
||||||
{...registerEdit("description")}
|
{...registerEdit("description")}
|
||||||
defaultValue={editDesc}
|
defaultValue={editDesc}
|
||||||
/>
|
/>
|
||||||
</BS.Form.Group>
|
</BS.Form.Group>
|
||||||
<BS.Button variant="light" onClick={() => setEditMode(false)}>
|
<BS.Button variant="light" onClick={() => setEditMode(false)}>
|
||||||
Cancel
|
Cancel
|
||||||
</BS.Button>{" "}
|
</BS.Button>{" "}
|
||||||
<BS.Button variant="primary" type="submit">
|
<BS.Button variant="primary" type="submit">
|
||||||
Submit
|
Submit
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EditSystem;
|
export default EditSystem;
|
||||||
|
|||||||
@ -6,113 +6,113 @@ import * as BS from "react-bootstrap";
|
|||||||
import API_URL from "../../../Constants/constants.js";
|
import API_URL from "../../../Constants/constants.js";
|
||||||
|
|
||||||
const EditSystemPrivacy = ({
|
const EditSystemPrivacy = ({
|
||||||
setErrorAlert,
|
setErrorAlert,
|
||||||
setUser,
|
setUser,
|
||||||
user,
|
user,
|
||||||
setPrivacyEdit,
|
setPrivacyEdit,
|
||||||
setErrorMessage
|
setErrorMessage
|
||||||
}) => {
|
}) => {
|
||||||
const { register: registerPrivacy, handleSubmit: handleSubmitPrivacy } =
|
const { register: registerPrivacy, handleSubmit: handleSubmitPrivacy } =
|
||||||
useForm();
|
useForm();
|
||||||
|
|
||||||
// submit privacy stuffs
|
// submit privacy stuffs
|
||||||
const submitPrivacy = (data) => {
|
const submitPrivacy = (data) => {
|
||||||
fetch(`${API_URL}s`, {
|
fetch(`${API_URL}s`, {
|
||||||
method: "PATCH",
|
method: "PATCH",
|
||||||
body: JSON.stringify(data),
|
body: JSON.stringify(data),
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
Authorization: localStorage.getItem("token"),
|
Authorization: localStorage.getItem("token"),
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (!res.ok)
|
if (!res.ok)
|
||||||
throw new Error('HTTP Status ' + res.status)
|
throw new Error('HTTP Status ' + res.status)
|
||||||
return res.json();
|
return res.json();
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
setUser((prevState) => {
|
setUser((prevState) => {
|
||||||
return { ...prevState, ...data };
|
return { ...prevState, ...data };
|
||||||
});
|
});
|
||||||
localStorage.setItem("user", JSON.stringify(user));
|
localStorage.setItem("user", JSON.stringify(user));
|
||||||
setPrivacyEdit(false);
|
setPrivacyEdit(false);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
setErrorMessage(error.message);
|
setErrorMessage(error.message);
|
||||||
if (error.message === 'HTTP Status 401') {
|
if (error.message === 'HTTP Status 401') {
|
||||||
setErrorMessage("Your token is invalid, please log out and enter a new token.")
|
setErrorMessage("Your token is invalid, please log out and enter a new token.")
|
||||||
};
|
};
|
||||||
if (error.message === 'HTTP Status 500') {
|
if (error.message === 'HTTP Status 500') {
|
||||||
setErrorMessage("500: Internal server error.")
|
setErrorMessage("500: Internal server error.")
|
||||||
}
|
}
|
||||||
setErrorAlert(true);
|
setErrorAlert(true);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BS.Form onSubmit={handleSubmitPrivacy(submitPrivacy)}>
|
<BS.Form onSubmit={handleSubmitPrivacy(submitPrivacy)}>
|
||||||
<hr />
|
<hr />
|
||||||
<h5>Editing privacy settings</h5>
|
<h5>Editing privacy settings</h5>
|
||||||
<BS.Form.Row className="mb-3 mb-lg-0">
|
<BS.Form.Row className="mb-3 mb-lg-0">
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Description:</BS.Form.Label>
|
<BS.Form.Label>Description:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
name="description_privacy"
|
name="description_privacy"
|
||||||
defaultValue={user.description_privacy}
|
defaultValue={user.description_privacy}
|
||||||
as="select"
|
as="select"
|
||||||
{...registerPrivacy("description_privacy")}
|
{...registerPrivacy("description_privacy")}
|
||||||
>
|
>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Member list:</BS.Form.Label>
|
<BS.Form.Label>Member list:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
name="member_list_privacy"
|
name="member_list_privacy"
|
||||||
defaultValue={user.member_list_privacy}
|
defaultValue={user.member_list_privacy}
|
||||||
as="select"
|
as="select"
|
||||||
{...registerPrivacy("member_list_privacy")}
|
{...registerPrivacy("member_list_privacy")}
|
||||||
>
|
>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Front:</BS.Form.Label>
|
<BS.Form.Label>Front:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
name="front_privacy"
|
name="front_privacy"
|
||||||
as="select"
|
as="select"
|
||||||
defaultValue={user.front_privacy}
|
defaultValue={user.front_privacy}
|
||||||
{...registerPrivacy("front_privacy")}
|
{...registerPrivacy("front_privacy")}
|
||||||
>
|
>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Front history:</BS.Form.Label>
|
<BS.Form.Label>Front history:</BS.Form.Label>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
name="front_history_privacy"
|
name="front_history_privacy"
|
||||||
defaultValue={user.front_history_privacy}
|
defaultValue={user.front_history_privacy}
|
||||||
as="select"
|
as="select"
|
||||||
{...registerPrivacy("front_history_privacy")}
|
{...registerPrivacy("front_history_privacy")}
|
||||||
>
|
>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<BS.Button variant="light" onClick={() => setPrivacyEdit(false)}>
|
<BS.Button variant="light" onClick={() => setPrivacyEdit(false)}>
|
||||||
Cancel
|
Cancel
|
||||||
</BS.Button>{" "}
|
</BS.Button>{" "}
|
||||||
<BS.Button variant="primary" type="submit">
|
<BS.Button variant="primary" type="submit">
|
||||||
Submit
|
Submit
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
<hr />
|
<hr />
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EditSystemPrivacy;
|
export default EditSystemPrivacy;
|
||||||
|
|||||||
@ -16,454 +16,454 @@ import { FaLink, FaLock, FaTrashAlt } from "react-icons/fa";
|
|||||||
|
|
||||||
export default function MemberCard(props) {
|
export default function MemberCard(props) {
|
||||||
|
|
||||||
const system = JSON.parse(localStorage.getItem('user'));
|
const system = JSON.parse(localStorage.getItem('user'));
|
||||||
const sysID = system.id;
|
const sysID = system.id;
|
||||||
const [member, setMember] = useState(props.member);
|
const [member, setMember] = useState(props.member);
|
||||||
|
|
||||||
const [ displayName, setDisplayName ] = useState("");
|
const [ displayName, setDisplayName ] = useState("");
|
||||||
const [ birthday, setBirthday ] = useState("");
|
const [ birthday, setBirthday ] = useState("");
|
||||||
const [ birthdate, setBirthdate ] = useState("");
|
const [ birthdate, setBirthdate ] = useState("");
|
||||||
const [ created, setCreated ] = useState("");
|
const [ created, setCreated ] = useState("");
|
||||||
const [ pronouns, setPronouns ] = useState("");
|
const [ pronouns, setPronouns ] = useState("");
|
||||||
const [ editPronouns, setEditPronouns ] = useState("");
|
const [ editPronouns, setEditPronouns ] = useState("");
|
||||||
const [ avatar, setAvatar ] = useState("");
|
const [ avatar, setAvatar ] = useState("");
|
||||||
const [ banner, setBanner ] = useState("");
|
const [ banner, setBanner ] = useState("");
|
||||||
const [ color, setColor ] = useState("");
|
const [ color, setColor ] = useState("");
|
||||||
const [ desc, setDesc ] = useState("");
|
const [ desc, setDesc ] = useState("");
|
||||||
const [ editDesc, setEditDesc ] = useState("");
|
const [ editDesc, setEditDesc ] = useState("");
|
||||||
const [ proxyTags, setProxyTags ] = useState(member.proxy_tags);
|
const [ proxyTags, setProxyTags ] = useState(member.proxy_tags);
|
||||||
|
|
||||||
const [ editMode, setEditMode ] = useState(false);
|
const [ editMode, setEditMode ] = useState(false);
|
||||||
const [ privacyEdit, setprivacyEdit ] = useState(false);
|
const [ privacyEdit, setprivacyEdit ] = useState(false);
|
||||||
const [ privacyView, setPrivacyView ] = useState(false);
|
const [ privacyView, setPrivacyView ] = useState(false);
|
||||||
const [ proxyView, setProxyView ] = useState(false);
|
const [ proxyView, setProxyView ] = useState(false);
|
||||||
const [ proxyEdit, setproxyEdit ] = useState(false);
|
const [ proxyEdit, setproxyEdit ] = useState(false);
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const closeModal = () => setOpen(false);
|
const closeModal = () => setOpen(false);
|
||||||
|
|
||||||
const [ errorAlert, setErrorAlert ] = useState(false);
|
const [ errorAlert, setErrorAlert ] = useState(false);
|
||||||
const [ wrongID, setWrongID ] = useState(false);
|
const [ wrongID, setWrongID ] = useState(false);
|
||||||
const [ memberDeleted, setMemberDeleted ] = useState(false);
|
const [ memberDeleted, setMemberDeleted ] = useState(false);
|
||||||
const [ errorMessage, setErrorMessage ] = useState("");
|
const [ errorMessage, setErrorMessage ] = useState("");
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register: registerEdit,
|
register: registerEdit,
|
||||||
handleSubmit: handleSubmitEdit,
|
handleSubmit: handleSubmitEdit,
|
||||||
setValue
|
setValue
|
||||||
} = useForm();
|
} = useForm();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register: registerPrivacy,
|
register: registerPrivacy,
|
||||||
handleSubmit: handleSubmitPrivacy
|
handleSubmit: handleSubmitPrivacy
|
||||||
} = useForm();
|
} = useForm();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register: registerDelete,
|
register: registerDelete,
|
||||||
handleSubmit: handleSubmitDelete
|
handleSubmit: handleSubmitDelete
|
||||||
} = useForm();
|
} = useForm();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register: registerProxy,
|
register: registerProxy,
|
||||||
handleSubmit: handleSubmitProxy,
|
handleSubmit: handleSubmitProxy,
|
||||||
} = useForm();
|
} = useForm();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
autosize(document.querySelectorAll('textarea'));
|
autosize(document.querySelectorAll('textarea'));
|
||||||
})
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { toHTML } = require('../../Functions/discord-parser.js');
|
const { toHTML } = require('../../Functions/discord-parser.js');
|
||||||
|
|
||||||
if (member.display_name) {
|
if (member.display_name) {
|
||||||
setDisplayName(member.display_name)
|
setDisplayName(member.display_name)
|
||||||
} else setDisplayName('')
|
} else setDisplayName('')
|
||||||
|
|
||||||
if (member.birthday) {
|
if (member.birthday) {
|
||||||
setBirthdate(member.birthday)
|
setBirthdate(member.birthday)
|
||||||
if (member.birthday.startsWith('0004-')) {
|
if (member.birthday.startsWith('0004-')) {
|
||||||
var bdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D');
|
var bdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D');
|
||||||
setBirthday(bdaymoment);
|
setBirthday(bdaymoment);
|
||||||
} else {
|
} else {
|
||||||
var birthdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY');
|
var birthdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY');
|
||||||
setBirthday(birthdaymoment);
|
setBirthday(birthdaymoment);
|
||||||
}
|
}
|
||||||
} else { setBirthday('');
|
} else { setBirthday('');
|
||||||
setBirthdate('');
|
setBirthdate('');
|
||||||
}
|
}
|
||||||
|
|
||||||
var createdmoment = moment(member.created).format('MMM D, YYYY');
|
var createdmoment = moment(member.created).format('MMM D, YYYY');
|
||||||
setCreated(createdmoment);
|
setCreated(createdmoment);
|
||||||
|
|
||||||
if (member.pronouns) {
|
if (member.pronouns) {
|
||||||
setPronouns(toHTML(member.pronouns));
|
setPronouns(toHTML(member.pronouns));
|
||||||
setEditPronouns(member.pronouns);
|
setEditPronouns(member.pronouns);
|
||||||
} else { setPronouns('');
|
} else { setPronouns('');
|
||||||
setEditPronouns('');
|
setEditPronouns('');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (member.avatar_url) {
|
if (member.avatar_url) {
|
||||||
var avatarsmall = member.avatar_url.replace('&format=jpeg', '');
|
var avatarsmall = member.avatar_url.replace('&format=jpeg', '');
|
||||||
setAvatar(avatarsmall.replace('?width=256&height=256', ''))
|
setAvatar(avatarsmall.replace('?width=256&height=256', ''))
|
||||||
} else setAvatar('')
|
} else setAvatar('')
|
||||||
|
|
||||||
if (member.color) {
|
if (member.color) {
|
||||||
setColor(member.color);
|
setColor(member.color);
|
||||||
} else setColor('');
|
} else setColor('');
|
||||||
|
|
||||||
if (member.banner) {
|
if (member.banner) {
|
||||||
setBanner(member.banner);
|
setBanner(member.banner);
|
||||||
} else setBanner("");
|
} else setBanner("");
|
||||||
|
|
||||||
if (member.description) {
|
if (member.description) {
|
||||||
setDesc(toHTML(member.description));
|
setDesc(toHTML(member.description));
|
||||||
setEditDesc(member.description);
|
setEditDesc(member.description);
|
||||||
} else { setDesc("(no description)");
|
} else { setDesc("(no description)");
|
||||||
setEditDesc("");
|
setEditDesc("");
|
||||||
}
|
}
|
||||||
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created, member.banner]);
|
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created, member.banner]);
|
||||||
|
|
||||||
function submitEditPatch(data) {
|
function submitEditPatch(data) {
|
||||||
fetch(`${API_URL}m/${member.id}`,{
|
fetch(`${API_URL}m/${member.id}`,{
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
body: JSON.stringify(data),
|
body: JSON.stringify(data),
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'Authorization': localStorage.getItem("token")
|
'Authorization': localStorage.getItem("token")
|
||||||
}}).then (res => {
|
}}).then (res => {
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
throw new Error('HTTP Status ' + res.status);
|
throw new Error('HTTP Status ' + res.status);
|
||||||
}
|
}
|
||||||
return res.json();
|
return res.json();
|
||||||
}
|
}
|
||||||
).then (data => {
|
).then (data => {
|
||||||
setMember(prevState => {return {...prevState, ...data}});
|
setMember(prevState => {return {...prevState, ...data}});
|
||||||
setErrorAlert(false);
|
setErrorAlert(false);
|
||||||
setEditMode(false);
|
setEditMode(false);
|
||||||
}
|
}
|
||||||
).catch (error => {
|
).catch (error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
setErrorMessage(error.message);
|
setErrorMessage(error.message);
|
||||||
if (error.message === 'HTTP Status 401') {
|
if (error.message === 'HTTP Status 401') {
|
||||||
setErrorMessage("401: Your token is invalid, please log out and enter a new token.")
|
setErrorMessage("401: Your token is invalid, please log out and enter a new token.")
|
||||||
};
|
};
|
||||||
if (error.message === 'HTTP Status 500') {
|
if (error.message === 'HTTP Status 500') {
|
||||||
setErrorMessage("500: Internal server error.")
|
setErrorMessage("500: Internal server error.")
|
||||||
}
|
}
|
||||||
setErrorAlert(true);
|
setErrorAlert(true);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitEdit = data => {
|
const submitEdit = data => {
|
||||||
props.edit(Object.assign(member, data));
|
props.edit(Object.assign(member, data));
|
||||||
submitEditPatch(data);
|
submitEditPatch(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitPrivacy = data => {
|
const submitPrivacy = data => {
|
||||||
props.edit(Object.assign(member, data));
|
props.edit(Object.assign(member, data));
|
||||||
submitEditPatch(data);
|
submitEditPatch(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteMember = data => {
|
const deleteMember = data => {
|
||||||
if (data.memberID !== member.id) {
|
if (data.memberID !== member.id) {
|
||||||
setWrongID(true);
|
setWrongID(true);
|
||||||
} else {
|
} else {
|
||||||
fetch(`${API_URL}m/${member.id}`,{
|
fetch(`${API_URL}m/${member.id}`,{
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': localStorage.getItem("token")
|
'Authorization': localStorage.getItem("token")
|
||||||
}}).then (() => {
|
}}).then (() => {
|
||||||
setErrorAlert(false);
|
setErrorAlert(false);
|
||||||
setMemberDeleted(true);
|
setMemberDeleted(true);
|
||||||
})
|
})
|
||||||
.catch (error => {
|
.catch (error => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
setErrorAlert(true);
|
setErrorAlert(true);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addProxyField() {
|
function addProxyField() {
|
||||||
setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] )
|
setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] )
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetProxyFields() {
|
function resetProxyFields() {
|
||||||
setproxyEdit(false);
|
setproxyEdit(false);
|
||||||
setProxyTags(member.proxy_tags);
|
setProxyTags(member.proxy_tags);
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitProxy = data => {
|
const submitProxy = data => {
|
||||||
|
|
||||||
const newdata = {proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))}
|
const newdata = {proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))}
|
||||||
props.edit(Object.assign(member, newdata));
|
props.edit(Object.assign(member, newdata));
|
||||||
|
|
||||||
fetch(`${API_URL}m/${member.id}`,{
|
fetch(`${API_URL}m/${member.id}`,{
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
body: JSON.stringify(newdata),
|
body: JSON.stringify(newdata),
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'Authorization': localStorage.getItem("token")
|
'Authorization': localStorage.getItem("token")
|
||||||
}}).then (res => res.json()
|
}}).then (res => res.json()
|
||||||
).then (data => {
|
).then (data => {
|
||||||
setMember(prevState => {return {...prevState, ...data}});
|
setMember(prevState => {return {...prevState, ...data}});
|
||||||
setProxyTags(data.proxy_tags);
|
setProxyTags(data.proxy_tags);
|
||||||
setErrorAlert(false);
|
setErrorAlert(false);
|
||||||
setproxyEdit(false);
|
setproxyEdit(false);
|
||||||
}
|
}
|
||||||
).catch (error => {
|
).catch (error => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
setErrorAlert(true);
|
setErrorAlert(true);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyLink() {
|
function copyLink() {
|
||||||
var link = `https://pk-webs.spectralitree.com/profile/${sysID}/${member.id}`
|
var link = `https://pk-webs.spectralitree.com/profile/${sysID}/${member.id}`
|
||||||
var textField = document.createElement('textarea')
|
var textField = document.createElement('textarea')
|
||||||
textField.innerText = link
|
textField.innerText = link
|
||||||
document.body.appendChild(textField);
|
document.body.appendChild(textField);
|
||||||
|
|
||||||
textField.select();
|
textField.select();
|
||||||
textField.setSelectionRange(0, 99999);
|
textField.setSelectionRange(0, 99999);
|
||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
||||||
|
|
||||||
document.body.removeChild(textField);
|
document.body.removeChild(textField);
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderCard() {
|
function renderCard() {
|
||||||
return (
|
return (
|
||||||
<BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
|
<BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
|
||||||
{ errorAlert ? <BS.Alert variant="danger">{errorMessage}</BS.Alert> : "" }
|
{ errorAlert ? <BS.Alert variant="danger">{errorMessage}</BS.Alert> : "" }
|
||||||
{ editMode ?
|
{ editMode ?
|
||||||
<>
|
<>
|
||||||
<BS.Form id='Edit' onSubmit={handleSubmitEdit(submitEdit)}>
|
<BS.Form id='Edit' onSubmit={handleSubmitEdit(submitEdit)}>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Name:</BS.Form.Label>
|
<BS.Form.Label>Name:</BS.Form.Label>
|
||||||
<BS.Form.Control name="name" {...registerEdit("name")} defaultValue={member.name} />
|
<BS.Form.Control name="name" {...registerEdit("name")} defaultValue={member.name} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Display name: </BS.Form.Label>
|
<BS.Form.Label>Display name: </BS.Form.Label>
|
||||||
<BS.Form.Control name="display_name" {...registerEdit("display_name")} defaultValue={displayName} />
|
<BS.Form.Control name="display_name" {...registerEdit("display_name")} defaultValue={displayName} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Birthday:</BS.Form.Label>
|
<BS.Form.Label>Birthday:</BS.Form.Label>
|
||||||
<BS.Form.Control pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" {...registerEdit("birthday")} defaultValue={birthdate}/>
|
<BS.Form.Control pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" {...registerEdit("birthday")} defaultValue={birthdate}/>
|
||||||
<BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
|
<BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
||||||
<BS.Form.Control as="textarea" rows="1" maxLength="100" name="pronouns" {...registerEdit("pronouns")} defaultValue={editPronouns} />
|
<BS.Form.Control as="textarea" rows="1" maxLength="100" name="pronouns" {...registerEdit("pronouns")} defaultValue={editPronouns} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Avatar url:</BS.Form.Label>
|
<BS.Form.Label>Avatar url:</BS.Form.Label>
|
||||||
<BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")} defaultValue={avatar} />
|
<BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")} defaultValue={avatar} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Banner url:</BS.Form.Label>
|
<BS.Form.Label>Banner url:</BS.Form.Label>
|
||||||
<BS.Form.Control type="url" name="banner" {...registerEdit("banner")} defaultValue={banner} />
|
<BS.Form.Control type="url" name="banner" {...registerEdit("banner")} defaultValue={banner} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Color:</BS.Form.Label>
|
<BS.Form.Label>Color:</BS.Form.Label>
|
||||||
<BS.Form.Control pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />
|
<BS.Form.Control pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />
|
||||||
<BS.Form.Text>(hexcode)</BS.Form.Text>
|
<BS.Form.Text>(hexcode)</BS.Form.Text>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<BS.Form.Group className="mt-3">
|
<BS.Form.Group className="mt-3">
|
||||||
<BS.Form.Label>Description:</BS.Form.Label><br/>
|
<BS.Form.Label>Description:</BS.Form.Label><br/>
|
||||||
{ localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
|
{ localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
|
||||||
<BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} defaultValue={editDesc}/>
|
<BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} defaultValue={editDesc}/>
|
||||||
</BS.Form.Group>
|
</BS.Form.Group>
|
||||||
<BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="danger" className="float-right" onClick={() => setOpen(o => !o)}>Delete</BS.Button>
|
<BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="danger" className="float-right" onClick={() => setOpen(o => !o)}>Delete</BS.Button>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
<Popup open={open} position="top-center" modal>
|
<Popup open={open} position="top-center" modal>
|
||||||
<BS.Container>
|
<BS.Container>
|
||||||
<BS.Card>
|
<BS.Card>
|
||||||
<BS.Card.Header>
|
<BS.Card.Header>
|
||||||
<h5><FaTrashAlt className="mr-3"/> Are you sure you want to delete {member.name}?</h5>
|
<h5><FaTrashAlt className="mr-3"/> Are you sure you want to delete {member.name}?</h5>
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
<BS.Card.Body>
|
<BS.Card.Body>
|
||||||
{ wrongID ? <BS.Alert variant="danger">Incorrect ID, please check the spelling.</BS.Alert> : "" }
|
{ wrongID ? <BS.Alert variant="danger">Incorrect ID, please check the spelling.</BS.Alert> : "" }
|
||||||
<p>If you're sure you want to delete this member, please enter the member ID ({member.id}) below.</p>
|
<p>If you're sure you want to delete this member, please enter the member ID ({member.id}) below.</p>
|
||||||
<BS.Form id='Delete' onSubmit={handleSubmitDelete(deleteMember)}>
|
<BS.Form id='Delete' onSubmit={handleSubmitDelete(deleteMember)}>
|
||||||
<BS.Form.Label>Member ID:</BS.Form.Label>
|
<BS.Form.Label>Member ID:</BS.Form.Label>
|
||||||
<BS.Form.Control className="mb-4" name="memberID" {...registerDelete("memberID", {required: true})} placeholder={member.id} />
|
<BS.Form.Control className="mb-4" name="memberID" {...registerDelete("memberID", {required: true})} placeholder={member.id} />
|
||||||
<BS.Button variant="danger" type="submit">Delete</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
|
<BS.Button variant="danger" type="submit">Delete</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Card.Body>
|
</BS.Card.Body>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
</BS.Container>
|
</BS.Container>
|
||||||
</Popup></>
|
</Popup></>
|
||||||
:
|
:
|
||||||
<>
|
<>
|
||||||
<BS.Row>
|
<BS.Row>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
|
||||||
{ member.display_name ?
|
{ member.display_name ?
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(displayName)}}></span> : <span dangerouslySetInnerHTML={{__html: displayName}}></span>}</BS.Col> : "" }
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(displayName)}}></span> : <span dangerouslySetInnerHTML={{__html: displayName}}></span>}</BS.Col> : "" }
|
||||||
{ member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
|
{ member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
|
||||||
{ member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(pronouns)}}></span> : <span dangerouslySetInnerHTML={{__html: pronouns}}></span>}</BS.Col> : "" }
|
{ member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(pronouns)}}></span> : <span dangerouslySetInnerHTML={{__html: pronouns}}></span>}</BS.Col> : "" }
|
||||||
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
|
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
|
||||||
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
|
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
|
||||||
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
|
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
|
||||||
{ privacyView || proxyView || !member.banner ? "" :
|
{ privacyView || proxyView || !member.banner ? "" :
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Banner:</b>{" "}
|
<b>Banner:</b>{" "}
|
||||||
<Popup
|
<Popup
|
||||||
trigger={
|
trigger={
|
||||||
<BS.Button
|
<BS.Button
|
||||||
variant="light"
|
variant="light"
|
||||||
size="sm"
|
size="sm"
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
}
|
}
|
||||||
className="banner"
|
className="banner"
|
||||||
modal
|
modal
|
||||||
>
|
>
|
||||||
{(close) => (
|
{(close) => (
|
||||||
<div className="text-center w-100" onClick={() => close()}>
|
<div className="text-center w-100" onClick={() => close()}>
|
||||||
<div className="m-auto" style={{maxWidth: '100%'}}>
|
<div className="m-auto" style={{maxWidth: '100%'}}>
|
||||||
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
|
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Popup>
|
</Popup>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
}
|
}
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
{ privacyEdit ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>
|
{ privacyEdit ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>
|
||||||
<hr/>
|
<hr/>
|
||||||
<h5>Editing privacy settings</h5>
|
<h5>Editing privacy settings</h5>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Visibility:</BS.Form.Label>
|
<BS.Form.Label>Visibility:</BS.Form.Label>
|
||||||
<BS.Form.Control name="visibility" defaultValue={member.visibility} as="select" {...registerPrivacy("visibility")}>
|
<BS.Form.Control name="visibility" defaultValue={member.visibility} as="select" {...registerPrivacy("visibility")}>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Name:</BS.Form.Label>
|
<BS.Form.Label>Name:</BS.Form.Label>
|
||||||
<BS.Form.Control name="name_privacy" defaultValue={member.name_privacy} as="select" {...registerPrivacy("name_privacy")}>
|
<BS.Form.Control name="name_privacy" defaultValue={member.name_privacy} as="select" {...registerPrivacy("name_privacy")}>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Description:</BS.Form.Label>
|
<BS.Form.Label>Description:</BS.Form.Label>
|
||||||
<BS.Form.Control name="description_privacy" defaultValue={member.description_privacy} as="select" {...registerPrivacy("description_privacy")}>
|
<BS.Form.Control name="description_privacy" defaultValue={member.description_privacy} as="select" {...registerPrivacy("description_privacy")}>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Avatar:</BS.Form.Label>
|
<BS.Form.Label>Avatar:</BS.Form.Label>
|
||||||
<BS.Form.Control name="avatar_privacy" defaultValue={member.avatar_privacy} as="select" {...registerPrivacy("avatar_privacy")}>
|
<BS.Form.Control name="avatar_privacy" defaultValue={member.avatar_privacy} as="select" {...registerPrivacy("avatar_privacy")}>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Birthday:</BS.Form.Label>
|
<BS.Form.Label>Birthday:</BS.Form.Label>
|
||||||
<BS.Form.Control name="birthday_privacy" defaultValue={member.birthday_privacy} as="select" {...registerPrivacy("birthday_privacy")}>
|
<BS.Form.Control name="birthday_privacy" defaultValue={member.birthday_privacy} as="select" {...registerPrivacy("birthday_privacy")}>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
||||||
<BS.Form.Control name="pronoun_privacy" defaultValue={member.pronoun_privacy} as="select" {...registerPrivacy("pronoun_privacy")}>
|
<BS.Form.Control name="pronoun_privacy" defaultValue={member.pronoun_privacy} as="select" {...registerPrivacy("pronoun_privacy")}>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-3" xs={12} lg={3}>
|
<BS.Col className="mb-3" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Meta:</BS.Form.Label>
|
<BS.Form.Label>Meta:</BS.Form.Label>
|
||||||
<BS.Form.Control name="metadata_privacy" defaultValue={member.metadata_privacy} as="select" {...registerPrivacy("metadata_privacy")}>
|
<BS.Form.Control name="metadata_privacy" defaultValue={member.metadata_privacy} as="select" {...registerPrivacy("metadata_privacy")}>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<BS.Button variant="light" onClick={() => setprivacyEdit(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>
|
<BS.Button variant="light" onClick={() => setprivacyEdit(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>
|
||||||
<hr/>
|
<hr/>
|
||||||
</BS.Form> : privacyView ? <><hr/>
|
</BS.Form> : privacyView ? <><hr/>
|
||||||
<h5>Viewing privacy settings</h5>
|
<h5>Viewing privacy settings</h5>
|
||||||
<BS.Row>
|
<BS.Row>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Visibility:</b> {member.visibility}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Visibility:</b> {member.visibility}</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Name: </b>{member.name_privacy}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Name: </b>{member.name_privacy}</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Description:</b> {member.description_privacy}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Description:</b> {member.description_privacy}</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Avatar:</b> {member.avatar_privacy}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Avatar:</b> {member.avatar_privacy}</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {member.birthday_privacy}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {member.birthday_privacy}</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> {member.pronoun_privacy}</BS.Col>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> {member.pronoun_privacy}</BS.Col>
|
||||||
<BS.Col className="mb-3" xs={12} lg={3}><b>Meta:</b> {member.metadata_privacy}</BS.Col>
|
<BS.Col className="mb-3" xs={12} lg={3}><b>Meta:</b> {member.metadata_privacy}</BS.Col>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
<BS.Button variant="light" onClick={() => setPrivacyView(false)}>Exit</BS.Button> <BS.Button variant="primary" onClick={() => setprivacyEdit(true)}>Edit</BS.Button>
|
<BS.Button variant="light" onClick={() => setPrivacyView(false)}>Exit</BS.Button> <BS.Button variant="primary" onClick={() => setprivacyEdit(true)}>Edit</BS.Button>
|
||||||
<hr/></> : "" }
|
<hr/></> : "" }
|
||||||
{ proxyEdit ?
|
{ proxyEdit ?
|
||||||
<><hr/>
|
<><hr/>
|
||||||
<h5>Editing proxy tags</h5>
|
<h5>Editing proxy tags</h5>
|
||||||
<BS.Form onSubmit={handleSubmitProxy(submitProxy)}>
|
<BS.Form onSubmit={handleSubmitProxy(submitProxy)}>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
{ proxyTags.map((item, index) => (
|
{ proxyTags.map((item, index) => (
|
||||||
<BS.Col key={index} className="mb-lg-2" xs={12} lg={6}>
|
<BS.Col key={index} className="mb-lg-2" xs={12} lg={6}>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.InputGroup className="ml-1 mr-1 mb-1">
|
<BS.InputGroup className="ml-1 mr-1 mb-1">
|
||||||
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} {...registerProxy(`proxy_tags[${index}].prefix`)}/>
|
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} {...registerProxy(`proxy_tags[${index}].prefix`)}/>
|
||||||
<BS.Form.Control style={{flex: '0 0 3.5em'}} as="textarea" rows="1" disabled placeholder='text'/>
|
<BS.Form.Control style={{flex: '0 0 3.5em'}} as="textarea" rows="1" disabled placeholder='text'/>
|
||||||
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} {...registerProxy(`proxy_tags[${index}].suffix`)}/>
|
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} {...registerProxy(`proxy_tags[${index}].suffix`)}/>
|
||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
))} <BS.Col className="mb-2" xs={12} lg={3}><BS.Button block variant="light" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>
|
))} <BS.Col className="mb-2" xs={12} lg={3}><BS.Button block variant="light" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<BS.Button variant="light" onClick={() => resetProxyFields()}>Exit</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>
|
<BS.Button variant="light" onClick={() => resetProxyFields()}>Exit</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>
|
||||||
</BS.Form><hr/></> : proxyView ?
|
</BS.Form><hr/></> : proxyView ?
|
||||||
<><hr/>
|
<><hr/>
|
||||||
<h5>Viewing proxy tags</h5>
|
<h5>Viewing proxy tags</h5>
|
||||||
<BS.Row className="mb-2">
|
<BS.Row className="mb-2">
|
||||||
{ proxyTags.length === 0 ? <BS.Col className="mb-lg-2"><b>No proxy tags set.</b></BS.Col> : proxyTags.map((proxytag, index) => <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}> <code>{proxytag.prefix}text{proxytag.suffix}</code></BS.Col> )}
|
{ proxyTags.length === 0 ? <BS.Col className="mb-lg-2"><b>No proxy tags set.</b></BS.Col> : proxyTags.map((proxytag, index) => <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}> <code>{proxytag.prefix}text{proxytag.suffix}</code></BS.Col> )}
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
<BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button> <BS.Button variant="primary" onClick={() => setproxyEdit(true)}>Edit</BS.Button>
|
<BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button> <BS.Button variant="primary" onClick={() => setproxyEdit(true)}>Edit</BS.Button>
|
||||||
<hr/></> : "" }
|
<hr/></> : "" }
|
||||||
<p><b>Description:</b></p>
|
<p><b>Description:</b></p>
|
||||||
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
|
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
|
||||||
{ !member.banner || !localStorage.getItem("bottombanners") ? "" :
|
{ !member.banner || !localStorage.getItem("bottombanners") ? "" :
|
||||||
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
|
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
|
||||||
}
|
}
|
||||||
{ proxyView ? "" : privacyEdit ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to={`dash/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></> }
|
{ proxyView ? "" : privacyEdit ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to={`dash/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></> }
|
||||||
</> } </BS.Card.Body>
|
</> } </BS.Card.Body>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
|
memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
|
||||||
<LazyLoad offset={100}>
|
<LazyLoad offset={100}>
|
||||||
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
||||||
<div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={
|
<div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={
|
||||||
<BS.Tooltip>
|
<BS.Tooltip>
|
||||||
Copy public link
|
Copy public link
|
||||||
</BS.Tooltip>
|
</BS.Tooltip>
|
||||||
}><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> :
|
}><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> :
|
||||||
<BS.Button variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }
|
<BS.Button variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }
|
||||||
{ localStorage.getItem('pagesonly') ?
|
{ localStorage.getItem('pagesonly') ?
|
||||||
<Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><b>{member.name}</b> ({member.id})</BS.Button></Link>
|
<Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><b>{member.name}</b> ({member.id})</BS.Button></Link>
|
||||||
: <BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id}> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
|
: <BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id}> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
|
||||||
{ member.avatar_url ? <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
|
{ member.avatar_url ? <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
|
||||||
{close => (
|
{close => (
|
||||||
<div className="text-center w-100 m-0" onClick={() => close()}>
|
<div className="text-center w-100 m-0" onClick={() => close()}>
|
||||||
<div className="m-auto" style={{maxWidth: '640px'}}>
|
<div className="m-auto" style={{maxWidth: '640px'}}>
|
||||||
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
|
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Popup> :
|
</Popup> :
|
||||||
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
|
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
{localStorage.getItem("expandcards") ? renderCard() : <BS.Accordion.Collapse eventKey={member.id}>
|
{localStorage.getItem("expandcards") ? renderCard() : <BS.Accordion.Collapse eventKey={member.id}>
|
||||||
{renderCard()}
|
{renderCard()}
|
||||||
</BS.Accordion.Collapse>}
|
</BS.Accordion.Collapse>}
|
||||||
</LazyLoad>
|
</LazyLoad>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,435 +14,435 @@ import { FaPlus } from "react-icons/fa";
|
|||||||
|
|
||||||
export default function Memberlist() {
|
export default function Memberlist() {
|
||||||
|
|
||||||
const { path } = useRouteMatch();
|
const { path } = useRouteMatch();
|
||||||
|
|
||||||
const user = JSON.parse(localStorage.getItem('user'));
|
const user = JSON.parse(localStorage.getItem('user'));
|
||||||
const userId = user.id;
|
const userId = user.id;
|
||||||
|
|
||||||
const [isLoading, setIsLoading ] = useState(false);
|
const [isLoading, setIsLoading ] = useState(false);
|
||||||
const [isError, setIsError ] = useState(false);
|
const [isError, setIsError ] = useState(false);
|
||||||
const [errorAlert, setErrorAlert ] = useState(false);
|
const [errorAlert, setErrorAlert ] = useState(false);
|
||||||
|
|
||||||
const [proxyView, setProxyView] = useState(false);
|
const [proxyView, setProxyView] = useState(false);
|
||||||
const [privacyView, setPrivacyView] = useState(false);
|
const [privacyView, setPrivacyView] = useState(false);
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [membersPerPage, setMembersPerPage] = useState(25);
|
const [membersPerPage, setMembersPerPage] = useState(25);
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const closeModal = () => setOpen(false);
|
const closeModal = () => setOpen(false);
|
||||||
|
|
||||||
const [members, setMembers ] = useState([]);
|
const [members, setMembers ] = useState([]);
|
||||||
|
|
||||||
const [searchBy, setSearchBy] = useState('name')
|
const [searchBy, setSearchBy] = useState('name')
|
||||||
const [privacyFilter, setPrivacyFilter] = useState('all')
|
const [privacyFilter, setPrivacyFilter] = useState('all')
|
||||||
const [sortBy, setSortBy] = useState('name')
|
const [sortBy, setSortBy] = useState('name')
|
||||||
const [sortOrder, setSortOrder] = useState('ascending')
|
const [sortOrder, setSortOrder] = useState('ascending')
|
||||||
|
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
const [proxyTags, setProxyTags] = useState([{
|
const [proxyTags, setProxyTags] = useState([{
|
||||||
prefix: "", suffix: ""
|
prefix: "", suffix: ""
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
const {register, handleSubmit, setValue: setTemplate} = useForm();
|
const {register, handleSubmit, setValue: setTemplate} = useForm();
|
||||||
|
|
||||||
const fetchMembers = useCallback( () => {
|
const fetchMembers = useCallback( () => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setIsError(false);
|
setIsError(false);
|
||||||
setMembersPerPage(localStorage.getItem("expandcards") ? 10 : 25);
|
setMembersPerPage(localStorage.getItem("expandcards") ? 10 : 25);
|
||||||
|
|
||||||
fetch(`${API_URL}s/${userId}/members`,{
|
fetch(`${API_URL}s/${userId}/members`,{
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': localStorage.getItem("token")
|
'Authorization': localStorage.getItem("token")
|
||||||
}}).then ( res => res.json()
|
}}).then ( res => res.json()
|
||||||
).then (data => {
|
).then (data => {
|
||||||
setMembers(data)
|
setMembers(data)
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
})
|
})
|
||||||
.catch (error => {
|
.catch (error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
setIsError(true);
|
setIsError(true);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
})
|
})
|
||||||
}, [userId])
|
}, [userId])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchMembers();
|
fetchMembers();
|
||||||
}, [fetchMembers])
|
}, [fetchMembers])
|
||||||
|
|
||||||
const indexOfLastMember = currentPage * membersPerPage;
|
const indexOfLastMember = currentPage * membersPerPage;
|
||||||
const indexOfFirstMember = indexOfLastMember - membersPerPage;
|
const indexOfFirstMember = indexOfLastMember - membersPerPage;
|
||||||
|
|
||||||
let Members = members.map(member => {
|
let Members = members.map(member => {
|
||||||
if (member.display_name) {
|
if (member.display_name) {
|
||||||
return {...member, displayName: member.display_name}
|
return {...member, displayName: member.display_name}
|
||||||
} return {...member, displayName: member.name}
|
} return {...member, displayName: member.name}
|
||||||
})
|
})
|
||||||
let Members1 = Members.map(member => {
|
let Members1 = Members.map(member => {
|
||||||
if (member.description) {
|
if (member.description) {
|
||||||
return {...member, desc: member.description}
|
return {...member, desc: member.description}
|
||||||
} return {...member, desc: "(no description)"}
|
} return {...member, desc: "(no description)"}
|
||||||
})
|
})
|
||||||
|
|
||||||
const currentMembers = Members1.filter(member => {
|
const currentMembers = Members1.filter(member => {
|
||||||
if (!value & privacyFilter === 'all') return true;
|
if (!value & privacyFilter === 'all') return true;
|
||||||
|
|
||||||
if (privacyFilter === 'private') {
|
if (privacyFilter === 'private') {
|
||||||
if (member.visibility !== 'private') {
|
if (member.visibility !== 'private') {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
} else if (privacyFilter === 'public') {
|
} else if (privacyFilter === 'public') {
|
||||||
if (member.visibility !== 'public') {
|
if (member.visibility !== 'public') {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (searchBy === 'name') {
|
if (searchBy === 'name') {
|
||||||
if (member.name.toLowerCase().includes(value.toLowerCase())) {
|
if (member.name.toLowerCase().includes(value.toLowerCase())) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
} else if (searchBy === 'display name') {
|
} else if (searchBy === 'display name') {
|
||||||
if (member.displayName.toLowerCase().includes(value.toLowerCase())) {
|
if (member.displayName.toLowerCase().includes(value.toLowerCase())) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
} else if (searchBy === 'description') {
|
} else if (searchBy === 'description') {
|
||||||
if (member.desc.toLowerCase().includes(value.toLowerCase())) {
|
if (member.desc.toLowerCase().includes(value.toLowerCase())) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
} else if (searchBy === 'ID') {
|
} else if (searchBy === 'ID') {
|
||||||
if (member.id.toLowerCase().includes(value.toLowerCase())) {
|
if (member.id.toLowerCase().includes(value.toLowerCase())) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
})
|
})
|
||||||
|
|
||||||
const active = currentPage;
|
const active = currentPage;
|
||||||
const pageAmount = Math.ceil(currentMembers.length / membersPerPage);
|
const pageAmount = Math.ceil(currentMembers.length / membersPerPage);
|
||||||
|
|
||||||
var sortMembers = currentMembers;
|
var sortMembers = currentMembers;
|
||||||
if (sortBy === 'name') {
|
if (sortBy === 'name') {
|
||||||
if (sortOrder === 'descending') {
|
if (sortOrder === 'descending') {
|
||||||
sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
||||||
} else sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
|
} else sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
|
||||||
}
|
}
|
||||||
else if (sortBy === 'display name') {
|
else if (sortBy === 'display name') {
|
||||||
if (sortOrder === 'descending') {
|
if (sortOrder === 'descending') {
|
||||||
sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
||||||
} else sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);
|
} else sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);
|
||||||
}
|
}
|
||||||
else if (sortBy === 'ID') {
|
else if (sortBy === 'ID') {
|
||||||
if (sortOrder === 'descending') {
|
if (sortOrder === 'descending') {
|
||||||
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
||||||
} else sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
|
} else sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
|
||||||
}
|
}
|
||||||
else if (sortBy === 'date created') {
|
else if (sortBy === 'date created') {
|
||||||
if (sortOrder === 'descending') {
|
if (sortOrder === 'descending') {
|
||||||
sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).reverse().slice(indexOfFirstMember, indexOfLastMember);
|
||||||
} else sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);
|
} else sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);
|
||||||
}
|
}
|
||||||
|
|
||||||
const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
|
const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
|
||||||
<MemberCard
|
<MemberCard
|
||||||
member={member}
|
member={member}
|
||||||
edit={memberEdit => setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}
|
edit={memberEdit => setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}
|
||||||
/>
|
/>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
);
|
);
|
||||||
|
|
||||||
function addProxyField() {
|
function addProxyField() {
|
||||||
setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] )
|
setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] )
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitMember = data => {
|
const submitMember = data => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
const newdata = data.proxy_tags ? {...data, proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))} : data
|
const newdata = data.proxy_tags ? {...data, proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))} : data
|
||||||
|
|
||||||
fetch(`${API_URL}m/`,{
|
fetch(`${API_URL}m/`,{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: JSON.stringify(newdata),
|
body: JSON.stringify(newdata),
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'Authorization': localStorage.getItem("token")
|
'Authorization': localStorage.getItem("token")
|
||||||
}}).then (res => res.json()
|
}}).then (res => res.json()
|
||||||
).then (data => {
|
).then (data => {
|
||||||
setErrorAlert(false);
|
setErrorAlert(false);
|
||||||
closeModal();
|
closeModal();
|
||||||
fetchMembers();
|
fetchMembers();
|
||||||
}
|
}
|
||||||
).catch (error => {
|
).catch (error => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
setErrorAlert(true);
|
setErrorAlert(true);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path={path}>
|
<Route exact path={path}>
|
||||||
<>
|
<>
|
||||||
<BS.Row className="mb-lg-3 justfiy-content-md-center">
|
<BS.Row className="mb-lg-3 justfiy-content-md-center">
|
||||||
<BS.Col xs={12} lg={3}>
|
<BS.Col xs={12} lg={3}>
|
||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.InputGroup className="mb-3">
|
<BS.InputGroup className="mb-3">
|
||||||
<BS.Form.Control disabled placeholder='Page length:'/>
|
<BS.Form.Control disabled placeholder='Page length:'/>
|
||||||
<BS.Form.Control as="select" defaultValue={localStorage.getItem("expandcards") ? 10 : 25} onChange={e => {
|
<BS.Form.Control as="select" defaultValue={localStorage.getItem("expandcards") ? 10 : 25} onChange={e => {
|
||||||
setMembersPerPage(e.target.value);
|
setMembersPerPage(e.target.value);
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
}}>
|
}}>
|
||||||
<option>10</option>
|
<option>10</option>
|
||||||
<option>25</option>
|
<option>25</option>
|
||||||
<option>50</option>
|
<option>50</option>
|
||||||
<option>100</option>
|
<option>100</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col xs={12} lg={3}>
|
<BS.Col xs={12} lg={3}>
|
||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.InputGroup className="mb-3">
|
<BS.InputGroup className="mb-3">
|
||||||
<BS.Form.Control disabled placeholder='Search by:'/>
|
<BS.Form.Control disabled placeholder='Search by:'/>
|
||||||
<BS.Form.Control as="select" defaultValue={searchBy} onChange={e => {
|
<BS.Form.Control as="select" defaultValue={searchBy} onChange={e => {
|
||||||
setSearchBy(e.target.value)
|
setSearchBy(e.target.value)
|
||||||
}}>
|
}}>
|
||||||
<option>name</option>
|
<option>name</option>
|
||||||
<option>display name</option>
|
<option>display name</option>
|
||||||
<option>description</option>
|
<option>description</option>
|
||||||
<option>ID</option>
|
<option>ID</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col xs={12} lg={3}>
|
<BS.Col xs={12} lg={3}>
|
||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.InputGroup className="mb-3">
|
<BS.InputGroup className="mb-3">
|
||||||
<BS.Form.Control disabled placeholder='Sort by:'/>
|
<BS.Form.Control disabled placeholder='Sort by:'/>
|
||||||
<BS.Form.Control as="select" defaultValue={sortBy} onChange={e => {
|
<BS.Form.Control as="select" defaultValue={sortBy} onChange={e => {
|
||||||
setSortBy(e.target.value)
|
setSortBy(e.target.value)
|
||||||
}}>
|
}}>
|
||||||
<option>name</option>
|
<option>name</option>
|
||||||
<option>display name</option>
|
<option>display name</option>
|
||||||
<option>ID</option>
|
<option>ID</option>
|
||||||
<option>date created</option>
|
<option>date created</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col xs={12} lg={3}>
|
<BS.Col xs={12} lg={3}>
|
||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.InputGroup className="mb-3">
|
<BS.InputGroup className="mb-3">
|
||||||
<BS.Form.Control disabled placeholder='Sort order:'/>
|
<BS.Form.Control disabled placeholder='Sort order:'/>
|
||||||
<BS.Form.Control as="select" defaultValue={sortOrder} onChange={e => {
|
<BS.Form.Control as="select" defaultValue={sortOrder} onChange={e => {
|
||||||
setSortOrder(e.target.value)
|
setSortOrder(e.target.value)
|
||||||
}}>
|
}}>
|
||||||
<option>ascending</option>
|
<option>ascending</option>
|
||||||
<option>descending</option>
|
<option>descending</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
<BS.Row className="justify-content-md-center">
|
<BS.Row className="justify-content-md-center">
|
||||||
<BS.Col xs={12} lg={3}>
|
<BS.Col xs={12} lg={3}>
|
||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.InputGroup className="mb-3">
|
<BS.InputGroup className="mb-3">
|
||||||
<BS.Form.Control disabled placeholder='Only show:'/>
|
<BS.Form.Control disabled placeholder='Only show:'/>
|
||||||
<BS.Form.Control as="select" defaultValue={privacyFilter} onChange={e => {
|
<BS.Form.Control as="select" defaultValue={privacyFilter} onChange={e => {
|
||||||
setPrivacyFilter(e.target.value)
|
setPrivacyFilter(e.target.value)
|
||||||
}}>
|
}}>
|
||||||
<option>all</option>
|
<option>all</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-3" xs={12} lg={7}>
|
<BS.Col className="mb-3" xs={12} lg={7}>
|
||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.Form.Control value={value} onChange={e => {setValue(e.target.value); setCurrentPage(1);}} placeholder={`Search by ${searchBy}`}/>
|
<BS.Form.Control value={value} onChange={e => {setValue(e.target.value); setCurrentPage(1);}} placeholder={`Search by ${searchBy}`}/>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-3" xs={12} lg={2}>
|
<BS.Col className="mb-3" xs={12} lg={2}>
|
||||||
<BS.Button type="primary" className="m-0" block onClick={() => fetchMembers()}>Refresh</BS.Button>
|
<BS.Button type="primary" className="m-0" block onClick={() => fetchMembers()}>Refresh</BS.Button>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
<BS.Row className="justify-content-md-center">
|
<BS.Row className="justify-content-md-center">
|
||||||
<BS.Pagination className="ml-auto mr-auto">
|
<BS.Pagination className="ml-auto mr-auto">
|
||||||
{ currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}
|
{ currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}
|
||||||
{ currentPage < 3 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>}
|
{ currentPage < 3 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>}
|
||||||
{ currentPage < 4 ? "" : currentPage < 5 ? <BS.Pagination.Item onClick={() => setCurrentPage(2)} active={2 === active}>{2}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
{ currentPage < 4 ? "" : currentPage < 5 ? <BS.Pagination.Item onClick={() => setCurrentPage(2)} active={2 === active}>{2}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
||||||
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : "" }
|
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : "" }
|
||||||
<BS.Pagination.Item onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>
|
<BS.Pagination.Item onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>
|
||||||
{ currentPage < pageAmount ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : "" }
|
{ currentPage < pageAmount ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : "" }
|
||||||
{ currentPage > pageAmount - 3 ? "" : currentPage === pageAmount - 3 ? <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount - 1)} active={pageAmount - 1 === active}>{pageAmount - 1}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
{ currentPage > pageAmount - 3 ? "" : currentPage === pageAmount - 3 ? <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount - 1)} active={pageAmount - 1 === active}>{pageAmount - 1}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
||||||
{ currentPage > pageAmount - 2 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>}
|
{ currentPage > pageAmount - 2 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>}
|
||||||
{ currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}
|
{ currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}
|
||||||
</BS.Pagination>
|
</BS.Pagination>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
{ isLoading ? <Loading /> : isError ?
|
{ isLoading ? <Loading /> : isError ?
|
||||||
<BS.Alert variant="danger">Error fetching members.</BS.Alert> :
|
<BS.Alert variant="danger">Error fetching members.</BS.Alert> :
|
||||||
<>
|
<>
|
||||||
<BS.Card className="w-100">
|
<BS.Card className="w-100">
|
||||||
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
||||||
<BS.Button variant="link" className="float-left" onClick={() => setOpen(o => !o)}><FaPlus className="mr-4"/>Add Member</BS.Button>
|
<BS.Button variant="link" className="float-left" onClick={() => setOpen(o => !o)}><FaPlus className="mr-4"/>Add Member</BS.Button>
|
||||||
<Popup open={open} position="top-center" modal>
|
<Popup open={open} position="top-center" modal>
|
||||||
<BS.Container>
|
<BS.Container>
|
||||||
<BS.Card>
|
<BS.Card>
|
||||||
<BS.Card.Header>
|
<BS.Card.Header>
|
||||||
<h5><FaPlus className="mr-3"/> Add member </h5>
|
<h5><FaPlus className="mr-3"/> Add member </h5>
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
<BS.Card.Body>
|
<BS.Card.Body>
|
||||||
{ errorAlert ? <BS.Alert variant="danger">Something went wrong, please try logging in and out again.</BS.Alert> : "" }
|
{ errorAlert ? <BS.Alert variant="danger">Something went wrong, please try logging in and out again.</BS.Alert> : "" }
|
||||||
<BS.Form onSubmit={handleSubmit(submitMember)}>
|
<BS.Form onSubmit={handleSubmit(submitMember)}>
|
||||||
<BS.Form.Text>
|
<BS.Form.Text>
|
||||||
</BS.Form.Text>
|
</BS.Form.Text>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Name:</BS.Form.Label>
|
<BS.Form.Label>Name:</BS.Form.Label>
|
||||||
<BS.Form.Control name="name"{...register("name")} defaultValue={''} required/>
|
<BS.Form.Control name="name"{...register("name")} defaultValue={''} required/>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Display name: </BS.Form.Label>
|
<BS.Form.Label>Display name: </BS.Form.Label>
|
||||||
<BS.Form.Control name="display_name" {...register("display_name")} defaultValue={''} />
|
<BS.Form.Control name="display_name" {...register("display_name")} defaultValue={''} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Birthday:</BS.Form.Label>
|
<BS.Form.Label>Birthday:</BS.Form.Label>
|
||||||
<BS.Form.Control pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" {...register("birthday")} defaultValue={''}/>
|
<BS.Form.Control pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" {...register("birthday")} defaultValue={''}/>
|
||||||
<BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
|
<BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
||||||
<BS.Form.Control as="textarea" rows="1" name="pronouns" {...register("pronouns")} defaultValue={''} />
|
<BS.Form.Control as="textarea" rows="1" name="pronouns" {...register("pronouns")} defaultValue={''} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Avatar url:</BS.Form.Label>
|
<BS.Form.Label>Avatar url:</BS.Form.Label>
|
||||||
<BS.Form.Control type="url" name="avatar_url" {...register("avatar_url")} defaultValue={''} />
|
<BS.Form.Control type="url" name="avatar_url" {...register("avatar_url")} defaultValue={''} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Banner url:</BS.Form.Label>
|
<BS.Form.Label>Banner url:</BS.Form.Label>
|
||||||
<BS.Form.Control type="url" name="banner" {...register("banner")} defaultValue={''} />
|
<BS.Form.Control type="url" name="banner" {...register("banner")} defaultValue={''} />
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Color:</BS.Form.Label>
|
<BS.Form.Label>Color:</BS.Form.Label>
|
||||||
<BS.Form.Control pattern="[A-Fa-f0-9]{6}" name="color" {...register("color")} defaultValue={''} />
|
<BS.Form.Control pattern="[A-Fa-f0-9]{6}" name="color" {...register("color")} defaultValue={''} />
|
||||||
<BS.Form.Text>(hexcode)</BS.Form.Text>
|
<BS.Form.Text>(hexcode)</BS.Form.Text>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={2}>
|
<BS.Col className="mb-lg-2" xs={12} lg={2}>
|
||||||
<BS.Form.Label>Proxy tags:</BS.Form.Label>
|
<BS.Form.Label>Proxy tags:</BS.Form.Label>
|
||||||
<BS.Button variant="primary" block onClick={() => setProxyView(view => !view)}> { proxyView ? "Hide" : "Show" }</BS.Button>
|
<BS.Button variant="primary" block onClick={() => setProxyView(view => !view)}> { proxyView ? "Hide" : "Show" }</BS.Button>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={2}>
|
<BS.Col className="mb-lg-2" xs={12} lg={2}>
|
||||||
<BS.Form.Label>Privacy settings:</BS.Form.Label>
|
<BS.Form.Label>Privacy settings:</BS.Form.Label>
|
||||||
<BS.Button variant="primary" block onClick={() => setPrivacyView(view => !view)}> { privacyView ? "Hide" : "Show" }</BS.Button>
|
<BS.Button variant="primary" block onClick={() => setPrivacyView(view => !view)}> { privacyView ? "Hide" : "Show" }</BS.Button>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<hr/>
|
<hr/>
|
||||||
{ proxyView ? <>
|
{ proxyView ? <>
|
||||||
<h5>Proxy Tags</h5>
|
<h5>Proxy Tags</h5>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
{ proxyTags.map((item, index) => (
|
{ proxyTags.map((item, index) => (
|
||||||
<BS.Col key={index} className="mb-lg-2" xs={12} lg={6}>
|
<BS.Col key={index} className="mb-lg-2" xs={12} lg={6}>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.InputGroup className="ml-1 mr-1 mb-1">
|
<BS.InputGroup className="ml-1 mr-1 mb-1">
|
||||||
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} {...register(`proxy_tags[${index}].prefix`)}/>
|
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} {...register(`proxy_tags[${index}].prefix`)}/>
|
||||||
<BS.Form.Control style={{flex: '0 0 3.5em'}} as="textarea" rows="1" disabled placeholder='text'/>
|
<BS.Form.Control style={{flex: '0 0 3.5em'}} as="textarea" rows="1" disabled placeholder='text'/>
|
||||||
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} {...register(`proxy_tags[${index}].suffix`)}/>
|
<BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} {...register(`proxy_tags[${index}].suffix`)}/>
|
||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
))} <BS.Col className="mb-lg-2" xs={12} lg={2}><BS.Button block variant="light" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>
|
))} <BS.Col className="mb-lg-2" xs={12} lg={2}><BS.Button block variant="light" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<hr/></> : "" }
|
<hr/></> : "" }
|
||||||
{ privacyView ? <><h5>privacy settings</h5>
|
{ privacyView ? <><h5>privacy settings</h5>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Visibility:</BS.Form.Label>
|
<BS.Form.Label>Visibility:</BS.Form.Label>
|
||||||
<BS.Form.Control name="visibility" as="select" {...register("visibility")} >
|
<BS.Form.Control name="visibility" as="select" {...register("visibility")} >
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Name:</BS.Form.Label>
|
<BS.Form.Label>Name:</BS.Form.Label>
|
||||||
<BS.Form.Control name="name_privacy" as="select" {...register("name_privacy")} >
|
<BS.Form.Control name="name_privacy" as="select" {...register("name_privacy")} >
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Description:</BS.Form.Label>
|
<BS.Form.Label>Description:</BS.Form.Label>
|
||||||
<BS.Form.Control name="description_privacy" as="select" {...register("description_privacy")} >
|
<BS.Form.Control name="description_privacy" as="select" {...register("description_privacy")} >
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Birthday:</BS.Form.Label>
|
<BS.Form.Label>Birthday:</BS.Form.Label>
|
||||||
<BS.Form.Control name="birthday_privacy" as="select" {...register("birthday_privacy")} >
|
<BS.Form.Control name="birthday_privacy" as="select" {...register("birthday_privacy")} >
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
<BS.Col className="mb-lg-2" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
<BS.Form.Label>Pronouns:</BS.Form.Label>
|
||||||
<BS.Form.Control name="pronoun_privacy" as="select" {...register("pronoun_privacy")} >
|
<BS.Form.Control name="pronoun_privacy" as="select" {...register("pronoun_privacy")} >
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-3" xs={12} lg={3}>
|
<BS.Col className="mb-3" xs={12} lg={3}>
|
||||||
<BS.Form.Label>Meta:</BS.Form.Label>
|
<BS.Form.Label>Meta:</BS.Form.Label>
|
||||||
<BS.Form.Control name="metadata_privacy" as="select" {...register("metadata_privacy")} >
|
<BS.Form.Control name="metadata_privacy" as="select" {...register("metadata_privacy")} >
|
||||||
<option>public</option>
|
<option>public</option>
|
||||||
<option>private</option>
|
<option>private</option>
|
||||||
</BS.Form.Control>
|
</BS.Form.Control>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<hr/></> : "" }
|
<hr/></> : "" }
|
||||||
<BS.Form.Group className="mt-3">
|
<BS.Form.Group className="mt-3">
|
||||||
<BS.Form.Label>Description:</BS.Form.Label><br/>
|
<BS.Form.Label>Description:</BS.Form.Label><br/>
|
||||||
{ localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
|
{ localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
|
||||||
<BS.Form.Control maxLength="1000" as="textarea" rows="7" name="description" {...register("description")} defaultValue={''}/>
|
<BS.Form.Control maxLength="1000" as="textarea" rows="7" name="description" {...register("description")} defaultValue={''}/>
|
||||||
</BS.Form.Group>
|
</BS.Form.Group>
|
||||||
<BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
|
<BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Card.Body>
|
</BS.Card.Body>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
</BS.Container>
|
</BS.Container>
|
||||||
</Popup>
|
</Popup>
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
|
|
||||||
<BS.Accordion className="mb-3 mt-3 w-100" defaultActiveKey="0">
|
<BS.Accordion className="mb-3 mt-3 w-100" defaultActiveKey="0">
|
||||||
{memberList}
|
{memberList}
|
||||||
</BS.Accordion>
|
</BS.Accordion>
|
||||||
<BS.Row className="justify-content-md-center">
|
<BS.Row className="justify-content-md-center">
|
||||||
<BS.Pagination className="ml-auto mr-auto">
|
<BS.Pagination className="ml-auto mr-auto">
|
||||||
{ currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}
|
{ currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}
|
||||||
{ currentPage < 3 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>}
|
{ currentPage < 3 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>}
|
||||||
{ currentPage < 4 ? "" : currentPage < 5 ? <BS.Pagination.Item onClick={() => setCurrentPage(2)} active={2 === active}>{2}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
{ currentPage < 4 ? "" : currentPage < 5 ? <BS.Pagination.Item onClick={() => setCurrentPage(2)} active={2 === active}>{2}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
||||||
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : "" }
|
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : "" }
|
||||||
<BS.Pagination.Item onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>
|
<BS.Pagination.Item onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>
|
||||||
{ currentPage < pageAmount ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : "" }
|
{ currentPage < pageAmount ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : "" }
|
||||||
{ currentPage > pageAmount - 3 ? "" : currentPage === pageAmount - 3 ? <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount - 1)} active={pageAmount - 1 === active}>{pageAmount - 1}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
{ currentPage > pageAmount - 3 ? "" : currentPage === pageAmount - 3 ? <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount - 1)} active={pageAmount - 1 === active}>{pageAmount - 1}</BS.Pagination.Item> : <BS.Pagination.Ellipsis disabled />}
|
||||||
{ currentPage > pageAmount - 2 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>}
|
{ currentPage > pageAmount - 2 ? "" : <BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>}
|
||||||
{ currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}
|
{ currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}
|
||||||
</BS.Pagination>
|
</BS.Pagination>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</>
|
</>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path={`${path}/:memberID`}>
|
<Route path={`${path}/:memberID`}>
|
||||||
{ isLoading ? <Loading/> :
|
{ isLoading ? <Loading/> :
|
||||||
<MemberPages members={members}
|
<MemberPages members={members}
|
||||||
edit={memberEdit => setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}/>}
|
edit={memberEdit => setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}/>}
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -13,266 +13,266 @@ import EditSystem from "./Edit/EditSystem.js";
|
|||||||
import EditSystemPrivacy from "./Edit/EditSystemPrivacy.js";
|
import EditSystemPrivacy from "./Edit/EditSystemPrivacy.js";
|
||||||
|
|
||||||
export default function System() {
|
export default function System() {
|
||||||
// match the url, if there's a member ID there, don't render this component at all
|
// match the url, if there's a member ID there, don't render this component at all
|
||||||
const match = useRouteMatch("/dash/:memberID");
|
const match = useRouteMatch("/dash/:memberID");
|
||||||
|
|
||||||
// get the user from the localstorage
|
// get the user from the localstorage
|
||||||
const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));
|
const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));
|
||||||
|
|
||||||
// bunch of useState stuff, used in the useEffect() hook below
|
// bunch of useState stuff, used in the useEffect() hook below
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [tag, setTag] = useState("");
|
const [tag, setTag] = useState("");
|
||||||
const [timezone, setTimezone] = useState("");
|
const [timezone, setTimezone] = useState("");
|
||||||
const [avatar, setAvatar] = useState("");
|
const [avatar, setAvatar] = useState("");
|
||||||
const [banner, setBanner] = useState("");
|
const [banner, setBanner] = useState("");
|
||||||
const [desc, setDesc] = useState("");
|
const [desc, setDesc] = useState("");
|
||||||
const [editDesc, setEditDesc] = useState("");
|
const [editDesc, setEditDesc] = useState("");
|
||||||
|
|
||||||
// more useState, this time to actually handle state
|
// more useState, this time to actually handle state
|
||||||
// TODO: name them something more intuitive maybe?
|
// TODO: name them something more intuitive maybe?
|
||||||
const [editMode, setEditMode] = useState(false);
|
const [editMode, setEditMode] = useState(false);
|
||||||
const [privacyEdit, setPrivacyEdit] = useState(false);
|
const [privacyEdit, setPrivacyEdit] = useState(false);
|
||||||
const [privacyView, setPrivacyView] = useState(false);
|
const [privacyView, setPrivacyView] = useState(false);
|
||||||
|
|
||||||
const [errorAlert, setErrorAlert] = useState(false);
|
const [errorAlert, setErrorAlert] = useState(false);
|
||||||
const [ errorMessage, setErrorMessage ] = useState("");
|
const [ errorMessage, setErrorMessage ] = useState("");
|
||||||
|
|
||||||
// this useEffect does a couple of things after the user is gotten from localstorage
|
// this useEffect does a couple of things after the user is gotten from localstorage
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// first require the discord markdown parser
|
// first require the discord markdown parser
|
||||||
const { toHTML } = require("../../Functions/discord-parser.js");
|
const { toHTML } = require("../../Functions/discord-parser.js");
|
||||||
|
|
||||||
// check if there's a name object in user, if it's null, set name to a blank string, otherwise set name to user.name
|
// check if there's a name object in user, if it's null, set name to a blank string, otherwise set name to user.name
|
||||||
if (user.name) {
|
if (user.name) {
|
||||||
setName(user.name);
|
setName(user.name);
|
||||||
} else setName("");
|
} else setName("");
|
||||||
|
|
||||||
// same as above, but with the user tag instead
|
// same as above, but with the user tag instead
|
||||||
if (user.tag) {
|
if (user.tag) {
|
||||||
setTag(user.tag);
|
setTag(user.tag);
|
||||||
} else setTag("");
|
} else setTag("");
|
||||||
|
|
||||||
// same as above but with timezone
|
// same as above but with timezone
|
||||||
if (user.tz) {
|
if (user.tz) {
|
||||||
setTimezone(user.tz);
|
setTimezone(user.tz);
|
||||||
} else setTimezone("");
|
} else setTimezone("");
|
||||||
|
|
||||||
// also trims the avatar url so that 1. pngs won't be converted to jpegs and 2. won't be resized to 256x256
|
// also trims the avatar url so that 1. pngs won't be converted to jpegs and 2. won't be resized to 256x256
|
||||||
if (user.avatar_url) {
|
if (user.avatar_url) {
|
||||||
var avatarsmall = user.avatar_url.replace("&format=jpeg", "");
|
var avatarsmall = user.avatar_url.replace("&format=jpeg", "");
|
||||||
setAvatar(avatarsmall.replace("?width=256&height=256", ""));
|
setAvatar(avatarsmall.replace("?width=256&height=256", ""));
|
||||||
} else setAvatar("");
|
} else setAvatar("");
|
||||||
|
|
||||||
if (user.banner) {
|
if (user.banner) {
|
||||||
setBanner(user.banner);
|
setBanner(user.banner);
|
||||||
} else setBanner("");
|
} else setBanner("");
|
||||||
|
|
||||||
// same as above, but with descriptions
|
// same as above, but with descriptions
|
||||||
// two description variables! one is just the plain description, the other is parsed and converted to html
|
// two description variables! one is just the plain description, the other is parsed and converted to html
|
||||||
if (user.description) {
|
if (user.description) {
|
||||||
setDesc(toHTML(user.description));
|
setDesc(toHTML(user.description));
|
||||||
setEditDesc(user.description);
|
setEditDesc(user.description);
|
||||||
} else {
|
} else {
|
||||||
setDesc("(no description)");
|
setDesc("(no description)");
|
||||||
setEditDesc("");
|
setEditDesc("");
|
||||||
}
|
}
|
||||||
}, [user.description, user.tag, user.avatar_url, user.tz, user.name, user.banner]);
|
}, [user.description, user.tag, user.avatar_url, user.tz, user.name, user.banner]);
|
||||||
|
|
||||||
// this just resizes the textarea when filled with larger amounts of text
|
// this just resizes the textarea when filled with larger amounts of text
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
autosize(document.querySelector("textarea"));
|
autosize(document.querySelector("textarea"));
|
||||||
});
|
});
|
||||||
|
|
||||||
if (match) return null;
|
if (match) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{ user.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${user.banner})`}} alt=""/> : ""}
|
{ user.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${user.banner})`}} alt=""/> : ""}
|
||||||
<BS.Card className="mb-3 mt-3 w-100">
|
<BS.Card className="mb-3 mt-3 w-100">
|
||||||
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
||||||
<BS.Card.Title className="float-left">
|
<BS.Card.Title className="float-left">
|
||||||
<FaAddressCard className="mr-4 float-left" /> {name} ({user.id})
|
<FaAddressCard className="mr-4 float-left" /> {name} ({user.id})
|
||||||
</BS.Card.Title>
|
</BS.Card.Title>
|
||||||
{user.avatar_url ? (
|
{user.avatar_url ? (
|
||||||
<Popup
|
<Popup
|
||||||
trigger={
|
trigger={
|
||||||
<BS.Image
|
<BS.Image
|
||||||
src={`${user.avatar_url}`}
|
src={`${user.avatar_url}`}
|
||||||
style={{ width: 50, height: 50 }}
|
style={{ width: 50, height: 50 }}
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
className="float-right"
|
className="float-right"
|
||||||
roundedCircle
|
roundedCircle
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
className="avatar"
|
className="avatar"
|
||||||
modal
|
modal
|
||||||
>
|
>
|
||||||
{(close) => (
|
{(close) => (
|
||||||
<div className="text-center w-100 m-0" onClick={() => close()}>
|
<div className="text-center w-100 m-0" onClick={() => close()}>
|
||||||
<div className="m-auto" style={{maxWidth: '640px'}}>
|
<div className="m-auto" style={{maxWidth: '640px'}}>
|
||||||
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
|
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Popup>
|
</Popup>
|
||||||
) : (
|
) : (
|
||||||
<BS.Image
|
<BS.Image
|
||||||
src={defaultAvatar}
|
src={defaultAvatar}
|
||||||
style={{ width: 50, height: 50 }}
|
style={{ width: 50, height: 50 }}
|
||||||
className="float-right"
|
className="float-right"
|
||||||
roundedCircle
|
roundedCircle
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
<BS.Card.Body>
|
<BS.Card.Body>
|
||||||
{errorAlert ? (
|
{errorAlert ? (
|
||||||
<BS.Alert variant="danger">
|
<BS.Alert variant="danger">
|
||||||
{errorMessage}
|
{errorMessage}
|
||||||
</BS.Alert>
|
</BS.Alert>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{editMode ? (
|
{editMode ? (
|
||||||
<EditSystem
|
<EditSystem
|
||||||
editDesc={editDesc}
|
editDesc={editDesc}
|
||||||
name={name}
|
name={name}
|
||||||
tag={tag}
|
tag={tag}
|
||||||
timezone={timezone}
|
timezone={timezone}
|
||||||
avatar={avatar}
|
avatar={avatar}
|
||||||
banner={banner}
|
banner={banner}
|
||||||
setErrorAlert={setErrorAlert}
|
setErrorAlert={setErrorAlert}
|
||||||
user={user}
|
user={user}
|
||||||
setUser={setUser}
|
setUser={setUser}
|
||||||
setEditMode={setEditMode}
|
setEditMode={setEditMode}
|
||||||
setErrorMessage={setErrorMessage}
|
setErrorMessage={setErrorMessage}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<BS.Row>
|
<BS.Row>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>ID:</b> {user.id}
|
<b>ID:</b> {user.id}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Tag:</b> {tag}
|
<b>Tag:</b> {tag}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Timezone:</b> {timezone}
|
<b>Timezone:</b> {timezone}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
{privacyView ? (
|
{privacyView ? (
|
||||||
""
|
""
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Privacy:</b>{" "}
|
<b>Privacy:</b>{" "}
|
||||||
<BS.Button
|
<BS.Button
|
||||||
variant="light"
|
variant="light"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setPrivacyView(true)}
|
onClick={() => setPrivacyView(true)}
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
{user.banner ?
|
{user.banner ?
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Banner:</b>{" "}
|
<b>Banner:</b>{" "}
|
||||||
<Popup
|
<Popup
|
||||||
trigger={
|
trigger={
|
||||||
<BS.Button
|
<BS.Button
|
||||||
variant="light"
|
variant="light"
|
||||||
size="sm"
|
size="sm"
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
}
|
}
|
||||||
className="banner"
|
className="banner"
|
||||||
modal
|
modal
|
||||||
>
|
>
|
||||||
{(close) => (
|
{(close) => (
|
||||||
<div className="text-center w-100" onClick={() => close()}>
|
<div className="text-center w-100" onClick={() => close()}>
|
||||||
<div className="m-auto" style={{maxWidth: '100%'}}>
|
<div className="m-auto" style={{maxWidth: '100%'}}>
|
||||||
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
|
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Popup>
|
</Popup>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
: "" }
|
: "" }
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
{privacyEdit ? (
|
{privacyEdit ? (
|
||||||
<EditSystemPrivacy
|
<EditSystemPrivacy
|
||||||
setErrorAlert={setErrorAlert}
|
setErrorAlert={setErrorAlert}
|
||||||
setUser={setUser}
|
setUser={setUser}
|
||||||
user={user}
|
user={user}
|
||||||
setPrivacyEdit={setPrivacyEdit}
|
setPrivacyEdit={setPrivacyEdit}
|
||||||
setErrorMessage={setErrorMessage}
|
setErrorMessage={setErrorMessage}
|
||||||
/>
|
/>
|
||||||
) : privacyView ? (
|
) : privacyView ? (
|
||||||
<>
|
<>
|
||||||
<hr />
|
<hr />
|
||||||
<h5>Viewing privacy settings</h5>
|
<h5>Viewing privacy settings</h5>
|
||||||
<BS.Row>
|
<BS.Row>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Description:</b> {user.description_privacy}
|
<b>Description:</b> {user.description_privacy}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Member list: </b>
|
<b>Member list: </b>
|
||||||
{user.member_list_privacy}
|
{user.member_list_privacy}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Front:</b> {user.front_privacy}
|
<b>Front:</b> {user.front_privacy}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
<BS.Col className="mb-lg-3" xs={12} lg={3}>
|
||||||
<b>Front history:</b> {user.front_history_privacy}
|
<b>Front history:</b> {user.front_history_privacy}
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
<BS.Button
|
<BS.Button
|
||||||
variant="light"
|
variant="light"
|
||||||
onClick={() => setPrivacyView(false)}
|
onClick={() => setPrivacyView(false)}
|
||||||
>
|
>
|
||||||
Exit
|
Exit
|
||||||
</BS.Button>{" "}
|
</BS.Button>{" "}
|
||||||
<BS.Button
|
<BS.Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
onClick={() => setPrivacyEdit(true)}
|
onClick={() => setPrivacyEdit(true)}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
<hr />
|
<hr />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
<p>
|
<p>
|
||||||
<b>Description:</b>
|
<b>Description:</b>
|
||||||
</p>
|
</p>
|
||||||
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
|
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
|
||||||
{ !user.banner || !localStorage.getItem("bottombanners") ? "" :
|
{ !user.banner || !localStorage.getItem("bottombanners") ? "" :
|
||||||
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
|
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
|
||||||
}
|
}
|
||||||
{privacyEdit ? (
|
{privacyEdit ? (
|
||||||
""
|
""
|
||||||
) : privacyView ? (
|
) : privacyView ? (
|
||||||
""
|
""
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<BS.Button variant="light" onClick={() => setEditMode(true)}>
|
<BS.Button variant="light" onClick={() => setEditMode(true)}>
|
||||||
Edit
|
Edit
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
<BS.Button
|
<BS.Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
className="float-right"
|
className="float-right"
|
||||||
onClick={() => history.push(`/profile/${user.id}`)}
|
onClick={() => history.push(`/profile/${user.id}`)}
|
||||||
>
|
>
|
||||||
Profile
|
Profile
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</BS.Card.Body>
|
</BS.Card.Body>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,202 +10,202 @@ import { FaLockOpen, FaHome } from "react-icons/fa";
|
|||||||
import API_URL from "../Constants/constants.js";
|
import API_URL from "../Constants/constants.js";
|
||||||
|
|
||||||
const Home = ({isInvalid, setIsInvalid, isLoading, setIsLoading, isSubmit, setIsSubmit, forceUpdate }) => {
|
const Home = ({isInvalid, setIsInvalid, isLoading, setIsLoading, isSubmit, setIsSubmit, forceUpdate }) => {
|
||||||
const { register, handleSubmit } = useForm();
|
const { register, handleSubmit } = useForm();
|
||||||
|
|
||||||
const [ errorMessage, setErrorMessage ] = useState("");
|
const [ errorMessage, setErrorMessage ] = useState("");
|
||||||
|
|
||||||
// submit login form, add the token to the localstorage
|
// submit login form, add the token to the localstorage
|
||||||
const onSubmit = (data) => {
|
const onSubmit = (data) => {
|
||||||
localStorage.setItem("token", data.pkToken);
|
localStorage.setItem("token", data.pkToken);
|
||||||
logIn();
|
logIn();
|
||||||
};
|
};
|
||||||
|
|
||||||
function logIn() {
|
function logIn() {
|
||||||
|
|
||||||
// make sure the token is not set to invalid and add a funny little spinner to indicate loading
|
// make sure the token is not set to invalid and add a funny little spinner to indicate loading
|
||||||
setIsInvalid(false);
|
setIsInvalid(false);
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
// then fetch the system data with the token stored in localstorage
|
// then fetch the system data with the token stored in localstorage
|
||||||
fetch(`${API_URL}s/`, {
|
fetch(`${API_URL}s/`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: localStorage.getItem("token"),
|
Authorization: localStorage.getItem("token"),
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
// put all the system data in localstorage
|
// put all the system data in localstorage
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (!res.ok)
|
if (!res.ok)
|
||||||
throw new Error('HTTP Status ' + res.status);
|
throw new Error('HTTP Status ' + res.status);
|
||||||
return res.json();
|
return res.json();
|
||||||
})
|
})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
localStorage.setItem("user", JSON.stringify(data));
|
localStorage.setItem("user", JSON.stringify(data));
|
||||||
setIsSubmit(true);
|
setIsSubmit(true);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
history.push("/dash");
|
history.push("/dash");
|
||||||
})
|
})
|
||||||
// remove the token and user data from localstorage if there's an error, also set the token as invalid
|
// remove the token and user data from localstorage if there's an error, also set the token as invalid
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
setIsInvalid(true);
|
setIsInvalid(true);
|
||||||
setErrorMessage(error.message);
|
setErrorMessage(error.message);
|
||||||
if (error.message === "HTTP Status 401")
|
if (error.message === "HTTP Status 401")
|
||||||
setErrorMessage("Your token is invalid.")
|
setErrorMessage("Your token is invalid.")
|
||||||
localStorage.removeItem("token");
|
localStorage.removeItem("token");
|
||||||
localStorage.removeItem("user");
|
localStorage.removeItem("user");
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Logout function
|
// Logout function
|
||||||
function logOut() {
|
function logOut() {
|
||||||
setIsSubmit(false);
|
setIsSubmit(false);
|
||||||
localStorage.removeItem("token");
|
localStorage.removeItem("token");
|
||||||
localStorage.removeItem("user");
|
localStorage.removeItem("user");
|
||||||
history.push("/");
|
history.push("/");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
};
|
};
|
||||||
|
|
||||||
// when the homepage loads, check if there's a token, if there is, check if it's still valid
|
// when the homepage loads, check if there's a token, if there is, check if it's still valid
|
||||||
// removing the dependency array causes a rerender loop, so just ignore ESlint here
|
// removing the dependency array causes a rerender loop, so just ignore ESlint here
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (localStorage.getItem('token')) {
|
if (localStorage.getItem('token')) {
|
||||||
checkLogIn();
|
checkLogIn();
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// very similar to LogIn(), only difference is that it doesn't push the user afterwards
|
// very similar to LogIn(), only difference is that it doesn't push the user afterwards
|
||||||
// TODO: useless double code that probably could be refactored somehow
|
// TODO: useless double code that probably could be refactored somehow
|
||||||
function checkLogIn() {
|
function checkLogIn() {
|
||||||
setIsInvalid(false);
|
setIsInvalid(false);
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
fetch(`${API_URL}s/`,{
|
fetch(`${API_URL}s/`,{
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': localStorage.getItem("token")
|
'Authorization': localStorage.getItem("token")
|
||||||
}}).then ( res => res.json()
|
}}).then ( res => res.json()
|
||||||
).then (data => {
|
).then (data => {
|
||||||
localStorage.setItem('user', JSON.stringify(data));
|
localStorage.setItem('user', JSON.stringify(data));
|
||||||
setIsSubmit(true);
|
setIsSubmit(true);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
})
|
})
|
||||||
.catch (error => {
|
.catch (error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
setIsInvalid(true);
|
setIsInvalid(true);
|
||||||
localStorage.removeItem('token');
|
localStorage.removeItem('token');
|
||||||
localStorage.removeItem('user');
|
localStorage.removeItem('user');
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* if the page is loading, just show the loading component */}
|
{/* if the page is loading, just show the loading component */}
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Loading />
|
<Loading />
|
||||||
) : (
|
) : (
|
||||||
<BS.Card className="mb-3 mt-3">
|
<BS.Card className="mb-3 mt-3">
|
||||||
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
||||||
<BS.Card.Title>
|
<BS.Card.Title>
|
||||||
<FaLockOpen className="mr-3" />
|
<FaLockOpen className="mr-3" />
|
||||||
Login
|
Login
|
||||||
</BS.Card.Title>
|
</BS.Card.Title>
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
<BS.Card.Body>
|
<BS.Card.Body>
|
||||||
{/* if the login form has been submitted, and there's no user object, show a generic error */}
|
{/* if the login form has been submitted, and there's no user object, show a generic error */}
|
||||||
{isSubmit && !localStorage.getItem("user") ? (
|
{isSubmit && !localStorage.getItem("user") ? (
|
||||||
<BS.Alert variant="danger">
|
<BS.Alert variant="danger">
|
||||||
Something went wrong, please try again.
|
Something went wrong, please try again.
|
||||||
</BS.Alert>
|
</BS.Alert>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{/* if the inserted token is invalid, show invalid error!
|
{/* if the inserted token is invalid, show invalid error!
|
||||||
this also shows if the token used in checkLogIn() is invalid */}
|
this also shows if the token used in checkLogIn() is invalid */}
|
||||||
{isInvalid ? (
|
{isInvalid ? (
|
||||||
<BS.Alert variant="danger">{errorMessage}</BS.Alert>
|
<BS.Alert variant="danger">{errorMessage}</BS.Alert>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{ // if there's a user object in localstorage, and there's a token in localstorage, the user is logged in already
|
{ // if there's a user object in localstorage, and there's a token in localstorage, the user is logged in already
|
||||||
localStorage.getItem("user") && localStorage.getItem("token") ? (
|
localStorage.getItem("user") && localStorage.getItem("token") ? (
|
||||||
<>
|
<>
|
||||||
<p>
|
<p>
|
||||||
You are logged in already, click here to continue to the dash.
|
You are logged in already, click here to continue to the dash.
|
||||||
</p>
|
</p>
|
||||||
<BS.Button
|
<BS.Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
onClick={() => history.push("/dash")}
|
onClick={() => history.push("/dash")}
|
||||||
>
|
>
|
||||||
Continue to dash
|
Continue to dash
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
<BS.Button style={{float: 'right'}} variant="danger"
|
<BS.Button style={{float: 'right'}} variant="danger"
|
||||||
onClick={() => logOut()}
|
onClick={() => logOut()}
|
||||||
>Log out
|
>Log out
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
// otherwise, show login form
|
// otherwise, show login form
|
||||||
<BS.Form onSubmit={handleSubmit(onSubmit)}>
|
<BS.Form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.Col className="mb-1" xs={12} lg={10}>
|
<BS.Col className="mb-1" xs={12} lg={10}>
|
||||||
<BS.Form.Label>
|
<BS.Form.Label>
|
||||||
Enter your token here. You can get your token by using{" "}
|
Enter your token here. You can get your token by using{" "}
|
||||||
<b>"pk;token"</b>.
|
<b>"pk;token"</b>.
|
||||||
</BS.Form.Label>
|
</BS.Form.Label>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<BS.Form.Row>
|
<BS.Form.Row>
|
||||||
<BS.Col xs={12} lg={10}>
|
<BS.Col xs={12} lg={10}>
|
||||||
<BS.Form.Control
|
<BS.Form.Control
|
||||||
required
|
required
|
||||||
name="pkToken"
|
name="pkToken"
|
||||||
type="text"
|
type="text"
|
||||||
{...register("pkToken")}
|
{...register("pkToken")}
|
||||||
placeholder="token"
|
placeholder="token"
|
||||||
/>
|
/>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col>
|
<BS.Col>
|
||||||
<BS.Button variant="primary" type="submit" block>
|
<BS.Button variant="primary" type="submit" block>
|
||||||
Submit
|
Submit
|
||||||
</BS.Button>
|
</BS.Button>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
)}
|
)}
|
||||||
</BS.Card.Body>
|
</BS.Card.Body>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
)}
|
)}
|
||||||
<BS.Card>
|
<BS.Card>
|
||||||
<BS.Card.Header>
|
<BS.Card.Header>
|
||||||
<BS.Card.Title>
|
<BS.Card.Title>
|
||||||
<FaHome className="mr-3" />
|
<FaHome className="mr-3" />
|
||||||
Welcome!
|
Welcome!
|
||||||
</BS.Card.Title>
|
</BS.Card.Title>
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
<BS.Card.Body>
|
<BS.Card.Body>
|
||||||
<p>Pk-webs is a web interface for PluralKit, it lets you edit your system and members using PluralKit's API, without having to use commands on discord.</p>
|
<p>Pk-webs is a web interface for PluralKit, it lets you edit your system and members using PluralKit's API, without having to use commands on discord.</p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<p>This website is an ongoing project and will be sporadically updated. If you have any issues or questions, join <a href='https://discord.gg/PczBt78'>PluralKit's support server</a> and ping us (Fulmine#1917). Since this project is unofficial, the actual pluralkit devs will not be able to help you with everything.</p>
|
<p>This website is an ongoing project and will be sporadically updated. If you have any issues or questions, join <a href='https://discord.gg/PczBt78'>PluralKit's support server</a> and ping us (Fulmine#1917). Since this project is unofficial, the actual pluralkit devs will not be able to help you with everything.</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<hr/>
|
<hr/>
|
||||||
<h5>FAQ:</h5>
|
<h5>FAQ:</h5>
|
||||||
Will groups be added to this website?
|
Will groups be added to this website?
|
||||||
<blockquote>In the future, yes! Groups are not in the API as of now, which is what this site depends on. When APIv2 comes out, they will eventually be added here too.</blockquote>
|
<blockquote>In the future, yes! Groups are not in the API as of now, which is what this site depends on. When APIv2 comes out, they will eventually be added here too.</blockquote>
|
||||||
Will switch history/editing switches be added to this website?
|
Will switch history/editing switches be added to this website?
|
||||||
<blockquote>Probably when APIv2 comes out, right now the API is very limited in how it can handle switches. And we'd rather add everything in one go.</blockquote>
|
<blockquote>Probably when APIv2 comes out, right now the API is very limited in how it can handle switches. And we'd rather add everything in one go.</blockquote>
|
||||||
What about bulk editing?
|
What about bulk editing?
|
||||||
<blockquote>Probably not. Bulk commands are planned for the main bot, and we're not sure how to fit them into the main site at the moment.</blockquote>
|
<blockquote>Probably not. Bulk commands are planned for the main bot, and we're not sure how to fit them into the main site at the moment.</blockquote>
|
||||||
Can you add [other feature]?
|
Can you add [other feature]?
|
||||||
<blockquote>Depends on the feature. Ping us in the support server and we'll let you know if it's feasible or not. If it's accessibility related, chances are good that we'll add it.</blockquote>
|
<blockquote>Depends on the feature. Ping us in the support server and we'll let you know if it's feasible or not. If it's accessibility related, chances are good that we'll add it.</blockquote>
|
||||||
Can i contribute to this?
|
Can i contribute to this?
|
||||||
<blockquote>Yeah sure! The code is open source on <a href='https://github.com/Spectralitree/pk-webs/'>github</a>. Be warned though that we're currently in the middle of cleaning it all up and adding comments to everything, so some sections are quite messy still.</blockquote>
|
<blockquote>Yeah sure! The code is open source on <a href='https://github.com/Spectralitree/pk-webs/'>github</a>. Be warned though that we're currently in the middle of cleaning it all up and adding comments to everything, so some sections are quite messy still.</blockquote>
|
||||||
</BS.Card.Body>
|
</BS.Card.Body>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|||||||
@ -7,48 +7,48 @@ import API_URL from '../Constants/constants';
|
|||||||
import ProfilePage from '../Components/Public/ProfilePage';
|
import ProfilePage from '../Components/Public/ProfilePage';
|
||||||
|
|
||||||
const MemberProfile = () => {
|
const MemberProfile = () => {
|
||||||
const { memberID } = useParams();
|
const { memberID } = useParams();
|
||||||
|
|
||||||
const [isLoading, setIsLoading ] = useState(false);
|
const [isLoading, setIsLoading ] = useState(false);
|
||||||
const [isError, setIsError ] = useState(false);
|
const [isError, setIsError ] = useState(false);
|
||||||
const [isForbidden, setIsForbidden ] = useState(false);
|
const [isForbidden, setIsForbidden ] = useState(false);
|
||||||
const [ member, setMember ] = useState({});
|
const [ member, setMember ] = useState({});
|
||||||
|
|
||||||
const fetchMember = useCallback( () => {
|
const fetchMember = useCallback( () => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setIsError(false);
|
setIsError(false);
|
||||||
|
|
||||||
fetch(`${API_URL}m/${memberID}`,{
|
fetch(`${API_URL}m/${memberID}`,{
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
}).then ( res => {
|
}).then ( res => {
|
||||||
if (res.status === 403) {
|
if (res.status === 403) {
|
||||||
throw new Error('Access denied!');
|
throw new Error('Access denied!');
|
||||||
}
|
}
|
||||||
return res.json()
|
return res.json()
|
||||||
}
|
}
|
||||||
).then (data => {
|
).then (data => {
|
||||||
setMember(data)
|
setMember(data)
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
})
|
})
|
||||||
.catch (error => {
|
.catch (error => {
|
||||||
if (error.message === 'Access denied!') {
|
if (error.message === 'Access denied!') {
|
||||||
setIsForbidden(true);
|
setIsForbidden(true);
|
||||||
} else {
|
} else {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
setIsError(true);
|
setIsError(true);
|
||||||
}
|
}
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
})
|
})
|
||||||
}, [memberID])
|
}, [memberID])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchMember();
|
fetchMember();
|
||||||
}, [fetchMember])
|
}, [fetchMember])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
isLoading ? <Loading /> : isError ?
|
isLoading ? <Loading /> : isError ?
|
||||||
<BS.Alert variant="danger">Error fetching member.</BS.Alert> : isForbidden ? <BS.Alert variant="danger">This member is private.</BS.Alert> : <ProfilePage member={member} list={false}/>
|
<BS.Alert variant="danger">Error fetching member.</BS.Alert> : isForbidden ? <BS.Alert variant="danger">This member is private.</BS.Alert> : <ProfilePage member={member} list={false}/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MemberProfile;
|
export default MemberProfile;
|
||||||
@ -7,250 +7,250 @@ import Toggle from "react-toggle";
|
|||||||
const Settings = ({ forceUpdate }) => {
|
const Settings = ({ forceUpdate }) => {
|
||||||
|
|
||||||
// this all should be pretty self-explanatory, might add comments later tho
|
// this all should be pretty self-explanatory, might add comments later tho
|
||||||
return (
|
return (
|
||||||
<BS.Card>
|
<BS.Card>
|
||||||
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
||||||
<BS.Card.Title>
|
<BS.Card.Title>
|
||||||
<FaCog className="mr-3" />
|
<FaCog className="mr-3" />
|
||||||
Settings
|
Settings
|
||||||
</BS.Card.Title>
|
</BS.Card.Title>
|
||||||
</BS.Card.Header>
|
</BS.Card.Header>
|
||||||
<BS.Card.Body>
|
<BS.Card.Body>
|
||||||
<p>
|
<p>
|
||||||
Change how you view and use pk-webs here, changes will be saved after
|
Change how you view and use pk-webs here, changes will be saved after
|
||||||
refreshing. You will have to apply them again in different browsers
|
refreshing. You will have to apply them again in different browsers
|
||||||
and on different devices.
|
and on different devices.
|
||||||
</p>
|
</p>
|
||||||
<hr />
|
<hr />
|
||||||
<BS.Row>
|
<BS.Row>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("opendyslexic") ? (
|
{localStorage.getItem("opendyslexic") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("opendyslexic");
|
localStorage.removeItem("opendyslexic");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("opendyslexic", "true");
|
localStorage.setItem("opendyslexic", "true");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Use opendyslexic?
|
Use opendyslexic?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("twemoji") ? (
|
{localStorage.getItem("twemoji") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("twemoji");
|
localStorage.removeItem("twemoji");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("twemoji", "true");
|
localStorage.setItem("twemoji", "true");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Use twemoji?
|
Use twemoji?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("pagesonly") ? (
|
{localStorage.getItem("pagesonly") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("pagesonly");
|
localStorage.removeItem("pagesonly");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("pagesonly", "true");
|
localStorage.setItem("pagesonly", "true");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Use only member pages?
|
Use only member pages?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("fullbg") ? (
|
{localStorage.getItem("fullbg") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("fullbg");
|
localStorage.removeItem("fullbg");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("fullbg", "true");
|
localStorage.setItem("fullbg", "true");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Remove gradient from background color?
|
Remove gradient from background color?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("colorbg") ? (
|
{localStorage.getItem("colorbg") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("colorbg");
|
localStorage.removeItem("colorbg");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("colorbg", "false");
|
localStorage.setItem("colorbg", "false");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Hide colored backgrounds altogether?
|
Hide colored backgrounds altogether?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("expandcards") ? (
|
{localStorage.getItem("expandcards") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("expandcards");
|
localStorage.removeItem("expandcards");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("expandcards", "true");
|
localStorage.setItem("expandcards", "true");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Expand member cards on default?
|
Expand member cards on default?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("hidebanners") ? (
|
{localStorage.getItem("hidebanners") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("hidebanners");
|
localStorage.removeItem("hidebanners");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("hidebanners", "true");
|
localStorage.setItem("hidebanners", "true");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Hide banners at the top?
|
Hide banners at the top?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col
|
<BS.Col
|
||||||
xs={12}
|
xs={12}
|
||||||
lg={4}
|
lg={4}
|
||||||
className="mx-1 mb-4 d-flex align-items-center row"
|
className="mx-1 mb-4 d-flex align-items-center row"
|
||||||
>
|
>
|
||||||
{localStorage.getItem("bottombanners") ? (
|
{localStorage.getItem("bottombanners") ? (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={true}
|
defaultChecked={true}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.removeItem("bottombanners");
|
localStorage.removeItem("bottombanners");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Toggle
|
<Toggle
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
defaultChecked={false}
|
defaultChecked={false}
|
||||||
icons={false}
|
icons={false}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
localStorage.setItem("bottombanners", "true");
|
localStorage.setItem("bottombanners", "true");
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Show banners at the bottom?
|
Show banners at the bottom?
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
</BS.Card.Body>
|
</BS.Card.Body>
|
||||||
</BS.Card>
|
</BS.Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Settings;
|
export default Settings;
|
||||||
|
|||||||
@ -6,8 +6,8 @@ import './index.css';
|
|||||||
import App from './App';
|
import App from './App';
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Router history={history}>
|
<Router history={history}>
|
||||||
<App />
|
<App />
|
||||||
</Router>,
|
</Router>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user