feat: settings & solid login
This commit is contained in:
zerosoul
@@ -31,6 +31,7 @@
|
||||
"file-loader": "^6.2.0",
|
||||
"fs-extra": "^10.0.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"linkify-it": "^3.0.3",
|
||||
"mini-css-extract-plugin": "^2.5.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dev-utils": "^12.0.0",
|
||||
@@ -40,6 +41,7 @@
|
||||
"react-google-login": "^5.2.2",
|
||||
"react-hot-toast": "^2.2.0",
|
||||
"react-icons": "^4.3.1",
|
||||
"react-linkify": "^1.0.0-alpha",
|
||||
"react-redux": "^7.2.6",
|
||||
"react-refresh": "^0.11.0",
|
||||
"react-router-dom": "6",
|
||||
@@ -53,6 +55,7 @@
|
||||
"styled-components": "^5.3.3",
|
||||
"styled-reset": "^4.3.4",
|
||||
"terser-webpack-plugin": "^5.3.1",
|
||||
"tippy.js": "^6.3.7",
|
||||
"webpack": "^5.68.0",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
"webpack-manifest-plugin": "^4.1.1",
|
||||
|
||||
+12
-3
@@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="icon" href="/api/resource/organization/logo" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="add up everything you input" />
|
||||
@@ -30,7 +30,8 @@
|
||||
</style>
|
||||
</head>
|
||||
<style>
|
||||
#root-modal {
|
||||
#root-modal,
|
||||
#modal-modal {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
@@ -40,7 +41,8 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root-modal>.wrapper {
|
||||
#root-modal>.wrapper,
|
||||
#modal-modal>.wrapper {
|
||||
pointer-events: all;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@@ -75,11 +77,18 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/* animate.css */
|
||||
:root {
|
||||
--animate-delay: 0.1s;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<div id="root-modal"></div>
|
||||
<div id="modal-modal"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
+7
-6
@@ -1,13 +1,14 @@
|
||||
// const BASE_URL = `${location.origin}/api`;
|
||||
const BASE_URL = `https://rustchat.com:3000/api`;
|
||||
const BASE_URL = `https://privoce.rustchat.com/api`;
|
||||
// const BASE_URL = `https://rustchat.net/api`;
|
||||
export const ContentTypes = {
|
||||
text: 'text/plain',
|
||||
image: 'image/png',
|
||||
json: 'application/json'
|
||||
text: "text/plain",
|
||||
image: "image/png",
|
||||
json: "application/json",
|
||||
};
|
||||
export const googleClientID =
|
||||
'418687074928-naojba82n9ktf0rkvnqoor4nhr54ql1b.apps.googleusercontent.com';
|
||||
"418687074928-naojba82n9ktf0rkvnqoor4nhr54ql1b.apps.googleusercontent.com";
|
||||
// "840319286941-6ds7lbvk55eq8mjortf68cb2ll65lprt.apps.googleusercontent.com";
|
||||
export const tokenHeader = 'X-API-Key';
|
||||
export const tokenHeader = "X-API-Key";
|
||||
|
||||
export default BASE_URL;
|
||||
|
||||
+64
-50
@@ -1,56 +1,70 @@
|
||||
import { createApi } from '@reduxjs/toolkit/query/react';
|
||||
import baseQuery from './base.query';
|
||||
import BASE_URL from '../config';
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import baseQuery from "./base.query";
|
||||
import BASE_URL from "../config";
|
||||
export const authApi = createApi({
|
||||
reducerPath: 'auth',
|
||||
baseQuery,
|
||||
endpoints: (builder) => ({
|
||||
login: builder.mutation({
|
||||
query: (credentials) => ({
|
||||
url: 'token/login',
|
||||
method: 'POST',
|
||||
body: { credential: credentials, device: 'web', device_token: 'test' }
|
||||
}),
|
||||
transformResponse: (data) => {
|
||||
const { avatar_updated_at } = data.user;
|
||||
data.user.avatar =
|
||||
avatar_updated_at == 0 ? '' : `${BASE_URL}/resource/avatar?uid=${data.user.uid}`;
|
||||
return data;
|
||||
}
|
||||
reducerPath: "auth",
|
||||
baseQuery,
|
||||
endpoints: (builder) => ({
|
||||
login: builder.mutation({
|
||||
query: (credentials) => ({
|
||||
url: "token/login",
|
||||
method: "POST",
|
||||
body: { credential: credentials, device: "web", device_token: "test" },
|
||||
}),
|
||||
transformResponse: (data) => {
|
||||
const { avatar_updated_at } = data.user;
|
||||
data.user.avatar =
|
||||
avatar_updated_at == 0
|
||||
? ""
|
||||
: `${BASE_URL}/resource/avatar?uid=${data.user.uid}&t=${avatar_updated_at}`;
|
||||
return data;
|
||||
},
|
||||
}),
|
||||
// 更新token
|
||||
renew: builder.mutation({
|
||||
query: ({ token, refreshToken }) => ({
|
||||
url: "/token/renew",
|
||||
method: "POST",
|
||||
body: {
|
||||
token,
|
||||
refresh_token: refreshToken,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
// 获取openid
|
||||
getOpenid: builder.mutation({
|
||||
query: ({ issuer_url }) => ({
|
||||
url: "/token/openid/authorize",
|
||||
method: "POST",
|
||||
body: {
|
||||
issuer_url,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
|
||||
checkInviteTokenValid: builder.mutation({
|
||||
query: (token) => ({
|
||||
url: "user/check_invite_magic_token",
|
||||
method: "POST",
|
||||
body: { magic_token: token },
|
||||
}),
|
||||
}),
|
||||
getMetamaskNonce: builder.query({
|
||||
query: (address) => ({
|
||||
url: `/token/metamask/nonce?public_address=${address}`,
|
||||
}),
|
||||
}),
|
||||
logout: builder.query({
|
||||
query: () => ({ url: `token/logout` }),
|
||||
}),
|
||||
}),
|
||||
// 更新token
|
||||
renew: builder.mutation({
|
||||
query: ({ token, refreshToken }) => ({
|
||||
url: '/token/renew',
|
||||
method: 'POST',
|
||||
body: {
|
||||
token,
|
||||
refresh_token: refreshToken
|
||||
}
|
||||
})
|
||||
}),
|
||||
checkInviteTokenValid: builder.mutation({
|
||||
query: (token) => ({
|
||||
url: 'user/check_invite_magic_token',
|
||||
method: 'POST',
|
||||
body: { magic_token: token }
|
||||
})
|
||||
}),
|
||||
getMetamaskNonce: builder.query({
|
||||
query: (address) => ({
|
||||
url: `/token/metamask/nonce?public_address=${address}`
|
||||
})
|
||||
}),
|
||||
logout: builder.query({
|
||||
query: () => ({ url: `token/logout` })
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
export const {
|
||||
useRenewMutation,
|
||||
useLazyGetMetamaskNonceQuery,
|
||||
useLoginMutation,
|
||||
useLazyLogoutQuery,
|
||||
useCheckInviteTokenValidMutation
|
||||
useGetOpenidMutation,
|
||||
useRenewMutation,
|
||||
useLazyGetMetamaskNonceQuery,
|
||||
useLoginMutation,
|
||||
useLazyLogoutQuery,
|
||||
useCheckInviteTokenValidMutation,
|
||||
} = authApi;
|
||||
|
||||
@@ -4,6 +4,7 @@ import toast from "react-hot-toast";
|
||||
import baseQuery from "./base.query";
|
||||
import { ContentTypes } from "../config";
|
||||
import { addChannelMsg } from "../slices/message.channel";
|
||||
import { updateChannel } from "../slices/channels";
|
||||
import {
|
||||
addPendingMessage,
|
||||
removePendingMessage,
|
||||
@@ -21,6 +22,9 @@ export const channelApi = createApi({
|
||||
getChannels: builder.query({
|
||||
query: () => ({ url: `group` }),
|
||||
}),
|
||||
getChannel: builder.query({
|
||||
query: (id) => ({ url: `group/${id}` }),
|
||||
}),
|
||||
createChannel: builder.mutation({
|
||||
query: (data) => ({
|
||||
url: "group",
|
||||
@@ -28,6 +32,26 @@ export const channelApi = createApi({
|
||||
body: data,
|
||||
}),
|
||||
}),
|
||||
updateChannel: builder.mutation({
|
||||
query: ({ id, ...data }) => ({
|
||||
url: `group/${id}`,
|
||||
method: "PUT",
|
||||
body: data,
|
||||
}),
|
||||
async onQueryStarted(
|
||||
{ id, name, description },
|
||||
{ dispatch, queryFulfilled }
|
||||
) {
|
||||
// id: who send to ,from_uid: who sent
|
||||
const patchResult = dispatch(updateChannel({ id, name, description }));
|
||||
try {
|
||||
await queryFulfilled;
|
||||
} catch {
|
||||
console.log("channel update failed");
|
||||
patchResult.undo();
|
||||
}
|
||||
},
|
||||
}),
|
||||
removeChannel: builder.query({
|
||||
query: (id) => ({
|
||||
url: `group/${id}`,
|
||||
@@ -78,6 +102,8 @@ export const channelApi = createApi({
|
||||
});
|
||||
|
||||
export const {
|
||||
useGetChannelQuery,
|
||||
useUpdateChannelMutation,
|
||||
useLazyRemoveChannelQuery,
|
||||
useGetChannelsQuery,
|
||||
useCreateChannelMutation,
|
||||
|
||||
@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
|
||||
import baseQuery from "./base.query";
|
||||
import BASE_URL, { ContentTypes } from "../config";
|
||||
import { addUserMsg } from "../slices/message.user";
|
||||
import { removeContact } from "../slices/contacts";
|
||||
import {
|
||||
addPendingMessage,
|
||||
removePendingMessage,
|
||||
@@ -26,12 +27,42 @@ export const contactApi = createApi({
|
||||
const avatar =
|
||||
user.avatar_updated_at == 0
|
||||
? ""
|
||||
: `${BASE_URL}/resource/avatar?uid=${user.uid}`;
|
||||
: `${BASE_URL}/resource/avatar?uid=${user.uid}&t=${user.avatar_updated_at}`;
|
||||
user.avatar = avatar;
|
||||
return user;
|
||||
});
|
||||
},
|
||||
}),
|
||||
deleteContact: builder.query({
|
||||
query: (uid) => ({ url: `/admin/user/${uid}`, method: "DELETE" }),
|
||||
async onQueryStarted(uid, { dispatch, queryFulfilled }) {
|
||||
// id: who send to ,from_uid: who sent
|
||||
const patchResult = dispatch(removeContact(uid));
|
||||
try {
|
||||
await queryFulfilled;
|
||||
} catch {
|
||||
console.log("channel update failed");
|
||||
patchResult.undo();
|
||||
}
|
||||
},
|
||||
}),
|
||||
updateAvatar: builder.mutation({
|
||||
query: (data) => ({
|
||||
headers: {
|
||||
"content-type": "image/png",
|
||||
},
|
||||
url: `user/avatar`,
|
||||
method: "POST",
|
||||
body: data,
|
||||
}),
|
||||
}),
|
||||
updateInfo: builder.mutation({
|
||||
query: (data) => ({
|
||||
url: `user`,
|
||||
method: "PUT",
|
||||
body: data,
|
||||
}),
|
||||
}),
|
||||
register: builder.mutation({
|
||||
query: (data) => ({
|
||||
url: `user/register`,
|
||||
@@ -80,6 +111,9 @@ export const contactApi = createApi({
|
||||
});
|
||||
|
||||
export const {
|
||||
useLazyDeleteContactQuery,
|
||||
useUpdateInfoMutation,
|
||||
useUpdateAvatarMutation,
|
||||
useGetContactsQuery,
|
||||
useSendMsgMutation,
|
||||
useRegisterMutation,
|
||||
|
||||
@@ -20,7 +20,28 @@ export const serverApi = createApi({
|
||||
return data;
|
||||
},
|
||||
}),
|
||||
updateLogo: builder.mutation({
|
||||
query: (data) => ({
|
||||
headers: {
|
||||
"content-type": "image/png",
|
||||
},
|
||||
url: `admin/system/organization/logo`,
|
||||
method: "POST",
|
||||
body: data,
|
||||
}),
|
||||
}),
|
||||
updateServer: builder.mutation({
|
||||
query: (data) => ({
|
||||
url: `admin/system/organization`,
|
||||
method: "PUT",
|
||||
body: data,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetServerQuery } = serverApi;
|
||||
export const {
|
||||
useGetServerQuery,
|
||||
useUpdateServerMutation,
|
||||
useUpdateLogoMutation,
|
||||
} = serverApi;
|
||||
|
||||
+66
-42
@@ -1,48 +1,72 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import BASE_URL from "../config";
|
||||
import { getNonNullValues } from "../../common/utils";
|
||||
const initialState = {
|
||||
user: null,
|
||||
usersVersion: null,
|
||||
afterMid: null,
|
||||
token: null,
|
||||
refreshToken: null
|
||||
user: null,
|
||||
usersVersion: null,
|
||||
afterMid: null,
|
||||
token: null,
|
||||
refreshToken: null,
|
||||
};
|
||||
const authDataSlice = createSlice({
|
||||
name: 'authData',
|
||||
initialState,
|
||||
reducers: {
|
||||
setAuthData(state, action) {
|
||||
const { user, token, refresh_token } = action.payload;
|
||||
state.user = user;
|
||||
state.token = token;
|
||||
state.refreshToken = refresh_token;
|
||||
name: "authData",
|
||||
initialState,
|
||||
reducers: {
|
||||
setAuthData(state, action) {
|
||||
const { user, token, refresh_token } = action.payload;
|
||||
state.user = user;
|
||||
state.token = token;
|
||||
state.refreshToken = refresh_token;
|
||||
},
|
||||
updateLoginedUserByLogs(state, action) {
|
||||
const logs = action.payload;
|
||||
logs.forEach(({ action, uid, ...rest }) => {
|
||||
switch (action) {
|
||||
case "update":
|
||||
{
|
||||
const vals = getNonNullValues(rest);
|
||||
console.log("update vals", vals);
|
||||
if (Object.keys(vals).includes("avatar_updated_at")) {
|
||||
vals.avatar = `${BASE_URL}/resource/avatar?uid=${uid}&t=${vals.avatar_updated_at}`;
|
||||
}
|
||||
state.user = { ...state.user, ...vals };
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
clearAuthData(state) {
|
||||
console.log("clear auth data");
|
||||
state.user = null;
|
||||
state.token = null;
|
||||
state.refreshToken = null;
|
||||
},
|
||||
updateToken(state, action) {
|
||||
const { token, refresh_token } = action.payload;
|
||||
console.log("refresh token");
|
||||
state.token = token;
|
||||
state.refreshToken = refresh_token;
|
||||
},
|
||||
setUsersVersion(state, action) {
|
||||
const { version } = action.payload;
|
||||
state.usersVersion = version;
|
||||
},
|
||||
setAfterMid(state, action) {
|
||||
const { mid } = action.payload;
|
||||
state.afterMid = mid;
|
||||
},
|
||||
},
|
||||
clearAuthData(state) {
|
||||
console.log('clear auth data');
|
||||
state.user = null;
|
||||
state.token = null;
|
||||
state.refreshToken = null;
|
||||
// 清掉本地缓存auth data
|
||||
// localStorage.removeItem("AUTH_DATA");
|
||||
// state.afterMid = null;
|
||||
// state.usersVersion = null;
|
||||
},
|
||||
updateToken(state, action) {
|
||||
const { token, refresh_token } = action.payload;
|
||||
console.log('refresh token');
|
||||
state.token = token;
|
||||
state.refreshToken = refresh_token;
|
||||
},
|
||||
setUsersVersion(state, action) {
|
||||
const { version } = action.payload;
|
||||
state.usersVersion = version;
|
||||
},
|
||||
setAfterMid(state, action) {
|
||||
const { mid } = action.payload;
|
||||
state.afterMid = mid;
|
||||
}
|
||||
}
|
||||
});
|
||||
export const { updateToken, setAuthData, clearAuthData, setUsersVersion, setAfterMid } =
|
||||
authDataSlice.actions;
|
||||
export const {
|
||||
updateToken,
|
||||
setAuthData,
|
||||
clearAuthData,
|
||||
setUsersVersion,
|
||||
setAfterMid,
|
||||
updateLoginedUserByLogs,
|
||||
} = authDataSlice.actions;
|
||||
export default authDataSlice.reducer;
|
||||
|
||||
@@ -14,6 +14,14 @@ const channelsSlice = createSlice({
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
updateChannel(state, action) {
|
||||
// console.log("set channels store", action);
|
||||
const { id, name, description } = action.payload;
|
||||
const oObj = state[id];
|
||||
const newObj = { ...oObj, name, description };
|
||||
state[id] = newObj;
|
||||
},
|
||||
addChannel(state, action) {
|
||||
// console.log("set channels store", action);
|
||||
const ch = action.payload;
|
||||
@@ -32,5 +40,10 @@ const channelsSlice = createSlice({
|
||||
// },
|
||||
},
|
||||
});
|
||||
export const { setChannels, addChannel, deleteChannel } = channelsSlice.actions;
|
||||
export const {
|
||||
setChannels,
|
||||
addChannel,
|
||||
deleteChannel,
|
||||
updateChannel,
|
||||
} = channelsSlice.actions;
|
||||
export default channelsSlice.reducer;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import { getNonNullValues } from "../../common/utils";
|
||||
const initialState = [];
|
||||
const contactsSlice = createSlice({
|
||||
name: `contacts`,
|
||||
@@ -9,6 +10,47 @@ const contactsSlice = createSlice({
|
||||
const contacts = action.payload || [];
|
||||
return contacts;
|
||||
},
|
||||
removeContact(state, action) {
|
||||
const uid = action.payload;
|
||||
return state.filter((c) => c.uid != uid);
|
||||
},
|
||||
updateUsersByLogs(state, action) {
|
||||
const changeLogs = action.payload;
|
||||
changeLogs.forEach(({ action, uid, ...rest }) => {
|
||||
switch (action) {
|
||||
case "update":
|
||||
{
|
||||
const vals = getNonNullValues(rest);
|
||||
console.log("update vals", vals);
|
||||
const curr = state.find(({ uid: id }) => id == uid);
|
||||
if (curr) {
|
||||
Object.keys(vals).forEach((k) => {
|
||||
curr[k] = vals[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "create":
|
||||
{
|
||||
state.push({ uid, ...rest });
|
||||
}
|
||||
break;
|
||||
case "delete":
|
||||
{
|
||||
const idx = state.findIndex((o) => {
|
||||
return o.uid == uid;
|
||||
});
|
||||
if (idx > -1) {
|
||||
state.splice(idx, 1);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
updateUsersStatus(state, action) {
|
||||
const onlines = action.payload;
|
||||
onlines.forEach((item) => {
|
||||
@@ -22,5 +64,10 @@ const contactsSlice = createSlice({
|
||||
},
|
||||
},
|
||||
});
|
||||
export const { setContacts, updateUsersStatus } = contactsSlice.actions;
|
||||
export const {
|
||||
setContacts,
|
||||
removeContact,
|
||||
updateUsersByLogs,
|
||||
updateUsersStatus,
|
||||
} = contactsSlice.actions;
|
||||
export default contactsSlice.reducer;
|
||||
|
||||
@@ -3,7 +3,6 @@ import { createSlice } from "@reduxjs/toolkit";
|
||||
const initialState = {
|
||||
menuExpand: true,
|
||||
setting: false,
|
||||
profileSetting: false,
|
||||
channelSetting: null,
|
||||
};
|
||||
const uiSlice = createSlice({
|
||||
@@ -16,9 +15,6 @@ const uiSlice = createSlice({
|
||||
toggleSetting(state) {
|
||||
state.setting = !state.setting;
|
||||
},
|
||||
toggleProfileSetting(state) {
|
||||
state.profileSetting = !state.profileSetting;
|
||||
},
|
||||
toggleChannelSetting(state, action) {
|
||||
console.log("toggle channel setting payload", action);
|
||||
const id = action.payload;
|
||||
@@ -29,7 +25,6 @@ const uiSlice = createSlice({
|
||||
export const {
|
||||
toggleSetting,
|
||||
toggleMenuExpand,
|
||||
toggleProfileSetting,
|
||||
toggleChannelSetting,
|
||||
} = uiSlice.actions;
|
||||
export default uiSlice.reducer;
|
||||
|
||||
@@ -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");
|
||||
};
|
||||
|
||||
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
|
||||
.logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -20,10 +20,12 @@ export default function HomePage() {
|
||||
const {
|
||||
ui: { menuExpand, setting, channelSetting },
|
||||
authData: { usersVersion, afterMid },
|
||||
contacts,
|
||||
} = useSelector((store) => {
|
||||
return {
|
||||
authData: store.authData,
|
||||
ui: store.ui,
|
||||
contacts: store.contacts,
|
||||
};
|
||||
});
|
||||
const { data, loading, error, success } = usePreload();
|
||||
@@ -72,7 +74,7 @@ export default function HomePage() {
|
||||
<Outlet />
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
{setting && <SettingModal />}
|
||||
{setting && <SettingModal contacts={contacts} />}
|
||||
{channelSetting && <ChannelSettingModal id={channelSetting} />}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
/* eslint-disable no-undef */
|
||||
import { useEffect } from "react";
|
||||
import { useGetOpenidMutation } from "../../app/services/auth";
|
||||
export default function SolidLoginButton({ login }) {
|
||||
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
|
||||
|
||||
const handleSolidLogin = async () => {
|
||||
getOpenId({ issuer_url: "https://solidweb.org" });
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
console.log("wtf", data);
|
||||
const { id, url } = data;
|
||||
window.open(url);
|
||||
login({
|
||||
id,
|
||||
type: "oidc",
|
||||
});
|
||||
// location.href = url;
|
||||
}
|
||||
}, [data, isSuccess]);
|
||||
|
||||
return (
|
||||
<button
|
||||
disabled={isLoading}
|
||||
onClick={handleSolidLogin}
|
||||
href="#"
|
||||
className="btn social"
|
||||
>
|
||||
<img
|
||||
className="icon"
|
||||
src="https://solidproject.org/assets/img/solid-emblem.svg"
|
||||
alt="solid logo icon"
|
||||
/>
|
||||
Sign in with Solid
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import toast from "react-hot-toast";
|
||||
|
||||
// import web3 from "web3";
|
||||
import MetamaskLoginButton from "./MetamaskLoginButton";
|
||||
import SolidLoginButton from "./SolidLoginButton";
|
||||
|
||||
import GoogleLoginButton from "./GoogleLoginButton";
|
||||
import { useLoginMutation } from "../../app/services/auth";
|
||||
@@ -109,6 +110,7 @@ export default function LoginPage() {
|
||||
<hr className="or" />
|
||||
<GoogleLoginButton login={login} />
|
||||
<MetamaskLoginButton login={login} />
|
||||
<SolidLoginButton login={login} />
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
|
||||
@@ -4808,6 +4808,20 @@ lines-and-columns@^1.1.6:
|
||||
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
|
||||
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
|
||||
|
||||
linkify-it@^2.0.3:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
|
||||
integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
|
||||
dependencies:
|
||||
uc.micro "^1.0.1"
|
||||
|
||||
linkify-it@^3.0.3:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
|
||||
integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
|
||||
dependencies:
|
||||
uc.micro "^1.0.1"
|
||||
|
||||
lint-staged@^12.3.3:
|
||||
version "12.3.3"
|
||||
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.3.tgz#0a465962fe53baa2b4b9da50801ead49a910e03b"
|
||||
@@ -6338,6 +6352,14 @@ react-is@^17.0.2:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
|
||||
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
|
||||
|
||||
react-linkify@^1.0.0-alpha:
|
||||
version "1.0.0-alpha"
|
||||
resolved "https://registry.yarnpkg.com/react-linkify/-/react-linkify-1.0.0-alpha.tgz#b391c7b88e3443752fafe76a95ca4434e82e70d5"
|
||||
integrity sha512-7gcIUvJkAXXttt1fmBK9cwn+1jTa4hbKLGCZ9J1U6EOkyb2/+LKL1Z28d9rtDLMnpvImlNlLPdTPooorl5cpmg==
|
||||
dependencies:
|
||||
linkify-it "^2.0.3"
|
||||
tlds "^1.199.0"
|
||||
|
||||
react-redux@^7.2.6:
|
||||
version "7.2.6"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
|
||||
@@ -7399,13 +7421,18 @@ timsort@^0.3.0:
|
||||
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
tippy.js@^6.3.1:
|
||||
tippy.js@^6.3.1, tippy.js@^6.3.7:
|
||||
version "6.3.7"
|
||||
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
|
||||
integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
|
||||
dependencies:
|
||||
"@popperjs/core" "^2.9.0"
|
||||
|
||||
tlds@^1.199.0:
|
||||
version "1.230.0"
|
||||
resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.230.0.tgz#9c836528c4062e565b3b58bfaef83d99e09c113d"
|
||||
integrity sha512-QFuY6JBWZt2bZXlapjqsojul5dv9xfo7Uc8wTUlctJOuF+BS/ICni2f4x7MFiT7muUVmcKC1LvGnU4GWhYO0PQ==
|
||||
|
||||
to-fast-properties@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
|
||||
@@ -7535,6 +7562,11 @@ type-is@~1.6.18:
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
|
||||
integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
|
||||
|
||||
uc.micro@^1.0.1:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
|
||||
integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
|
||||
|
||||
unbox-primitive@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
|
||||
|
||||
Reference in New Issue
Block a user