feat: settings & solid login
This commit is contained in:
zerosoul
@@ -1,54 +1,16 @@
|
||||
import { useState, useEffect } from "react";
|
||||
const initialAvatar = ({
|
||||
initials = "UK",
|
||||
initial_size = 0,
|
||||
size = 200,
|
||||
foreground = "#fff",
|
||||
background = "#4c99e9",
|
||||
weight = 400,
|
||||
fontFamily = "'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
||||
}) => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const width = size;
|
||||
const height = size;
|
||||
const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
|
||||
canvas.width = width * devicePixelRatio;
|
||||
canvas.height = height * devicePixelRatio;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
const context = canvas.getContext("2d");
|
||||
context.scale(devicePixelRatio, devicePixelRatio);
|
||||
context.rect(0, 0, canvas.width, canvas.height);
|
||||
context.fillStyle = background;
|
||||
context.fill();
|
||||
context.font = `${weight} ${initial_size || height / 2}px ${fontFamily}`;
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "middle";
|
||||
context.fillStyle = foreground;
|
||||
context.fillText(initials, width / 2, height / 2);
|
||||
|
||||
/* istanbul ignore next */
|
||||
return canvas.toDataURL("image/png");
|
||||
};
|
||||
const getInitials = (name) => {
|
||||
const arr = name.split(" ").filter((n) => !!n);
|
||||
return arr
|
||||
.map((t) => t[0])
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
};
|
||||
import { getInitials, getInitialsAvatar } from "../utils";
|
||||
export default function Avatar({ url, name = "unkonw name", ...rest }) {
|
||||
const [src, setSrc] = useState(url);
|
||||
const handleError = () => {
|
||||
const tmp = initialAvatar({
|
||||
const tmp = getInitialsAvatar({
|
||||
initials: getInitials(name),
|
||||
});
|
||||
setSrc(tmp);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!url) {
|
||||
const tmp = initialAvatar({
|
||||
const tmp = getInitialsAvatar({
|
||||
initials: getInitials(name),
|
||||
});
|
||||
setSrc(tmp);
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { getInitials, getInitialsAvatar } from "../utils";
|
||||
const StyledWrapper = styled.div`
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.avatar {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
/* border: 1px solid #eee; */
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
input[type="file"] {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.tip {
|
||||
white-space: nowrap;
|
||||
padding: 4px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
&:hover .tip {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
`;
|
||||
export default function AvatarUploader({ url = "", name = "", uploadImage }) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [currSrc, setCurrSrc] = useState("");
|
||||
useEffect(() => {
|
||||
if (!url) {
|
||||
const initialsSrc = getInitialsAvatar({ initials: getInitials(name) });
|
||||
setCurrSrc(initialsSrc);
|
||||
} else {
|
||||
setCurrSrc(url);
|
||||
}
|
||||
}, [url, name]);
|
||||
const handleUpload = async (evt) => {
|
||||
if (uploading) return;
|
||||
const [file] = evt.target.files;
|
||||
setUploading(true);
|
||||
await uploadImage(file);
|
||||
setUploading(false);
|
||||
};
|
||||
if (!currSrc) return null;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="avatar">
|
||||
<img src={currSrc} alt="avatar" />
|
||||
<div className="tip">{uploading ? `Uploading` : `Change Avatar`}</div>
|
||||
<input
|
||||
multiple={false}
|
||||
onChange={handleUpload}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
name="avatar"
|
||||
id="avatar"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
src="https://static.nicegoodthings.com/project/rustchat/icon.avatar.uploader.svg"
|
||||
alt="icon"
|
||||
className="icon"
|
||||
/>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
// import { useSelector } from "react-redux";
|
||||
import {
|
||||
useGetChannelQuery,
|
||||
useUpdateChannelMutation,
|
||||
} from "../../../app/services/channel";
|
||||
import Input from "../StyledInput";
|
||||
import Textarea from "../StyledTextarea";
|
||||
import SaveTip from "../SaveTip";
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
.input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.name {
|
||||
padding-left: 36px;
|
||||
background: url(https://static.nicegoodthings.com/project/rustchat/icon.hash.svg);
|
||||
background-size: 20px;
|
||||
background-position-x: 8px;
|
||||
background-position-y: 8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function Overview({ id = 0 }) {
|
||||
const { data, refetch } = useGetChannelQuery(id);
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [values, setValues] = useState(null);
|
||||
const [updateChannel, { isSuccess: updated }] = useUpdateChannelMutation();
|
||||
const handleUpdate = () => {
|
||||
const { name, description } = values;
|
||||
updateChannel({ id, name, description });
|
||||
};
|
||||
const handleChange = (evt) => {
|
||||
const newValue = evt.target.value;
|
||||
const { type } = evt.target.dataset;
|
||||
setValues((prev) => {
|
||||
return { ...prev, [type]: newValue };
|
||||
});
|
||||
};
|
||||
const handleReset = () => {
|
||||
console.log("reset", data);
|
||||
setValues(data);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setValues(data);
|
||||
}
|
||||
}, [data]);
|
||||
useEffect(() => {
|
||||
if (data && values) {
|
||||
const { name, description } = values;
|
||||
const { name: oName, description: oDescription } = data;
|
||||
if (oName !== name || oDescription !== description) {
|
||||
setChanged(true);
|
||||
} else {
|
||||
setChanged(false);
|
||||
}
|
||||
}
|
||||
}, [data, values]);
|
||||
|
||||
useEffect(() => {
|
||||
if (updated) {
|
||||
toast.success("Channel updated!");
|
||||
refetch();
|
||||
}
|
||||
}, [updated]);
|
||||
|
||||
if (!values || !id) return null;
|
||||
const { name, description } = values;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="inputs">
|
||||
<div className="input">
|
||||
<label htmlFor="name">Channel Name</label>
|
||||
<Input
|
||||
className="name"
|
||||
data-type="name"
|
||||
onChange={handleChange}
|
||||
value={name}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Channel Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label htmlFor="desc">Channel Topic</label>
|
||||
<Textarea
|
||||
data-type="description"
|
||||
onChange={handleChange}
|
||||
value={description}
|
||||
rows={4}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Let everyone know how to use this channel."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{changed && (
|
||||
<SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />
|
||||
)}
|
||||
{/* <button onClick={handleUpdate} className="btn">update</button> */}
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -3,8 +3,15 @@ import { useDispatch } from "react-redux";
|
||||
import { toggleChannelSetting } from "../../../app/slices/ui";
|
||||
import StyledSettingContainer from "../StyledSettingContainer";
|
||||
import DeleteConfirmModal from "./DeleteConfirmModal";
|
||||
import navs from "./navs";
|
||||
import useNavs from "./navs";
|
||||
export default function ChannelSetting({ id = 0 }) {
|
||||
const navs = useNavs(id);
|
||||
const flatenNavs = navs
|
||||
.map(({ items }) => {
|
||||
return items;
|
||||
})
|
||||
.flat();
|
||||
const [currNav, setCurrNav] = useState(flatenNavs[0]);
|
||||
const [deleteConfirm, setDeleteConfirm] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const close = () => {
|
||||
@@ -13,10 +20,18 @@ export default function ChannelSetting({ id = 0 }) {
|
||||
const toggleDeleteConfrim = () => {
|
||||
setDeleteConfirm((prev) => !prev);
|
||||
};
|
||||
const updateNav = (name) => {
|
||||
const tmp = flatenNavs.find((n) => n.name == name);
|
||||
if (tmp) {
|
||||
setCurrNav(tmp);
|
||||
}
|
||||
};
|
||||
if (!id) return null;
|
||||
return (
|
||||
<>
|
||||
<StyledSettingContainer
|
||||
updateNav={updateNav}
|
||||
nav={currNav}
|
||||
closeModal={close}
|
||||
title="Channel Setting"
|
||||
navs={navs}
|
||||
@@ -27,7 +42,7 @@ export default function ChannelSetting({ id = 0 }) {
|
||||
},
|
||||
]}
|
||||
>
|
||||
right block
|
||||
{currNav.component}
|
||||
</StyledSettingContainer>
|
||||
{deleteConfirm && (
|
||||
<DeleteConfirmModal closeModal={toggleDeleteConfrim} id={id} />
|
||||
|
||||
@@ -1,25 +1,57 @@
|
||||
const navs = [
|
||||
{
|
||||
title: "General",
|
||||
items: [
|
||||
{
|
||||
name: "overview",
|
||||
title: "Overview",
|
||||
},
|
||||
{
|
||||
name: "permissions",
|
||||
title: "Permissions",
|
||||
},
|
||||
{
|
||||
name: "invites",
|
||||
title: "Invites",
|
||||
},
|
||||
{
|
||||
name: "integrations",
|
||||
title: "Integrations",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
import Overview from "./Overview";
|
||||
import ManageMembers from "../ManageMembers";
|
||||
import { useSelector } from "react-redux";
|
||||
const useNavs = (channelId) => {
|
||||
const { channels, contacts } = useSelector((store) => {
|
||||
return {
|
||||
channels: store.channels,
|
||||
contacts: store.contacts,
|
||||
};
|
||||
});
|
||||
const ids = channels[channelId]?.members || [];
|
||||
const navs = [
|
||||
{
|
||||
title: "General",
|
||||
items: [
|
||||
{
|
||||
name: "overview",
|
||||
title: "Overview",
|
||||
component: <Overview id={channelId} />,
|
||||
},
|
||||
{
|
||||
name: "permissions",
|
||||
title: "Permissions",
|
||||
},
|
||||
{
|
||||
name: "invites",
|
||||
title: "Invites",
|
||||
},
|
||||
{
|
||||
name: "integrations",
|
||||
title: "Integrations",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "User Management",
|
||||
items: [
|
||||
{
|
||||
name: "members",
|
||||
title: "Members",
|
||||
component: (
|
||||
<ManageMembers
|
||||
members={
|
||||
ids.length == 0
|
||||
? contacts
|
||||
: contacts.filter((c) => ids.includes(c.uid))
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
return navs;
|
||||
};
|
||||
|
||||
export default navs;
|
||||
export default useNavs;
|
||||
|
||||
@@ -1,32 +1,12 @@
|
||||
import { useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useOutsideClick } from "rooks";
|
||||
const StyledWrapper = styled.ul`
|
||||
import StyledMenu from "./StyledMenu";
|
||||
const StyledWrapper = styled(StyledMenu)`
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
left: ${({ x }) => `${x}px`};
|
||||
top: ${({ y }) => `${y}px`};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
|
||||
0px 10px 10px rgba(31, 41, 55, 0.04);
|
||||
border-radius: 6px;
|
||||
.item {
|
||||
padding: 8px 0;
|
||||
/* margin: 0 12px; */
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #616161;
|
||||
&.underline {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
&.danger {
|
||||
color: #a11043;
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function ContextMenu({
|
||||
posX = 0,
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useOutsideClick } from "rooks";
|
||||
import { useLazyDeleteContactQuery } from "../../app/services/contact";
|
||||
import Contact from "./Contact";
|
||||
import StyledMenu from "./StyledMenu";
|
||||
import toast from "react-hot-toast";
|
||||
const StyledWrapper = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 512px;
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 40px;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #374151;
|
||||
}
|
||||
.desc {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
}
|
||||
}
|
||||
.members {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.member {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
.left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.name {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #52525b;
|
||||
}
|
||||
.email {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #52525b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
.role {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
color: #616161;
|
||||
}
|
||||
.opts {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
.dots {
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function ManageMembers({ members = [] }) {
|
||||
const [remove, { isSuccess: removeSuccess }] = useLazyDeleteContactQuery();
|
||||
const wrapperRef = useRef(null);
|
||||
const [menuVisible, setMenuVisible] = useState(null);
|
||||
useOutsideClick(wrapperRef, () => {
|
||||
setMenuVisible(null);
|
||||
});
|
||||
const toggleMenu = (evt) => {
|
||||
const { uid } = evt.target.dataset;
|
||||
if (menuVisible == uid) {
|
||||
setMenuVisible(null);
|
||||
} else {
|
||||
setMenuVisible(uid);
|
||||
}
|
||||
};
|
||||
const handleRemoveUser = (uid) => {
|
||||
remove(uid);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (removeSuccess) {
|
||||
toast.success("delete successfully");
|
||||
}
|
||||
}, [removeSuccess]);
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="intro">
|
||||
<h4 className="title">Manage Members</h4>
|
||||
<p className="desc">
|
||||
Disabling your account means you can recover it at any time after
|
||||
taking this action.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="members">
|
||||
{members.map((m) => {
|
||||
const { name, email, uid, is_admin } = m;
|
||||
return (
|
||||
<li key={uid} className="member">
|
||||
<div className="left">
|
||||
<Contact compact uid={uid} name={name} interactive={false} />
|
||||
<div className="info">
|
||||
<span className="name">{name}</span>
|
||||
<span className="email">{email}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<span className="role">{is_admin ? "Admin" : "User"}</span>
|
||||
<div className="opts">
|
||||
<img
|
||||
data-uid={uid}
|
||||
onClick={toggleMenu}
|
||||
className="dots"
|
||||
src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
|
||||
alt="dots icon"
|
||||
/>
|
||||
{menuVisible == uid && (
|
||||
<StyledMenu
|
||||
ref={wrapperRef}
|
||||
className="menu animate__animated animate__flipInY animate__faster"
|
||||
>
|
||||
<li className="item">Copy Email</li>
|
||||
<li className="item">Mute</li>
|
||||
<li className="item underline">Change Nickname</li>
|
||||
<li className="item danger">Ban</li>
|
||||
<li
|
||||
className="item danger"
|
||||
onClick={handleRemoveUser.bind(null, uid)}
|
||||
data-uid={uid}
|
||||
>
|
||||
Remove
|
||||
</li>
|
||||
</StyledMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,7 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import BASE_URL from "../../app/config";
|
||||
import { useRenewMutation } from "../../app/services/auth";
|
||||
import {
|
||||
@@ -11,12 +9,16 @@ import {
|
||||
addChannel,
|
||||
deleteChannel,
|
||||
} from "../../app/slices/channels";
|
||||
import { updateUsersStatus } from "../../app/slices/contacts";
|
||||
import {
|
||||
updateUsersByLogs,
|
||||
updateUsersStatus,
|
||||
} from "../../app/slices/contacts";
|
||||
import {
|
||||
updateToken,
|
||||
clearAuthData,
|
||||
setUsersVersion,
|
||||
setAfterMid,
|
||||
updateLoginedUserByLogs,
|
||||
} from "../../app/slices/auth.data";
|
||||
|
||||
import { addChannelMsg } from "../../app/slices/message.channel";
|
||||
@@ -99,6 +101,20 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
|
||||
dispatch(setUsersVersion({ version }));
|
||||
}
|
||||
break;
|
||||
case "users_log":
|
||||
{
|
||||
console.log("users change logs");
|
||||
const { logs } = data;
|
||||
const loginedUserLogs = logs.filter((l) => {
|
||||
return l.uid == currUser.uid;
|
||||
});
|
||||
if (loginedUserLogs.length) {
|
||||
// 当前登录用户的变动，及时同步到auth data里
|
||||
dispatch(updateLoginedUserByLogs(logs));
|
||||
}
|
||||
dispatch(updateUsersByLogs(logs));
|
||||
}
|
||||
break;
|
||||
case "users_state":
|
||||
case "users_state_changed":
|
||||
{
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
// import React from "react";
|
||||
import styled from "styled-components";
|
||||
const StyledWrapper = styled.div`
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
/* gap: 20px; */
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
|
||||
0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||
border-radius: 25px;
|
||||
.txt {
|
||||
padding: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 8px 14px;
|
||||
background: #1fe1f9;
|
||||
border: 1px solid #1fe1f9;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 25px;
|
||||
&.reset {
|
||||
background: none;
|
||||
color: #667085;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function SaveTip({ saveHandler, resetHandler }) {
|
||||
return (
|
||||
<StyledWrapper className="animate__animated animate__flipInX animate__faster">
|
||||
<span className="txt">You have unsaved changes!</span>
|
||||
<div className="btns">
|
||||
<button className="btn reset" onClick={resetHandler}>
|
||||
Reset
|
||||
</button>
|
||||
<button className="btn" onClick={saveHandler}>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,184 @@
|
||||
import React from "react";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useSelector } from "react-redux";
|
||||
import toast from "react-hot-toast";
|
||||
import { useUpdateAvatarMutation } from "../../../app/services/contact";
|
||||
import AvatarUploader from "../AvatarUploader";
|
||||
import ProfileBasicEditModal from "./ProfileBasicEditModal";
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
.card {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 512px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 20px;
|
||||
.name {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 64px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #27272a;
|
||||
.uid {
|
||||
font-weight: normal;
|
||||
color: #52525b;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-transform: uppercase;
|
||||
color: #52525b;
|
||||
}
|
||||
.txt {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #52525b;
|
||||
.gray {
|
||||
color: #78787c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
background: #1fe1f9;
|
||||
border: 1px solid #1fe1f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.danger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.head {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #374151;
|
||||
}
|
||||
.desc {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.btn {
|
||||
background: #ef4444;
|
||||
border: 1px solid #ef4444;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 8px 14px;
|
||||
background: #1fe1f9;
|
||||
border: 1px solid #1fe1f9;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
}
|
||||
`;
|
||||
const EditModalInfo = {
|
||||
name: {
|
||||
label: "Username",
|
||||
title: "Change your username",
|
||||
intro: "Enter a new username.",
|
||||
},
|
||||
email: {
|
||||
label: "Email",
|
||||
title: "Change your email",
|
||||
intro: "Enter a new email.",
|
||||
},
|
||||
};
|
||||
export default function MyAccount() {
|
||||
return <div>MyAccount</div>;
|
||||
const [editModal, setEditModal] = useState(null);
|
||||
const [
|
||||
uploadAvatar,
|
||||
{ isSuccess: uploadSuccess },
|
||||
] = useUpdateAvatarMutation();
|
||||
const { user } = useSelector((store) => store.authData);
|
||||
useEffect(() => {
|
||||
if (uploadSuccess) {
|
||||
toast.success("update avatar successfully!");
|
||||
}
|
||||
}, [uploadSuccess]);
|
||||
const handleBasicEdit = (evt) => {
|
||||
const { edit } = evt.target.dataset;
|
||||
setEditModal(edit);
|
||||
};
|
||||
const closeBasicEditModal = () => {
|
||||
setEditModal(null);
|
||||
};
|
||||
if (!user) return null;
|
||||
const { uid, avatar, name, email } = user;
|
||||
return (
|
||||
<>
|
||||
<StyledWrapper>
|
||||
<div className="card">
|
||||
<AvatarUploader url={avatar} name={name} uploadImage={uploadAvatar} />
|
||||
<div className="name">
|
||||
{name} <span className="uid">#{uid}</span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">username</span>
|
||||
<span className="txt">
|
||||
{name} <span className="gray"> #{uid}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/* <div className="right"> */}
|
||||
<button data-edit="name" onClick={handleBasicEdit} className="btn">
|
||||
Edit
|
||||
</button>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">email</span>
|
||||
<span className="txt">{email}</span>
|
||||
</div>
|
||||
{/* <div className="right"> */}
|
||||
<button data-edit="email" onClick={handleBasicEdit} className="btn">
|
||||
Edit
|
||||
</button>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="danger">
|
||||
<h4 className="head">Account Removal</h4>
|
||||
<div className="desc">
|
||||
Disabling your account means you can recover it at any time after
|
||||
taking this action.
|
||||
</div>
|
||||
<button className="btn">Delete Account</button>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
{editModal && (
|
||||
<ProfileBasicEditModal
|
||||
valueKey={editModal}
|
||||
{...EditModalInfo[editModal]}
|
||||
value={eval(editModal)}
|
||||
closeModal={closeBasicEditModal}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
// import { useSelector } from "react-redux";
|
||||
import {
|
||||
useGetServerQuery,
|
||||
useUpdateServerMutation,
|
||||
useUpdateLogoMutation,
|
||||
} from "../../../app/services/server";
|
||||
import LogoUploader from "../AvatarUploader";
|
||||
import Input from "../StyledInput";
|
||||
import Textarea from "../StyledTextarea";
|
||||
import SaveTip from "../SaveTip";
|
||||
import toast from "react-hot-toast";
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.logo {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.preview {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
.tip {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #374151;
|
||||
}
|
||||
.btn {
|
||||
padding: 8px 14px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #1fe1f9;
|
||||
background: #ecfeff;
|
||||
border: 1px solid #ecfeff;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
.input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function Overview() {
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [values, setValues] = useState(null);
|
||||
const { data, refetch } = useGetServerQuery();
|
||||
const [updateServer, { isSuccess: updated }] = useUpdateServerMutation();
|
||||
const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
|
||||
const handleUpdate = () => {
|
||||
const { name, description } = values;
|
||||
updateServer({ name, description });
|
||||
};
|
||||
const handleChange = (evt) => {
|
||||
const newValue = evt.target.value;
|
||||
const { type } = evt.target.dataset;
|
||||
setValues((prev) => {
|
||||
return { ...prev, [type]: newValue };
|
||||
});
|
||||
};
|
||||
const handleReset = () => {
|
||||
console.log("reset", data);
|
||||
setValues(data);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (uploadSuccess) {
|
||||
toast.success("update logo successfully");
|
||||
refetch();
|
||||
}
|
||||
}, [uploadSuccess]);
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setValues(data);
|
||||
}
|
||||
}, [data]);
|
||||
useEffect(() => {
|
||||
if (data && values) {
|
||||
const { name, description } = values;
|
||||
const { name: oName, description: oDescription } = data;
|
||||
if (oName !== name || oDescription !== description) {
|
||||
setChanged(true);
|
||||
} else {
|
||||
setChanged(false);
|
||||
}
|
||||
}
|
||||
}, [data, values]);
|
||||
|
||||
useEffect(() => {
|
||||
if (updated) {
|
||||
toast.success("Server updated!");
|
||||
refetch();
|
||||
}
|
||||
}, [updated]);
|
||||
|
||||
if (!values) return null;
|
||||
const { name, description, logo } = values;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="logo">
|
||||
<div className="preview">
|
||||
<LogoUploader
|
||||
url={uploadSuccess ? `${logo}?t=${new Date().getTime()}` : logo}
|
||||
name={name}
|
||||
uploadImage={uploadLogo}
|
||||
/>
|
||||
</div>
|
||||
<div className="upload">
|
||||
<div className="tip">
|
||||
Minimum size is 128x128, We recommend at least 512x512 for the
|
||||
server. Max size limited to 5M.
|
||||
</div>
|
||||
<button className="btn">Upload Image</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inputs">
|
||||
<div className="input">
|
||||
<label htmlFor="name">Server Name</label>
|
||||
<Input
|
||||
data-type="name"
|
||||
onChange={handleChange}
|
||||
value={name}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Server Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label htmlFor="desc">Server Description</label>
|
||||
<Textarea
|
||||
data-type="description"
|
||||
onChange={handleChange}
|
||||
value={description}
|
||||
rows={4}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Tell the world a bit about this server"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{changed && (
|
||||
<SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />
|
||||
)}
|
||||
{/* <button onClick={handleUpdate} className="btn">update</button> */}
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
// import React from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
// import { useDispatch } from "react-redux";
|
||||
import Input from "../StyledInput";
|
||||
// import BASE_URL from "../../app/config";
|
||||
import { useUpdateInfoMutation } from "../../../app/services/contact";
|
||||
import Button from "../StyledButton";
|
||||
const StyledEdit = styled.div`
|
||||
width: 440px;
|
||||
padding: 32px;
|
||||
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: #374151;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.desc {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.input {
|
||||
margin: 48px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
import Modal from "../Modal";
|
||||
import toast from "react-hot-toast";
|
||||
export default function ProfileBasicEditModal({
|
||||
label = "Username",
|
||||
valueKey = "name",
|
||||
value = "",
|
||||
title = "Change your username",
|
||||
intro = "Enter a new username and your existing password.",
|
||||
closeModal,
|
||||
}) {
|
||||
const [input, setInput] = useState(value);
|
||||
// const dispatch = useDispatch();
|
||||
const [update, { isLoading, isSuccess }] = useUpdateInfoMutation();
|
||||
const handleChange = (evt) => {
|
||||
setInput(evt.target.value);
|
||||
};
|
||||
const handleUpdate = () => {
|
||||
update({ [valueKey]: input });
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
// todo
|
||||
toast.success("update user info successfully");
|
||||
closeModal();
|
||||
}
|
||||
}, [isSuccess]);
|
||||
return (
|
||||
<Modal id="modal-modal">
|
||||
<StyledEdit className="animate__animated animate__fadeInDown animate__faster">
|
||||
<h3 className="title">{title}</h3>
|
||||
<p className="desc">{intro}</p>
|
||||
<div className="input">
|
||||
<label htmlFor={valueKey}>{label}</label>
|
||||
<Input name={valueKey} value={input} onChange={handleChange}></Input>
|
||||
</div>
|
||||
<div className="btns">
|
||||
<Button onClick={closeModal}>Cancel</Button>
|
||||
<Button onClick={handleUpdate} className="main">
|
||||
{isLoading ? "Updating" : `Done`}
|
||||
</Button>
|
||||
</div>
|
||||
</StyledEdit>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -2,14 +2,16 @@ import { useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { toggleSetting } from "../../../app/slices/ui";
|
||||
import StyledSettingContainer from "../StyledSettingContainer";
|
||||
import navs from "./navs";
|
||||
import getNavs from "./navs";
|
||||
import LogoutConfirmModal from "./LogoutConfirmModal";
|
||||
const flatenNavs = navs
|
||||
.map(({ items }) => {
|
||||
return items;
|
||||
})
|
||||
.flat();
|
||||
export default function Setting() {
|
||||
|
||||
export default function Setting({ contacts = [] }) {
|
||||
const navs = getNavs(contacts);
|
||||
const flatenNavs = navs
|
||||
.map(({ items }) => {
|
||||
return items;
|
||||
})
|
||||
.flat();
|
||||
const [currNav, setCurrNav] = useState(flatenNavs[0]);
|
||||
const [logoutConfirm, setLogoutConfirm] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
@@ -35,7 +37,7 @@ export default function Setting() {
|
||||
navs={navs}
|
||||
dangers={[{ title: "Log Out", handler: toggleLogoutConfrim }]}
|
||||
>
|
||||
right block
|
||||
{currNav.component}
|
||||
</StyledSettingContainer>
|
||||
{logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfrim} />}
|
||||
</>
|
||||
|
||||
@@ -1,30 +1,52 @@
|
||||
const navs = [
|
||||
{
|
||||
title: "User",
|
||||
items: [
|
||||
{
|
||||
name: "my_account",
|
||||
title: "My Account",
|
||||
},
|
||||
{
|
||||
name: "auth_apps",
|
||||
title: "Authorized Apps",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "App",
|
||||
items: [
|
||||
{
|
||||
name: "appearance",
|
||||
title: "Appearance",
|
||||
},
|
||||
{
|
||||
name: "lang",
|
||||
title: "Language",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
import MyAccount from "./MyAccount";
|
||||
import Overview from "./Overview";
|
||||
import ManageMembers from "../ManageMembers";
|
||||
const getNavs = (members = []) => {
|
||||
const navs = [
|
||||
{
|
||||
title: "General",
|
||||
items: [
|
||||
{
|
||||
name: "overview",
|
||||
title: "Overview",
|
||||
component: <Overview />,
|
||||
},
|
||||
{
|
||||
name: "roles",
|
||||
title: "Roles",
|
||||
},
|
||||
{
|
||||
name: "security",
|
||||
title: "Security",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "User",
|
||||
items: [
|
||||
{
|
||||
name: "my_account",
|
||||
title: "My Account",
|
||||
component: <MyAccount />,
|
||||
},
|
||||
{
|
||||
name: "auth_apps",
|
||||
title: "Authorized Apps",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "User Management",
|
||||
items: [
|
||||
{
|
||||
name: "members",
|
||||
title: "Members",
|
||||
component: <ManageMembers members={members} />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
return navs;
|
||||
};
|
||||
|
||||
export default navs;
|
||||
export default getNavs;
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import styled from "styled-components";
|
||||
const StyledInput = styled.input`
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
|
||||
border-radius: 4px;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #78787c;
|
||||
padding: 8px;
|
||||
`;
|
||||
|
||||
export default StyledInput;
|
||||
@@ -0,0 +1,29 @@
|
||||
import styled from "styled-components";
|
||||
const StyledMenu = styled.ul`
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
|
||||
0px 10px 10px rgba(31, 41, 55, 0.04);
|
||||
border-radius: 6px;
|
||||
.item {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
/* margin: 0 12px; */
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #616161;
|
||||
&.underline {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
&.danger {
|
||||
color: #a11043;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledMenu;
|
||||
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.left {
|
||||
> .left {
|
||||
padding: 32px 16px;
|
||||
min-width: 212px;
|
||||
background-color: #f5f6f7;
|
||||
@@ -58,7 +58,7 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
> .right {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import styled from "styled-components";
|
||||
const StyledTextarea = styled.textarea`
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
|
||||
border-radius: 4px;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #78787c;
|
||||
padding: 8px;
|
||||
resize: unset;
|
||||
`;
|
||||
|
||||
export default StyledTextarea;
|
||||
@@ -3,3 +3,51 @@ export const isObjectEqual = (obj1, obj2) => {
|
||||
let o2 = Object.entries(obj2).sort().toString();
|
||||
return o1 === o2;
|
||||
};
|
||||
export const getNonNullValues = (obj, whiteList = ["log_id"]) => {
|
||||
const tmp = {};
|
||||
Object.keys(obj).forEach((k) => {
|
||||
if (!whiteList.includes(k) && obj[k] !== null) {
|
||||
tmp[k] = obj[k];
|
||||
}
|
||||
});
|
||||
return tmp;
|
||||
};
|
||||
export const getInitials = (name) => {
|
||||
const arr = name.split(" ").filter((n) => !!n);
|
||||
return arr
|
||||
.map((t) => t[0])
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
};
|
||||
export const getInitialsAvatar = ({
|
||||
initials = "UK",
|
||||
initial_size = 0,
|
||||
size = 200,
|
||||
foreground = "#fff",
|
||||
background = "#4c99e9",
|
||||
weight = 400,
|
||||
fontFamily = "'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
||||
}) => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const width = size;
|
||||
const height = size;
|
||||
const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
|
||||
canvas.width = width * devicePixelRatio;
|
||||
canvas.height = height * devicePixelRatio;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
const context = canvas.getContext("2d");
|
||||
context.scale(devicePixelRatio, devicePixelRatio);
|
||||
context.rect(0, 0, canvas.width, canvas.height);
|
||||
context.fillStyle = background;
|
||||
context.fill();
|
||||
context.font = `${weight} ${initial_size || height / 2}px ${fontFamily}`;
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "middle";
|
||||
context.fillStyle = foreground;
|
||||
context.fillText(initials, width / 2, height / 2);
|
||||
|
||||
/* istanbul ignore next */
|
||||
return canvas.toDataURL("image/png");
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user