feat: redesign project sharing & initial registration
redesigned the project sharing popup to be a multi select dropdown that populates the options by using the input as a fuzzy search filter on the current users & invited users. users can now also be directly invited by email from the project share window. if invited this way, then the user will receive an email that sends them to a registration page, then a confirmation page. the initial registration was always redone so that it uses a similar system to the above in that it now will accept the first registered user if there are no other accounts (besides 'system').
This commit is contained in:
Jordan Knott
@ -5,6 +5,7 @@ import GlobalTopNavbar from 'App/TopNavbar';
|
||||
import {
|
||||
useUsersQuery,
|
||||
useDeleteUserAccountMutation,
|
||||
useDeleteInvitedUserAccountMutation,
|
||||
useCreateUserAccountMutation,
|
||||
UsersDocument,
|
||||
UsersQuery,
|
||||
@ -176,6 +177,17 @@ const AdminRoute = () => {
|
||||
const { loading, data } = useUsersQuery();
|
||||
const { showPopup, hidePopup } = usePopup();
|
||||
const { user } = useCurrentUser();
|
||||
const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.invitedUsers = cache.invitedUsers.filter(
|
||||
u => u.id !== response.data.deleteInvitedUserAccount.invitedUser.id,
|
||||
);
|
||||
}),
|
||||
);
|
||||
},
|
||||
});
|
||||
const [deleteUser] = useDeleteUserAccountMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
|
||||
@ -215,11 +227,16 @@ const AdminRoute = () => {
|
||||
<Admin
|
||||
initialTab={0}
|
||||
users={data.users}
|
||||
invitedUsers={data.invitedUsers}
|
||||
canInviteUser={user.roles.org === 'admin'}
|
||||
onInviteUser={NOOP}
|
||||
onUpdateUserPassword={() => {
|
||||
hidePopup();
|
||||
}}
|
||||
onDeleteInvitedUser={invitedUserID => {
|
||||
deleteInvitedUser({ variables: { invitedUserID } });
|
||||
hidePopup();
|
||||
}}
|
||||
onDeleteUser={(userID, newOwnerID) => {
|
||||
deleteUser({ variables: { userID, newOwnerID } });
|
||||
hidePopup();
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
import React from 'react';
|
||||
import { Switch, Route } from 'react-router-dom';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Switch, Route, useHistory } from 'react-router-dom';
|
||||
import * as H from 'history';
|
||||
|
||||
import Dashboard from 'Dashboard';
|
||||
import Admin from 'Admin';
|
||||
import Confirm from 'Confirm';
|
||||
import Projects from 'Projects';
|
||||
import Project from 'Projects/Project';
|
||||
import Teams from 'Teams';
|
||||
import Login from 'Auth';
|
||||
import Install from 'Install';
|
||||
import Register from 'Register';
|
||||
import Profile from 'Profile';
|
||||
import styled from 'styled-components';
|
||||
import JwtDecode from 'jwt-decode';
|
||||
import { setAccessToken } from 'shared/utils/accessToken';
|
||||
import { useCurrentUser } from 'App/context';
|
||||
|
||||
const MainContent = styled.div`
|
||||
padding: 0 0 0 0;
|
||||
@ -21,6 +25,50 @@ const MainContent = styled.div`
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const AuthorizedRoutes = () => {
|
||||
const history = useHistory();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { setUser } = useCurrentUser();
|
||||
useEffect(() => {
|
||||
fetch('/auth/refresh_token', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 400) {
|
||||
history.replace('/login');
|
||||
} else {
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { accessToken, setup } = response;
|
||||
if (setup) {
|
||||
history.replace(`/register?confirmToken=${setup.confirmToken}`);
|
||||
} else {
|
||||
const claims: JWTToken = JwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
return loading ? null : (
|
||||
<Switch>
|
||||
<MainContent>
|
||||
<Route exact path="/" component={Dashboard} />
|
||||
<Route exact path="/projects" component={Projects} />
|
||||
<Route path="/projects/:projectID" component={Project} />
|
||||
<Route path="/teams/:teamID" component={Teams} />
|
||||
<Route path="/profile" component={Profile} />
|
||||
<Route path="/admin" component={Admin} />
|
||||
</MainContent>
|
||||
</Switch>
|
||||
);
|
||||
};
|
||||
|
||||
type RoutesProps = {
|
||||
history: H.History;
|
||||
};
|
||||
@ -28,15 +76,9 @@ type RoutesProps = {
|
||||
const Routes: React.FC<RoutesProps> = () => (
|
||||
<Switch>
|
||||
<Route exact path="/login" component={Login} />
|
||||
<Route exact path="/install" component={Install} />
|
||||
<MainContent>
|
||||
<Route exact path="/" component={Dashboard} />
|
||||
<Route exact path="/projects" component={Projects} />
|
||||
<Route path="/projects/:projectID" component={Project} />
|
||||
<Route path="/teams/:teamID" component={Teams} />
|
||||
<Route path="/profile" component={Profile} />
|
||||
<Route path="/admin" component={Admin} />
|
||||
</MainContent>
|
||||
<Route exact path="/register" component={Register} />
|
||||
<Route exact path="/confirm" component={Confirm} />
|
||||
<AuthorizedRoutes />
|
||||
</Switch>
|
||||
);
|
||||
|
||||
|
||||
@ -230,10 +230,12 @@ type GlobalTopNavbarProps = {
|
||||
menuType?: Array<MenuItem>;
|
||||
onChangeRole?: (userID: string, roleCode: RoleCode) => void;
|
||||
projectMembers?: null | Array<TaskUser>;
|
||||
projectInvitedMembers?: null | Array<InvitedUser>;
|
||||
onSaveProjectName?: (projectName: string) => void;
|
||||
onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
|
||||
onSetTab?: (tab: number) => void;
|
||||
onRemoveFromBoard?: (userID: string) => void;
|
||||
onRemoveInvitedFromBoard?: (email: string) => void;
|
||||
};
|
||||
|
||||
const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
@ -246,8 +248,10 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
name,
|
||||
popupContent,
|
||||
projectMembers,
|
||||
projectInvitedMembers,
|
||||
onInviteUser,
|
||||
onSaveProjectName,
|
||||
onRemoveInvitedFromBoard,
|
||||
onRemoveFromBoard,
|
||||
}) => {
|
||||
const { user, setUserRoles, setUser } = useCurrentUser();
|
||||
@ -333,6 +337,34 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
return null;
|
||||
}
|
||||
const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
|
||||
const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
|
||||
const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
|
||||
if (member) {
|
||||
showPopup(
|
||||
$targetRef,
|
||||
<MiniProfile
|
||||
onRemoveFromBoard={() => {
|
||||
if (onRemoveInvitedFromBoard) {
|
||||
onRemoveInvitedFromBoard(member.email);
|
||||
}
|
||||
}}
|
||||
invited
|
||||
user={{
|
||||
id: member.email,
|
||||
fullName: member.email,
|
||||
bio: 'Invited',
|
||||
profileIcon: {
|
||||
bgColor: '#000',
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
},
|
||||
}}
|
||||
bio=""
|
||||
/>,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
|
||||
const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
|
||||
const warning =
|
||||
@ -382,6 +414,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
canEditProjectName={userIsTeamOrProjectAdmin}
|
||||
canInviteUser={userIsTeamOrProjectAdmin}
|
||||
onMemberProfile={onMemberProfile}
|
||||
onInvitedMemberProfile={onInvitedMemberProfile}
|
||||
onInviteUser={onInviteUser}
|
||||
onChangeRole={onChangeRole}
|
||||
onChangeProjectOwner={onChangeProjectOwner}
|
||||
@ -392,6 +425,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
history.push('/');
|
||||
}}
|
||||
projectMembers={projectMembers}
|
||||
projectInvitedMembers={projectInvitedMembers}
|
||||
onProfileClick={onProfileClick}
|
||||
onSaveName={onSaveProjectName}
|
||||
onOpenSettings={onOpenSettings}
|
||||
|
||||
@ -52,7 +52,6 @@ type RefreshTokenResponse = {
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [user, setUser] = useState<CurrentUserRaw | null>(null);
|
||||
const setUserRoles = (roles: CurrentUserRoles) => {
|
||||
if (user) {
|
||||
@ -63,32 +62,6 @@ const App = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/auth/refresh_token', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 400) {
|
||||
history.replace('/login');
|
||||
} else {
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { accessToken, isInstalled } = response;
|
||||
const claims: JWTToken = jwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
if (!isInstalled) {
|
||||
history.replace('/install');
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<UserContext.Provider value={{ user, setUser, setUserRoles }}>
|
||||
@ -97,13 +70,7 @@ const App = () => {
|
||||
<BaseStyles />
|
||||
<Router history={history}>
|
||||
<PopupProvider>
|
||||
{loading ? (
|
||||
<div>loading</div>
|
||||
) : (
|
||||
<>
|
||||
<Routes history={history} />
|
||||
</>
|
||||
)}
|
||||
<Routes history={history} />
|
||||
</PopupProvider>
|
||||
</Router>
|
||||
<StyledContainer
|
||||
|
||||
@ -52,7 +52,20 @@ const Auth = () => {
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 200) {
|
||||
history.replace('/projects');
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { accessToken, setup } = response;
|
||||
if (setup) {
|
||||
history.replace(`/register?confirmToken=${setup.confirmToken}`);
|
||||
} else {
|
||||
const claims: JWTToken = JwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
history.replace('/projects');
|
||||
}
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
61
frontend/src/Confirm/index.tsx
Normal file
61
frontend/src/Confirm/index.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import Confirm from 'shared/components/Confirm';
|
||||
import { useHistory, useLocation } from 'react-router';
|
||||
import * as QueryString from 'query-string';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Container, LoginWrapper } from './Styles';
|
||||
import JwtDecode from 'jwt-decode';
|
||||
import { setAccessToken } from 'shared/utils/accessToken';
|
||||
import { useCurrentUser } from 'App/context';
|
||||
|
||||
const UsersConfirm = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const [registered, setRegistered] = useState(false);
|
||||
const params = QueryString.parse(location.search);
|
||||
const { setUser } = useCurrentUser();
|
||||
return (
|
||||
<Container>
|
||||
<LoginWrapper>
|
||||
<Confirm
|
||||
hasConfirmToken={params.confirmToken !== undefined}
|
||||
onConfirmUser={setFailed => {
|
||||
fetch('/auth/confirm', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
confirmToken: params.confirmToken,
|
||||
}),
|
||||
})
|
||||
.then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 200) {
|
||||
const response = await x.json();
|
||||
const { accessToken } = response;
|
||||
const claims: JWTToken = JwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: {
|
||||
org: claims.orgRole,
|
||||
teams: new Map<string, string>(),
|
||||
projects: new Map<string, string>(),
|
||||
},
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
history.push('/');
|
||||
} else {
|
||||
setFailed();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setFailed();
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</LoginWrapper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default UsersConfirm;
|
||||
@ -1,88 +0,0 @@
|
||||
import React, { useEffect, useContext } from 'react';
|
||||
import axios from 'axios';
|
||||
import Register from 'shared/components/Register';
|
||||
import { useHistory } from 'react-router';
|
||||
import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
|
||||
import UserContext from 'App/context';
|
||||
import jwtDecode from 'jwt-decode';
|
||||
import { Container, LoginWrapper } from './Styles';
|
||||
|
||||
const Install = () => {
|
||||
const history = useHistory();
|
||||
const { setUser } = useContext(UserContext);
|
||||
useEffect(() => {
|
||||
fetch('/auth/refresh_token', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { isInstalled } = response;
|
||||
if (status === 200 && isInstalled) {
|
||||
history.replace('/projects');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<Container>
|
||||
<LoginWrapper>
|
||||
<Register
|
||||
onSubmit={(data, setComplete, setError) => {
|
||||
const accessToken = getAccessToken();
|
||||
if (data.password !== data.password_confirm) {
|
||||
setError('password', { type: 'error', message: 'Passwords must match' });
|
||||
setError('password_confirm', { type: 'error', message: 'Passwords must match' });
|
||||
} else {
|
||||
axios
|
||||
.post(
|
||||
'/auth/install',
|
||||
{
|
||||
user: {
|
||||
username: data.username,
|
||||
roleCode: 'admin',
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
initials: data.initials,
|
||||
fullname: data.fullname,
|
||||
},
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
},
|
||||
)
|
||||
.then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 400) {
|
||||
history.replace('/login');
|
||||
} else {
|
||||
const response: RefreshTokenResponse = await x.data;
|
||||
const { accessToken: newToken, isInstalled } = response;
|
||||
const claims: JWTToken = jwtDecode(newToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: {
|
||||
org: claims.orgRole,
|
||||
teams: new Map<string, string>(),
|
||||
projects: new Map<string, string>(),
|
||||
},
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(newToken);
|
||||
if (!isInstalled) {
|
||||
history.replace('/install');
|
||||
}
|
||||
}
|
||||
history.push('/projects');
|
||||
});
|
||||
}
|
||||
setComplete(true);
|
||||
}}
|
||||
/>
|
||||
</LoginWrapper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Install;
|
||||
@ -3,32 +3,11 @@ import updateApolloCache from 'shared/utils/cache';
|
||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||
import produce from 'immer';
|
||||
import {
|
||||
useUpdateProjectMemberRoleMutation,
|
||||
useCreateProjectMemberMutation,
|
||||
useDeleteProjectMemberMutation,
|
||||
useSetTaskCompleteMutation,
|
||||
useToggleTaskLabelMutation,
|
||||
useUpdateProjectNameMutation,
|
||||
useFindProjectQuery,
|
||||
useUpdateTaskGroupNameMutation,
|
||||
useUpdateTaskNameMutation,
|
||||
useUpdateProjectLabelMutation,
|
||||
useCreateTaskMutation,
|
||||
useDeleteProjectLabelMutation,
|
||||
useDeleteTaskMutation,
|
||||
useUpdateTaskLocationMutation,
|
||||
useUpdateTaskGroupLocationMutation,
|
||||
useCreateTaskGroupMutation,
|
||||
useDeleteTaskGroupMutation,
|
||||
useUpdateTaskDescriptionMutation,
|
||||
useAssignTaskMutation,
|
||||
DeleteTaskDocument,
|
||||
FindProjectDocument,
|
||||
useCreateProjectLabelMutation,
|
||||
useUnassignTaskMutation,
|
||||
useUpdateTaskDueDateMutation,
|
||||
FindProjectQuery,
|
||||
useUsersQuery,
|
||||
} from 'shared/generated/graphql';
|
||||
import LabelManager from 'shared/components/PopupMenu/LabelManager';
|
||||
import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
|
||||
|
||||
@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
|
||||
import updateApolloCache from 'shared/utils/cache';
|
||||
import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
|
||||
import styled from 'styled-components/macro';
|
||||
import AsyncSelect from 'react-select/async';
|
||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||
import {
|
||||
useParams,
|
||||
@ -15,11 +16,12 @@ import {
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
useUpdateProjectMemberRoleMutation,
|
||||
useCreateProjectMemberMutation,
|
||||
useInviteProjectMembersMutation,
|
||||
useDeleteProjectMemberMutation,
|
||||
useToggleTaskLabelMutation,
|
||||
useUpdateProjectNameMutation,
|
||||
useFindProjectQuery,
|
||||
useDeleteInvitedProjectMemberMutation,
|
||||
useUpdateTaskNameMutation,
|
||||
useCreateTaskMutation,
|
||||
useDeleteTaskMutation,
|
||||
@ -37,12 +39,20 @@ import Input from 'shared/components/Input';
|
||||
import Member from 'shared/components/Member';
|
||||
import EmptyBoard from 'shared/components/EmptyBoard';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { Lock, Cross } from 'shared/icons';
|
||||
import Button from 'shared/components/Button';
|
||||
import { useApolloClient } from '@apollo/react-hooks';
|
||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||
import gql from 'graphql-tag';
|
||||
import { colourStyles } from 'shared/components/Select';
|
||||
import Board, { BoardLoading } from './Board';
|
||||
import Details from './Details';
|
||||
import LabelManagerEditor from './LabelManagerEditor';
|
||||
|
||||
const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
|
||||
|
||||
const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
|
||||
|
||||
const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
|
||||
const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
|
||||
|
||||
@ -70,29 +80,299 @@ const MemberList = styled.div`
|
||||
margin: 8px 0;
|
||||
`;
|
||||
|
||||
type InviteUserData = {
|
||||
email?: string;
|
||||
suerID?: string;
|
||||
};
|
||||
type UserManagementPopupProps = {
|
||||
projectID: string;
|
||||
users: Array<User>;
|
||||
projectMembers: Array<TaskUser>;
|
||||
onAddProjectMember: (userID: string) => void;
|
||||
onInviteProjectMembers: (data: Array<InviteUserData>) => void;
|
||||
};
|
||||
|
||||
const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
|
||||
const VisibiltyPrivateIcon = styled(Lock)`
|
||||
padding-right: 4px;
|
||||
`;
|
||||
|
||||
const VisibiltyButtonText = styled.span`
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const ShareActions = styled.div`
|
||||
border-top: 1px solid #414561;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const VisibiltyButton = styled.button`
|
||||
cursor: pointer;
|
||||
margin: 2px 4px;
|
||||
padding: 2px 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid transparent;
|
||||
&:hover ${VisibiltyButtonText} {
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover ${VisibiltyPrivateIcon} {
|
||||
fill: rgba(${props => props.theme.colors.text.secondary});
|
||||
stroke: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
|
||||
}
|
||||
`;
|
||||
|
||||
type MemberFilterOptions = {
|
||||
projectID?: null | string;
|
||||
teamID?: null | string;
|
||||
organization?: boolean;
|
||||
};
|
||||
|
||||
const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
|
||||
console.log(input.trim().length < 3);
|
||||
if (input && input.trim().length < 3) {
|
||||
return [];
|
||||
}
|
||||
const res = await client.query({
|
||||
query: gql`
|
||||
query {
|
||||
searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
|
||||
id
|
||||
similarity
|
||||
status
|
||||
user {
|
||||
id
|
||||
fullName
|
||||
email
|
||||
profileIcon {
|
||||
url
|
||||
initials
|
||||
bgColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
});
|
||||
|
||||
let results: any = [];
|
||||
const emails: Array<string> = [];
|
||||
console.log(res.data && res.data.searchMembers);
|
||||
if (res.data && res.data.searchMembers) {
|
||||
results = [
|
||||
...res.data.searchMembers.map((m: any) => {
|
||||
if (m.status === 'INVITED') {
|
||||
console.log(`${m.id} is added`);
|
||||
return {
|
||||
label: m.id,
|
||||
value: {
|
||||
id: m.id,
|
||||
type: 2,
|
||||
profileIcon: {
|
||||
bgColor: '#ccc',
|
||||
initials: m.id.charAt(0),
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
console.log(`${m.user.email} is added`);
|
||||
emails.push(m.user.email);
|
||||
return {
|
||||
label: m.user.fullName,
|
||||
value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
|
||||
};
|
||||
}
|
||||
}),
|
||||
];
|
||||
console.log(results);
|
||||
}
|
||||
|
||||
if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
|
||||
results = [
|
||||
...results,
|
||||
{
|
||||
label: input,
|
||||
value: {
|
||||
id: input,
|
||||
type: 1,
|
||||
profileIcon: {
|
||||
bgColor: '#ccc',
|
||||
initials: input.charAt(0),
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
type UserOptionProps = {
|
||||
innerProps: any;
|
||||
isDisabled: boolean;
|
||||
isFocused: boolean;
|
||||
label: string;
|
||||
data: any;
|
||||
getValue: any;
|
||||
};
|
||||
|
||||
const OptionWrapper = styled.div<{ isFocused: boolean }>`
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
const OptionContent = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
`;
|
||||
|
||||
const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: ${p => p.fontSize}px;
|
||||
color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
|
||||
`;
|
||||
|
||||
const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
|
||||
console.log(data);
|
||||
return !isDisabled ? (
|
||||
<OptionWrapper {...innerProps} isFocused={isFocused}>
|
||||
<TaskAssignee
|
||||
size={32}
|
||||
member={{
|
||||
id: '',
|
||||
fullName: data.value.label,
|
||||
profileIcon: data.value.profileIcon,
|
||||
}}
|
||||
/>
|
||||
<OptionContent>
|
||||
<OptionLabel fontSize={16} quiet={false}>
|
||||
{label}
|
||||
</OptionLabel>
|
||||
{data.value.type === 2 && (
|
||||
<OptionLabel fontSize={14} quiet>
|
||||
Joined
|
||||
</OptionLabel>
|
||||
)}
|
||||
</OptionContent>
|
||||
</OptionWrapper>
|
||||
) : null;
|
||||
};
|
||||
|
||||
const OptionValueWrapper = styled.div`
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
border-radius: 4px;
|
||||
margin: 2px;
|
||||
padding: 3px 6px 3px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const OptionValueLabel = styled.span`
|
||||
font-size: 12px;
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
`;
|
||||
|
||||
const OptionValueRemove = styled.button`
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 4px;
|
||||
`;
|
||||
const OptionValue = ({ data, removeProps }: any) => {
|
||||
return (
|
||||
<OptionValueWrapper>
|
||||
<OptionValueLabel>{data.label}</OptionValueLabel>
|
||||
<OptionValueRemove {...removeProps}>
|
||||
<Cross width={14} height={14} />
|
||||
</OptionValueRemove>
|
||||
</OptionValueWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const InviteButton = styled(Button)`
|
||||
margin-top: 12px;
|
||||
height: 32px;
|
||||
padding: 4px 12px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const InviteContainer = styled.div`
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
|
||||
projectID,
|
||||
users,
|
||||
projectMembers,
|
||||
onInviteProjectMembers,
|
||||
}) => {
|
||||
const client = useApolloClient();
|
||||
const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
|
||||
return (
|
||||
<Popup tab={0} title="Invite a user">
|
||||
<SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
|
||||
<MemberList>
|
||||
{users
|
||||
.filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
|
||||
.map(user => (
|
||||
<UserMember
|
||||
key={user.id}
|
||||
onCardMemberClick={() => onAddProjectMember(user.id)}
|
||||
showName
|
||||
member={user}
|
||||
taskID=""
|
||||
/>
|
||||
))}
|
||||
</MemberList>
|
||||
<InviteContainer>
|
||||
<AsyncSelect
|
||||
getOptionValue={option => option.value.id}
|
||||
placeholder="Email address or username"
|
||||
noOptionsMessage={() => null}
|
||||
onChange={(e: any) => {
|
||||
setInvitedUsers(e);
|
||||
}}
|
||||
isMulti
|
||||
autoFocus
|
||||
cacheOptions
|
||||
styles={colourStyles}
|
||||
defaultOption
|
||||
components={{
|
||||
MultiValue: OptionValue,
|
||||
Option: UserOption,
|
||||
IndicatorSeparator: null,
|
||||
DropdownIndicator: null,
|
||||
}}
|
||||
loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
|
||||
/>
|
||||
</InviteContainer>
|
||||
<InviteButton
|
||||
onClick={() => {
|
||||
if (invitedUsers) {
|
||||
onInviteProjectMembers(
|
||||
invitedUsers.map(user => {
|
||||
if (user.value.type === 0) {
|
||||
return {
|
||||
userID: user.value.id,
|
||||
};
|
||||
}
|
||||
return {
|
||||
email: user.value.id,
|
||||
};
|
||||
}),
|
||||
);
|
||||
}
|
||||
}}
|
||||
disabled={invitedUsers === null}
|
||||
hoverVariant="none"
|
||||
fontSize="16px"
|
||||
>
|
||||
Send Invite
|
||||
</InviteButton>
|
||||
</Popup>
|
||||
);
|
||||
};
|
||||
@ -176,14 +456,36 @@ const Project = () => {
|
||||
},
|
||||
});
|
||||
|
||||
const [createProjectMember] = useCreateProjectMemberMutation({
|
||||
const [inviteProjectMembers] = useInviteProjectMembersMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<FindProjectQuery>(
|
||||
client,
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
|
||||
draftCache.findProject.members = [
|
||||
...cache.findProject.members,
|
||||
...response.data.inviteProjectMembers.members,
|
||||
];
|
||||
draftCache.findProject.invitedMembers = [
|
||||
...cache.findProject.invitedMembers,
|
||||
...response.data.inviteProjectMembers.invitedMembers,
|
||||
];
|
||||
}),
|
||||
{ projectID },
|
||||
);
|
||||
},
|
||||
});
|
||||
const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<FindProjectQuery>(
|
||||
client,
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
|
||||
m => m.email !== response.data.deleteInvitedProjectMember.invitedMember.email,
|
||||
);
|
||||
}),
|
||||
{ projectID },
|
||||
);
|
||||
@ -243,6 +545,10 @@ const Project = () => {
|
||||
deleteProjectMember({ variables: { userID, projectID } });
|
||||
hidePopup();
|
||||
}}
|
||||
onRemoveInvitedFromBoard={email => {
|
||||
deleteInvitedProjectMember({ variables: { projectID, email } });
|
||||
hidePopup();
|
||||
}}
|
||||
onSaveProjectName={projectName => {
|
||||
updateProjectName({ variables: { projectID, name: projectName } });
|
||||
}}
|
||||
@ -250,8 +556,10 @@ const Project = () => {
|
||||
showPopup(
|
||||
$target,
|
||||
<UserManagementPopup
|
||||
onAddProjectMember={userID => {
|
||||
createProjectMember({ variables: { userID, projectID } });
|
||||
projectID={projectID}
|
||||
onInviteProjectMembers={members => {
|
||||
inviteProjectMembers({ variables: { projectID, members } });
|
||||
hidePopup();
|
||||
}}
|
||||
users={data.users}
|
||||
projectMembers={data.findProject.members}
|
||||
@ -262,6 +570,7 @@ const Project = () => {
|
||||
menuType={[{ name: 'Board', link: location.pathname }]}
|
||||
currentTab={0}
|
||||
projectMembers={data.findProject.members}
|
||||
projectInvitedMembers={data.findProject.invitedMembers}
|
||||
projectID={projectID}
|
||||
teamID={data.findProject.team ? data.findProject.team.id : null}
|
||||
name={data.findProject.name}
|
||||
|
||||
13
frontend/src/Register/Styles.ts
Normal file
13
frontend/src/Register/Styles.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
export const LoginWrapper = styled.div`
|
||||
width: 60%;
|
||||
`;
|
||||
62
frontend/src/Register/index.tsx
Normal file
62
frontend/src/Register/index.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import Register from 'shared/components/Register';
|
||||
import { useHistory, useLocation } from 'react-router';
|
||||
import * as QueryString from 'query-string';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Container, LoginWrapper } from './Styles';
|
||||
|
||||
const UsersRegister = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const [registered, setRegistered] = useState(false);
|
||||
const params = QueryString.parse(location.search);
|
||||
return (
|
||||
<Container>
|
||||
<LoginWrapper>
|
||||
<Register
|
||||
registered={registered}
|
||||
onSubmit={(data, setComplete, setError) => {
|
||||
if (data.password !== data.password_confirm) {
|
||||
setError('password', { type: 'error', message: 'Passwords must match' });
|
||||
setError('password_confirm', { type: 'error', message: 'Passwords must match' });
|
||||
} else {
|
||||
// TODO: change to fetch?
|
||||
fetch('/auth/register', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
user: {
|
||||
username: data.username,
|
||||
roleCode: 'admin',
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
initials: data.initials,
|
||||
fullname: data.fullname,
|
||||
},
|
||||
}),
|
||||
})
|
||||
.then(async x => {
|
||||
const response = await x.json();
|
||||
const { setup } = response;
|
||||
console.log(response);
|
||||
if (setup) {
|
||||
history.replace(`/confirm?confirmToken=xxxx`);
|
||||
} else if (params.confirmToken) {
|
||||
history.replace(`/confirm?confirmToken=${params.confirmToken}`);
|
||||
} else {
|
||||
setRegistered(true);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
toast('There was an issue trying to register');
|
||||
});
|
||||
}
|
||||
setComplete(true);
|
||||
}}
|
||||
/>
|
||||
</LoginWrapper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default UsersRegister;
|
||||
0
frontend/src/outline.d.ts
vendored
Normal file
0
frontend/src/outline.d.ts
vendored
Normal file
@ -51,7 +51,9 @@ export const Default = () => {
|
||||
},
|
||||
},
|
||||
]}
|
||||
invitedUsers={[]}
|
||||
onAddUser={action('add user')}
|
||||
onDeleteInvitedUser={action('delete invited user')}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
</>
|
||||
|
||||
@ -104,8 +104,8 @@ type TeamRoleManagerPopupProps = {
|
||||
user: User;
|
||||
users: Array<User>;
|
||||
warning?: string | null;
|
||||
canChangeRole: boolean;
|
||||
onChangeRole: (roleCode: RoleCode) => void;
|
||||
canChangeRole?: boolean;
|
||||
onChangeRole?: (roleCode: RoleCode) => void;
|
||||
updateUserPassword?: (user: TaskUser, password: string) => void;
|
||||
onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
|
||||
};
|
||||
@ -530,8 +530,10 @@ type AdminProps = {
|
||||
onDeleteUser: (userID: string, newOwnerID: string | null) => void;
|
||||
onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
|
||||
users: Array<User>;
|
||||
invitedUsers: Array<InvitedUserAccount>;
|
||||
canInviteUser: boolean;
|
||||
onUpdateUserPassword: (user: TaskUser, password: string) => void;
|
||||
onDeleteInvitedUser: (invitedUserID: string) => void;
|
||||
};
|
||||
|
||||
const Admin: React.FC<AdminProps> = ({
|
||||
@ -540,7 +542,9 @@ const Admin: React.FC<AdminProps> = ({
|
||||
onUpdateUserPassword,
|
||||
canInviteUser,
|
||||
onDeleteUser,
|
||||
onDeleteInvitedUser,
|
||||
onInviteUser,
|
||||
invitedUsers,
|
||||
users,
|
||||
}) => {
|
||||
const warning =
|
||||
@ -577,7 +581,7 @@ const Admin: React.FC<AdminProps> = ({
|
||||
<TabContent>
|
||||
<MemberListWrapper>
|
||||
<MemberListHeader>
|
||||
<ListTitle>{`Members (${users.length})`}</ListTitle>
|
||||
<ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
|
||||
<ListDesc>
|
||||
Organization admins can create / manage / delete all projects & teams. Members only have access to teams
|
||||
or projects they have been added to.
|
||||
@ -635,6 +639,65 @@ const Admin: React.FC<AdminProps> = ({
|
||||
</MemberListItem>
|
||||
);
|
||||
})}
|
||||
{invitedUsers.map(member => {
|
||||
return (
|
||||
<MemberListItem>
|
||||
<MemberProfile
|
||||
showRoleIcons
|
||||
size={32}
|
||||
onMemberProfile={NOOP}
|
||||
member={{
|
||||
id: member.id,
|
||||
fullName: member.email,
|
||||
profileIcon: {
|
||||
bgColor: '#fff',
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<MemberListItemDetails>
|
||||
<MemberItemName>{member.email}</MemberItemName>
|
||||
<MemberItemUsername>Invited</MemberItemUsername>
|
||||
</MemberListItemDetails>
|
||||
<MemberItemOptions>
|
||||
<MemberItemOption
|
||||
variant="outline"
|
||||
onClick={$target => {
|
||||
showPopup(
|
||||
$target,
|
||||
<TeamRoleManagerPopup
|
||||
user={{
|
||||
id: member.id,
|
||||
fullName: member.email,
|
||||
profileIcon: {
|
||||
bgColor: '#fff',
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
},
|
||||
member: {
|
||||
teams: [],
|
||||
projects: [],
|
||||
},
|
||||
owned: {
|
||||
teams: [],
|
||||
projects: [],
|
||||
},
|
||||
}}
|
||||
users={users}
|
||||
onDeleteUser={() => {
|
||||
onDeleteInvitedUser(member.id);
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Manage
|
||||
</MemberItemOption>
|
||||
</MemberItemOptions>
|
||||
</MemberListItem>
|
||||
);
|
||||
})}
|
||||
</MemberList>
|
||||
</MemberListWrapper>
|
||||
</TabContent>
|
||||
|
||||
@ -35,11 +35,15 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
|
||||
`}
|
||||
`;
|
||||
|
||||
const Filled = styled(Base)`
|
||||
const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
|
||||
background: rgba(${props => props.theme.colors[props.color]});
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
|
||||
}
|
||||
${props =>
|
||||
props.hoverVariant === 'boxShadow' &&
|
||||
css`
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px -8px rgba(${props.theme.colors[props.color]});
|
||||
}
|
||||
`}
|
||||
`;
|
||||
const Outline = styled(Base)<{ invert: boolean }>`
|
||||
border: 1px solid rgba(${props => props.theme.colors[props.color]});
|
||||
@ -123,9 +127,11 @@ const Relief = styled(Base)`
|
||||
}
|
||||
`;
|
||||
|
||||
type HoverVariant = 'boxShadow' | 'none';
|
||||
type ButtonProps = {
|
||||
fontSize?: string;
|
||||
variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
|
||||
hoverVariant?: HoverVariant;
|
||||
color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
|
||||
disabled?: boolean;
|
||||
type?: 'button' | 'submit';
|
||||
@ -142,6 +148,7 @@ const Button: React.FC<ButtonProps> = ({
|
||||
invert = false,
|
||||
color = 'primary',
|
||||
variant = 'filled',
|
||||
hoverVariant = 'boxShadow',
|
||||
type = 'button',
|
||||
justifyTextContent = 'center',
|
||||
icon,
|
||||
@ -158,7 +165,15 @@ const Button: React.FC<ButtonProps> = ({
|
||||
switch (variant) {
|
||||
case 'filled':
|
||||
return (
|
||||
<Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
|
||||
<Filled
|
||||
ref={$button}
|
||||
hoverVariant={hoverVariant}
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
color={color}
|
||||
>
|
||||
{icon && icon}
|
||||
<Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
|
||||
{children}
|
||||
|
||||
103
frontend/src/shared/components/Confirm/Styles.ts
Normal file
103
frontend/src/shared/components/Confirm/Styles.ts
Normal file
@ -0,0 +1,103 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from 'shared/components/Button';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
background: #eff2f7;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
export const Column = styled.div`
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const LoginFormWrapper = styled.div`
|
||||
background: #10163a;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const LoginFormContainer = styled.div`
|
||||
min-height: 505px;
|
||||
padding: 2rem;
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
color: #ebeefd;
|
||||
font-size: 18px;
|
||||
margin-bottom: 14px;
|
||||
`;
|
||||
|
||||
export const SubTitle = styled.h2`
|
||||
color: #c2c6dc;
|
||||
font-size: 14px;
|
||||
margin-bottom: 14px;
|
||||
`;
|
||||
export const Form = styled.form`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const FormLabel = styled.label`
|
||||
color: #c2c6dc;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
`;
|
||||
|
||||
export const FormTextInput = styled.input`
|
||||
width: 100%;
|
||||
background: #262c49;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
margin-top: 4px;
|
||||
padding: 0.7rem 1rem 0.7rem 3rem;
|
||||
font-size: 1rem;
|
||||
color: #c2c6dc;
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
export const FormIcon = styled.div`
|
||||
top: 30px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
export const FormError = styled.span`
|
||||
font-size: 0.875rem;
|
||||
color: rgb(234, 84, 85);
|
||||
`;
|
||||
|
||||
export const LoginButton = styled(Button)``;
|
||||
|
||||
export const ActionButtons = styled.div`
|
||||
margin-top: 17.5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
export const RegisterButton = styled(Button)``;
|
||||
|
||||
export const LogoTitle = styled.div`
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-left: 12px;
|
||||
transition: visibility, opacity, transform 0.25s ease;
|
||||
color: #7367f0;
|
||||
`;
|
||||
|
||||
export const LogoWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 24px;
|
||||
color: rgb(222, 235, 255);
|
||||
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
|
||||
`;
|
||||
62
frontend/src/shared/components/Confirm/index.tsx
Normal file
62
frontend/src/shared/components/Confirm/index.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import AccessAccount from 'shared/undraw/AccessAccount';
|
||||
import { User, Lock, Taskcafe } from 'shared/icons';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import LoadingSpinner from 'shared/components/LoadingSpinner';
|
||||
import {
|
||||
Form,
|
||||
LogoWrapper,
|
||||
LogoTitle,
|
||||
ActionButtons,
|
||||
RegisterButton,
|
||||
FormError,
|
||||
FormIcon,
|
||||
FormLabel,
|
||||
FormTextInput,
|
||||
Wrapper,
|
||||
Column,
|
||||
LoginFormWrapper,
|
||||
LoginFormContainer,
|
||||
Title,
|
||||
SubTitle,
|
||||
} from './Styles';
|
||||
|
||||
const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
|
||||
const [hasFailed, setFailed] = useState(false);
|
||||
const setHasFailed = () => {
|
||||
setFailed(true);
|
||||
};
|
||||
useEffect(() => {
|
||||
onConfirmUser(setHasFailed);
|
||||
});
|
||||
return (
|
||||
<Wrapper>
|
||||
<Column>
|
||||
<AccessAccount width={275} height={250} />
|
||||
</Column>
|
||||
<Column>
|
||||
<LoginFormWrapper>
|
||||
<LoginFormContainer>
|
||||
<LogoWrapper>
|
||||
<Taskcafe width={42} height={42} />
|
||||
<LogoTitle>Taskcafé</LogoTitle>
|
||||
</LogoWrapper>
|
||||
{hasConfirmToken ? (
|
||||
<>
|
||||
<Title>Confirming user...</Title>
|
||||
{hasFailed ? <SubTitle>There was an error while confirming your user</SubTitle> : <LoadingSpinner />}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Title>There is no confirmation token</Title>
|
||||
<SubTitle>There seems to have been an error.</SubTitle>
|
||||
</>
|
||||
)}
|
||||
</LoginFormContainer>
|
||||
</LoginFormWrapper>
|
||||
</Column>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Confirm;
|
||||
@ -73,7 +73,6 @@ export const HeaderName = styled(TextareaAutosize)`
|
||||
box-shadow: none;
|
||||
font-weight: 600;
|
||||
margin: -4px 0;
|
||||
padding: 4px 8px;
|
||||
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
|
||||
@ -47,6 +47,7 @@ const permissions = [
|
||||
type MiniProfileProps = {
|
||||
bio: string;
|
||||
user: TaskUser;
|
||||
invited?: boolean;
|
||||
onRemoveFromTask?: () => void;
|
||||
onChangeRole?: (roleCode: RoleCode) => void;
|
||||
onRemoveFromBoard?: () => void;
|
||||
@ -56,6 +57,7 @@ type MiniProfileProps = {
|
||||
const MiniProfile: React.FC<MiniProfileProps> = ({
|
||||
user,
|
||||
bio,
|
||||
invited,
|
||||
canChangeRole,
|
||||
onRemoveFromTask,
|
||||
onChangeRole,
|
||||
@ -74,7 +76,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
|
||||
)}
|
||||
<ProfileInfo>
|
||||
<InfoTitle>{user.fullName}</InfoTitle>
|
||||
<InfoUsername>{`@${user.username}`}</InfoUsername>
|
||||
{invited ? <InfoUsername>Invited</InfoUsername> : <InfoUsername>{`@${user.username}`}</InfoUsername>}
|
||||
<InfoBio>{bio}</InfoBio>
|
||||
</ProfileInfo>
|
||||
</Profile>
|
||||
|
||||
@ -24,7 +24,7 @@ import {
|
||||
const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
|
||||
const INITIALS_PATTERN = /[a-zA-Z]{2,3}/i;
|
||||
|
||||
const Register = ({ onSubmit }: RegisterProps) => {
|
||||
const Register = ({ onSubmit, registered = false }: RegisterProps) => {
|
||||
const [isComplete, setComplete] = useState(true);
|
||||
const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
|
||||
const loginSubmit = (data: RegisterFormData) => {
|
||||
@ -43,103 +43,112 @@ const Register = ({ onSubmit }: RegisterProps) => {
|
||||
<Taskcafe width={42} height={42} />
|
||||
<LogoTitle>Taskcafé</LogoTitle>
|
||||
</LogoWrapper>
|
||||
<Title>Register</Title>
|
||||
<SubTitle>Please create the system admin user</SubTitle>
|
||||
<Form onSubmit={handleSubmit(loginSubmit)}>
|
||||
<FormLabel htmlFor="fullname">
|
||||
Full name
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="fullname"
|
||||
name="fullname"
|
||||
ref={register({ required: 'Full name is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="username">
|
||||
Username
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
ref={register({ required: 'Username is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="email">
|
||||
Email
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
ref={register({
|
||||
required: 'Email is required',
|
||||
pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.email && <FormError>{errors.email.message}</FormError>}
|
||||
<FormLabel htmlFor="initials">
|
||||
Initials
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="initials"
|
||||
name="initials"
|
||||
ref={register({
|
||||
required: 'Initials is required',
|
||||
pattern: {
|
||||
value: INITIALS_PATTERN,
|
||||
message: 'Initials must be between 2 to 3 characters.',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.initials && <FormError>{errors.initials.message}</FormError>}
|
||||
<FormLabel htmlFor="password">
|
||||
Password
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
ref={register({ required: 'Password is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password && <FormError>{errors.password.message}</FormError>}
|
||||
<FormLabel htmlFor="password_confirm">
|
||||
Password (Confirm)
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password_confirm"
|
||||
name="password_confirm"
|
||||
ref={register({ required: 'Password (confirm) is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
|
||||
{registered ? (
|
||||
<>
|
||||
<Title>Thanks for registering</Title>
|
||||
<SubTitle>Please check your inbox for a confirmation email.</SubTitle>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Title>Register</Title>
|
||||
<SubTitle>Please create your user</SubTitle>
|
||||
<Form onSubmit={handleSubmit(loginSubmit)}>
|
||||
<FormLabel htmlFor="fullname">
|
||||
Full name
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="fullname"
|
||||
name="fullname"
|
||||
ref={register({ required: 'Full name is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="username">
|
||||
Username
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
ref={register({ required: 'Username is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="email">
|
||||
Email
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
ref={register({
|
||||
required: 'Email is required',
|
||||
pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.email && <FormError>{errors.email.message}</FormError>}
|
||||
<FormLabel htmlFor="initials">
|
||||
Initials
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="initials"
|
||||
name="initials"
|
||||
ref={register({
|
||||
required: 'Initials is required',
|
||||
pattern: {
|
||||
value: INITIALS_PATTERN,
|
||||
message: 'Initials must be between 2 to 3 characters.',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.initials && <FormError>{errors.initials.message}</FormError>}
|
||||
<FormLabel htmlFor="password">
|
||||
Password
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
ref={register({ required: 'Password is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password && <FormError>{errors.password.message}</FormError>}
|
||||
<FormLabel htmlFor="password_confirm">
|
||||
Password (Confirm)
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password_confirm"
|
||||
name="password_confirm"
|
||||
ref={register({ required: 'Password (confirm) is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
|
||||
|
||||
<ActionButtons>
|
||||
<RegisterButton type="submit" disabled={!isComplete}>
|
||||
Register
|
||||
</RegisterButton>
|
||||
</ActionButtons>
|
||||
</Form>
|
||||
<ActionButtons>
|
||||
<RegisterButton type="submit" disabled={!isComplete}>
|
||||
Register
|
||||
</RegisterButton>
|
||||
</ActionButtons>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</LoginFormContainer>
|
||||
</LoginFormWrapper>
|
||||
</Column>
|
||||
|
||||
@ -16,7 +16,7 @@ function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused:
|
||||
return null;
|
||||
}
|
||||
|
||||
const colourStyles = {
|
||||
export const colourStyles = {
|
||||
control: (styles: any, data: any) => {
|
||||
return {
|
||||
...styles,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { DoubleChevronUp, Crown } from 'shared/icons';
|
||||
|
||||
export const AdminIcon = styled(DoubleChevronUp)`
|
||||
@ -24,7 +24,12 @@ const TaskDetailAssignee = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const Wrapper = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
|
||||
export const Wrapper = styled.div<{
|
||||
size: number | string;
|
||||
bgColor: string | null;
|
||||
backgroundURL: string | null;
|
||||
hasClick: boolean;
|
||||
}>`
|
||||
width: ${props => props.size}px;
|
||||
height: ${props => props.size}px;
|
||||
border-radius: 9999px;
|
||||
@ -37,33 +42,60 @@ export const Wrapper = styled.div<{ size: number | string; bgColor: string | nul
|
||||
background-size: contain;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
${props =>
|
||||
props.hasClick &&
|
||||
css`
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
type TaskAssigneeProps = {
|
||||
size: number | string;
|
||||
showRoleIcons?: boolean;
|
||||
member: TaskUser;
|
||||
onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
invited?: boolean;
|
||||
onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const TaskAssignee: React.FC<TaskAssigneeProps> = ({ showRoleIcons, member, onMemberProfile, size, className }) => {
|
||||
const TaskAssignee: React.FC<TaskAssigneeProps> = ({
|
||||
showRoleIcons,
|
||||
member,
|
||||
invited,
|
||||
onMemberProfile,
|
||||
size,
|
||||
className,
|
||||
}) => {
|
||||
const $memberRef = useRef<HTMLDivElement>(null);
|
||||
let profileIcon: ProfileIcon = {
|
||||
url: null,
|
||||
bgColor: null,
|
||||
initials: null,
|
||||
};
|
||||
if (member.profileIcon) {
|
||||
profileIcon = member.profileIcon;
|
||||
}
|
||||
return (
|
||||
<TaskDetailAssignee
|
||||
className={className}
|
||||
ref={$memberRef}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onMemberProfile($memberRef, member.id);
|
||||
if (onMemberProfile) {
|
||||
onMemberProfile($memberRef, member.id);
|
||||
}
|
||||
}}
|
||||
key={member.id}
|
||||
>
|
||||
<Wrapper backgroundURL={member.profileIcon.url ?? null} bgColor={member.profileIcon.bgColor ?? null} size={size}>
|
||||
{(!member.profileIcon.url && member.profileIcon.initials) ?? ''}
|
||||
<Wrapper
|
||||
hasClick={typeof onMemberProfile !== undefined}
|
||||
backgroundURL={profileIcon.url ?? null}
|
||||
bgColor={profileIcon.bgColor ?? null}
|
||||
size={size}
|
||||
>
|
||||
{(!profileIcon.url && profileIcon.initials) ?? ''}
|
||||
</Wrapper>
|
||||
{showRoleIcons && member.role && member.role.code === 'admin' && <AdminIcon width={10} height={10} />}
|
||||
{showRoleIcons && member.role && member.role.code === 'owner' && <OwnerIcon width={10} height={10} />}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
|
||||
import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
|
||||
import styled from 'styled-components';
|
||||
import ProfileIcon from 'shared/components/ProfileIcon';
|
||||
import { usePopup } from 'shared/components/PopupMenu';
|
||||
import { RoleCode } from 'shared/generated/graphql';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { useHistory } from 'react-router';
|
||||
import {
|
||||
TaskcafeLogo,
|
||||
TaskcafeTitle,
|
||||
@ -173,8 +174,11 @@ type NavBarProps = {
|
||||
user: TaskUser | null;
|
||||
onOpenSettings: ($target: React.RefObject<HTMLElement>) => void;
|
||||
projectMembers?: Array<TaskUser> | null;
|
||||
projectInvitedMembers?: Array<InvitedUser> | null;
|
||||
|
||||
onRemoveFromBoard?: (userID: string) => void;
|
||||
onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
|
||||
};
|
||||
|
||||
const NavBar: React.FC<NavBarProps> = ({
|
||||
@ -184,10 +188,12 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
onChangeProjectOwner,
|
||||
currentTab,
|
||||
onMemberProfile,
|
||||
onInvitedMemberProfile,
|
||||
canEditProjectName = false,
|
||||
onOpenProjectFinder,
|
||||
onFavorite,
|
||||
onSetTab,
|
||||
projectInvitedMembers,
|
||||
onChangeRole,
|
||||
name,
|
||||
onRemoveFromBoard,
|
||||
@ -204,6 +210,7 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
onProfileClick($target);
|
||||
}
|
||||
};
|
||||
const history = useHistory();
|
||||
const { showPopup } = usePopup();
|
||||
return (
|
||||
<NavbarWrapper>
|
||||
@ -245,19 +252,38 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
<TaskcafeTitle>Taskcafé</TaskcafeTitle>
|
||||
</LogoContainer>
|
||||
<GlobalActions>
|
||||
{projectMembers && onMemberProfile && (
|
||||
{projectMembers && projectInvitedMembers && onMemberProfile && onInvitedMemberProfile && (
|
||||
<>
|
||||
<ProjectMembers>
|
||||
{projectMembers.map((member, idx) => (
|
||||
<ProjectMember
|
||||
showRoleIcons
|
||||
zIndex={projectMembers.length - idx}
|
||||
zIndex={projectMembers.length - idx + projectInvitedMembers.length}
|
||||
key={member.id}
|
||||
size={28}
|
||||
member={member}
|
||||
onMemberProfile={onMemberProfile}
|
||||
/>
|
||||
))}
|
||||
{projectInvitedMembers.map((member, idx) => (
|
||||
<ProjectMember
|
||||
showRoleIcons
|
||||
zIndex={projectInvitedMembers.length - idx}
|
||||
key={member.email}
|
||||
size={28}
|
||||
invited
|
||||
member={{
|
||||
id: member.email,
|
||||
fullName: member.email,
|
||||
profileIcon: {
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
bgColor: '#fff',
|
||||
},
|
||||
}}
|
||||
onMemberProfile={onInvitedMemberProfile}
|
||||
/>
|
||||
))}
|
||||
{canInviteUser && (
|
||||
<InviteButton
|
||||
onClick={$target => {
|
||||
@ -283,6 +309,9 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
<IconContainer disabled onClick={NOOP}>
|
||||
<CheckCircle width={20} height={20} />
|
||||
</IconContainer>
|
||||
<IconContainer disabled onClick={NOOP}>
|
||||
<ListUnordered width={20} height={20} />
|
||||
</IconContainer>
|
||||
<IconContainer disabled onClick={onNotificationClick}>
|
||||
<Bell color="#c2c6dc" size={20} />
|
||||
</IconContainer>
|
||||
|
||||
@ -113,6 +113,14 @@ export type UserAccount = {
|
||||
member: MemberList;
|
||||
};
|
||||
|
||||
export type InvitedUserAccount = {
|
||||
__typename?: 'InvitedUserAccount';
|
||||
id: Scalars['ID'];
|
||||
email: Scalars['String'];
|
||||
invitedOn: Scalars['Time'];
|
||||
member: MemberList;
|
||||
};
|
||||
|
||||
export type Team = {
|
||||
__typename?: 'Team';
|
||||
id: Scalars['ID'];
|
||||
@ -121,6 +129,12 @@ export type Team = {
|
||||
members: Array<Member>;
|
||||
};
|
||||
|
||||
export type InvitedMember = {
|
||||
__typename?: 'InvitedMember';
|
||||
email: Scalars['String'];
|
||||
invitedOn: Scalars['Time'];
|
||||
};
|
||||
|
||||
export type Project = {
|
||||
__typename?: 'Project';
|
||||
id: Scalars['ID'];
|
||||
@ -129,6 +143,7 @@ export type Project = {
|
||||
team?: Maybe<Team>;
|
||||
taskGroups: Array<TaskGroup>;
|
||||
members: Array<Member>;
|
||||
invitedMembers: Array<InvitedMember>;
|
||||
labels: Array<ProjectLabel>;
|
||||
};
|
||||
|
||||
@ -221,11 +236,13 @@ export type Query = {
|
||||
findTask: Task;
|
||||
findTeam: Team;
|
||||
findUser: UserAccount;
|
||||
invitedUsers: Array<InvitedUserAccount>;
|
||||
labelColors: Array<LabelColor>;
|
||||
me: MePayload;
|
||||
notifications: Array<Notification>;
|
||||
organizations: Array<Organization>;
|
||||
projects: Array<Project>;
|
||||
searchMembers: Array<MemberSearchResult>;
|
||||
taskGroups: Array<TaskGroup>;
|
||||
teams: Array<Team>;
|
||||
users: Array<UserAccount>;
|
||||
@ -256,6 +273,11 @@ export type QueryProjectsArgs = {
|
||||
input?: Maybe<ProjectsFilter>;
|
||||
};
|
||||
|
||||
|
||||
export type QuerySearchMembersArgs = {
|
||||
input: MemberSearchFilter;
|
||||
};
|
||||
|
||||
export type Mutation = {
|
||||
__typename?: 'Mutation';
|
||||
addTaskLabel: Task;
|
||||
@ -263,7 +285,6 @@ export type Mutation = {
|
||||
clearProfileAvatar: UserAccount;
|
||||
createProject: Project;
|
||||
createProjectLabel: ProjectLabel;
|
||||
createProjectMember: CreateProjectMemberPayload;
|
||||
createRefreshToken: RefreshToken;
|
||||
createTask: Task;
|
||||
createTaskChecklist: TaskChecklist;
|
||||
@ -272,6 +293,8 @@ export type Mutation = {
|
||||
createTeam: Team;
|
||||
createTeamMember: CreateTeamMemberPayload;
|
||||
createUserAccount: UserAccount;
|
||||
deleteInvitedProjectMember: DeleteInvitedProjectMemberPayload;
|
||||
deleteInvitedUserAccount: DeleteInvitedUserAccountPayload;
|
||||
deleteProject: DeleteProjectPayload;
|
||||
deleteProjectLabel: ProjectLabel;
|
||||
deleteProjectMember: DeleteProjectMemberPayload;
|
||||
@ -284,6 +307,7 @@ export type Mutation = {
|
||||
deleteTeamMember: DeleteTeamMemberPayload;
|
||||
deleteUserAccount: DeleteUserAccountPayload;
|
||||
duplicateTaskGroup: DuplicateTaskGroupPayload;
|
||||
inviteProjectMembers: InviteProjectMembersPayload;
|
||||
logoutUser: Scalars['Boolean'];
|
||||
removeTaskLabel: Task;
|
||||
setTaskChecklistItemComplete: TaskChecklistItem;
|
||||
@ -333,11 +357,6 @@ export type MutationCreateProjectLabelArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateProjectMemberArgs = {
|
||||
input: CreateProjectMember;
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateRefreshTokenArgs = {
|
||||
input: NewRefreshToken;
|
||||
};
|
||||
@ -378,6 +397,16 @@ export type MutationCreateUserAccountArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationDeleteInvitedProjectMemberArgs = {
|
||||
input: DeleteInvitedProjectMember;
|
||||
};
|
||||
|
||||
|
||||
export type MutationDeleteInvitedUserAccountArgs = {
|
||||
input: DeleteInvitedUserAccount;
|
||||
};
|
||||
|
||||
|
||||
export type MutationDeleteProjectArgs = {
|
||||
input: DeleteProject;
|
||||
};
|
||||
@ -438,6 +467,11 @@ export type MutationDuplicateTaskGroupArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationInviteProjectMembersArgs = {
|
||||
input: InviteProjectMembers;
|
||||
};
|
||||
|
||||
|
||||
export type MutationLogoutUserArgs = {
|
||||
input: LogoutUser;
|
||||
};
|
||||
@ -688,15 +722,32 @@ export type UpdateProjectLabelColor = {
|
||||
labelColorID: Scalars['UUID'];
|
||||
};
|
||||
|
||||
export type CreateProjectMember = {
|
||||
export type DeleteInvitedProjectMember = {
|
||||
projectID: Scalars['UUID'];
|
||||
userID: Scalars['UUID'];
|
||||
email: Scalars['String'];
|
||||
};
|
||||
|
||||
export type CreateProjectMemberPayload = {
|
||||
__typename?: 'CreateProjectMemberPayload';
|
||||
export type DeleteInvitedProjectMemberPayload = {
|
||||
__typename?: 'DeleteInvitedProjectMemberPayload';
|
||||
invitedMember: InvitedMember;
|
||||
};
|
||||
|
||||
export type MemberInvite = {
|
||||
userID?: Maybe<Scalars['UUID']>;
|
||||
email?: Maybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
export type InviteProjectMembers = {
|
||||
projectID: Scalars['UUID'];
|
||||
members: Array<MemberInvite>;
|
||||
};
|
||||
|
||||
export type InviteProjectMembersPayload = {
|
||||
__typename?: 'InviteProjectMembersPayload';
|
||||
ok: Scalars['Boolean'];
|
||||
member: Member;
|
||||
projectID: Scalars['UUID'];
|
||||
members: Array<Member>;
|
||||
invitedMembers: Array<InvitedMember>;
|
||||
};
|
||||
|
||||
export type DeleteProjectMember = {
|
||||
@ -989,6 +1040,29 @@ export type UpdateTeamMemberRolePayload = {
|
||||
member: Member;
|
||||
};
|
||||
|
||||
export type DeleteInvitedUserAccount = {
|
||||
invitedUserID: Scalars['UUID'];
|
||||
};
|
||||
|
||||
export type DeleteInvitedUserAccountPayload = {
|
||||
__typename?: 'DeleteInvitedUserAccountPayload';
|
||||
invitedUser: InvitedUserAccount;
|
||||
};
|
||||
|
||||
export type MemberSearchFilter = {
|
||||
SearchFilter: Scalars['String'];
|
||||
projectID?: Maybe<Scalars['UUID']>;
|
||||
};
|
||||
|
||||
export type MemberSearchResult = {
|
||||
__typename?: 'MemberSearchResult';
|
||||
similarity: Scalars['Int'];
|
||||
user: UserAccount;
|
||||
confirmed: Scalars['Boolean'];
|
||||
invited: Scalars['Boolean'];
|
||||
joined: Scalars['Boolean'];
|
||||
};
|
||||
|
||||
export type UpdateUserInfoPayload = {
|
||||
__typename?: 'UpdateUserInfoPayload';
|
||||
user: UserAccount;
|
||||
@ -1205,6 +1279,9 @@ export type FindProjectQuery = (
|
||||
{ __typename?: 'ProfileIcon' }
|
||||
& Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
|
||||
) }
|
||||
)>, invitedMembers: Array<(
|
||||
{ __typename?: 'InvitedMember' }
|
||||
& Pick<InvitedMember, 'email' | 'invitedOn'>
|
||||
)>, labels: Array<(
|
||||
{ __typename?: 'ProjectLabel' }
|
||||
& Pick<ProjectLabel, 'id' | 'createdDate' | 'name'>
|
||||
@ -1390,31 +1467,6 @@ export type MeQuery = (
|
||||
) }
|
||||
);
|
||||
|
||||
export type CreateProjectMemberMutationVariables = {
|
||||
projectID: Scalars['UUID'];
|
||||
userID: Scalars['UUID'];
|
||||
};
|
||||
|
||||
|
||||
export type CreateProjectMemberMutation = (
|
||||
{ __typename?: 'Mutation' }
|
||||
& { createProjectMember: (
|
||||
{ __typename?: 'CreateProjectMemberPayload' }
|
||||
& Pick<CreateProjectMemberPayload, 'ok'>
|
||||
& { member: (
|
||||
{ __typename?: 'Member' }
|
||||
& Pick<Member, 'id' | 'fullName' | 'username'>
|
||||
& { profileIcon: (
|
||||
{ __typename?: 'ProfileIcon' }
|
||||
& Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
|
||||
), role: (
|
||||
{ __typename?: 'Role' }
|
||||
& Pick<Role, 'code' | 'name'>
|
||||
) }
|
||||
) }
|
||||
) }
|
||||
);
|
||||
|
||||
export type DeleteProjectMutationVariables = {
|
||||
projectID: Scalars['UUID'];
|
||||
};
|
||||
@ -1432,6 +1484,23 @@ export type DeleteProjectMutation = (
|
||||
) }
|
||||
);
|
||||
|
||||
export type DeleteInvitedProjectMemberMutationVariables = {
|
||||
projectID: Scalars['UUID'];
|
||||
email: Scalars['String'];
|
||||
};
|
||||
|
||||
|
||||
export type DeleteInvitedProjectMemberMutation = (
|
||||
{ __typename?: 'Mutation' }
|
||||
& { deleteInvitedProjectMember: (
|
||||
{ __typename?: 'DeleteInvitedProjectMemberPayload' }
|
||||
& { invitedMember: (
|
||||
{ __typename?: 'InvitedMember' }
|
||||
& Pick<InvitedMember, 'email'>
|
||||
) }
|
||||
) }
|
||||
);
|
||||
|
||||
export type DeleteProjectMemberMutationVariables = {
|
||||
projectID: Scalars['UUID'];
|
||||
userID: Scalars['UUID'];
|
||||
@ -1450,6 +1519,34 @@ export type DeleteProjectMemberMutation = (
|
||||
) }
|
||||
);
|
||||
|
||||
export type InviteProjectMembersMutationVariables = {
|
||||
projectID: Scalars['UUID'];
|
||||
members: Array<MemberInvite>;
|
||||
};
|
||||
|
||||
|
||||
export type InviteProjectMembersMutation = (
|
||||
{ __typename?: 'Mutation' }
|
||||
& { inviteProjectMembers: (
|
||||
{ __typename?: 'InviteProjectMembersPayload' }
|
||||
& Pick<InviteProjectMembersPayload, 'ok'>
|
||||
& { invitedMembers: Array<(
|
||||
{ __typename?: 'InvitedMember' }
|
||||
& Pick<InvitedMember, 'email' | 'invitedOn'>
|
||||
)>, members: Array<(
|
||||
{ __typename?: 'Member' }
|
||||
& Pick<Member, 'id' | 'fullName' | 'username'>
|
||||
& { profileIcon: (
|
||||
{ __typename?: 'ProfileIcon' }
|
||||
& Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
|
||||
), role: (
|
||||
{ __typename?: 'Role' }
|
||||
& Pick<Role, 'code' | 'name'>
|
||||
) }
|
||||
)> }
|
||||
) }
|
||||
);
|
||||
|
||||
export type UpdateProjectMemberRoleMutationVariables = {
|
||||
projectID: Scalars['UUID'];
|
||||
userID: Scalars['UUID'];
|
||||
@ -2130,6 +2227,22 @@ export type CreateUserAccountMutation = (
|
||||
) }
|
||||
);
|
||||
|
||||
export type DeleteInvitedUserAccountMutationVariables = {
|
||||
invitedUserID: Scalars['UUID'];
|
||||
};
|
||||
|
||||
|
||||
export type DeleteInvitedUserAccountMutation = (
|
||||
{ __typename?: 'Mutation' }
|
||||
& { deleteInvitedUserAccount: (
|
||||
{ __typename?: 'DeleteInvitedUserAccountPayload' }
|
||||
& { invitedUser: (
|
||||
{ __typename?: 'InvitedUserAccount' }
|
||||
& Pick<InvitedUserAccount, 'id'>
|
||||
) }
|
||||
) }
|
||||
);
|
||||
|
||||
export type DeleteUserAccountMutationVariables = {
|
||||
userID: Scalars['UUID'];
|
||||
newOwnerID?: Maybe<Scalars['UUID']>;
|
||||
@ -2211,7 +2324,10 @@ export type UsersQueryVariables = {};
|
||||
|
||||
export type UsersQuery = (
|
||||
{ __typename?: 'Query' }
|
||||
& { users: Array<(
|
||||
& { invitedUsers: Array<(
|
||||
{ __typename?: 'InvitedUserAccount' }
|
||||
& Pick<InvitedUserAccount, 'id' | 'email' | 'invitedOn'>
|
||||
)>, users: Array<(
|
||||
{ __typename?: 'UserAccount' }
|
||||
& Pick<UserAccount, 'id' | 'email' | 'fullName' | 'username'>
|
||||
& { role: (
|
||||
@ -2603,6 +2719,10 @@ export const FindProjectDocument = gql`
|
||||
bgColor
|
||||
}
|
||||
}
|
||||
invitedMembers {
|
||||
email
|
||||
invitedOn
|
||||
}
|
||||
labels {
|
||||
id
|
||||
createdDate
|
||||
@ -2884,53 +3004,6 @@ export function useMeLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptio
|
||||
export type MeQueryHookResult = ReturnType<typeof useMeQuery>;
|
||||
export type MeLazyQueryHookResult = ReturnType<typeof useMeLazyQuery>;
|
||||
export type MeQueryResult = ApolloReactCommon.QueryResult<MeQuery, MeQueryVariables>;
|
||||
export const CreateProjectMemberDocument = gql`
|
||||
mutation createProjectMember($projectID: UUID!, $userID: UUID!) {
|
||||
createProjectMember(input: {projectID: $projectID, userID: $userID}) {
|
||||
ok
|
||||
member {
|
||||
id
|
||||
fullName
|
||||
profileIcon {
|
||||
url
|
||||
initials
|
||||
bgColor
|
||||
}
|
||||
username
|
||||
role {
|
||||
code
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type CreateProjectMemberMutationFn = ApolloReactCommon.MutationFunction<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useCreateProjectMemberMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useCreateProjectMemberMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useCreateProjectMemberMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [createProjectMemberMutation, { data, loading, error }] = useCreateProjectMemberMutation({
|
||||
* variables: {
|
||||
* projectID: // value for 'projectID'
|
||||
* userID: // value for 'userID'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useCreateProjectMemberMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>) {
|
||||
return ApolloReactHooks.useMutation<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>(CreateProjectMemberDocument, baseOptions);
|
||||
}
|
||||
export type CreateProjectMemberMutationHookResult = ReturnType<typeof useCreateProjectMemberMutation>;
|
||||
export type CreateProjectMemberMutationResult = ApolloReactCommon.MutationResult<CreateProjectMemberMutation>;
|
||||
export type CreateProjectMemberMutationOptions = ApolloReactCommon.BaseMutationOptions<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>;
|
||||
export const DeleteProjectDocument = gql`
|
||||
mutation deleteProject($projectID: UUID!) {
|
||||
deleteProject(input: {projectID: $projectID}) {
|
||||
@ -2966,6 +3039,41 @@ export function useDeleteProjectMutation(baseOptions?: ApolloReactHooks.Mutation
|
||||
export type DeleteProjectMutationHookResult = ReturnType<typeof useDeleteProjectMutation>;
|
||||
export type DeleteProjectMutationResult = ApolloReactCommon.MutationResult<DeleteProjectMutation>;
|
||||
export type DeleteProjectMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteProjectMutation, DeleteProjectMutationVariables>;
|
||||
export const DeleteInvitedProjectMemberDocument = gql`
|
||||
mutation deleteInvitedProjectMember($projectID: UUID!, $email: String!) {
|
||||
deleteInvitedProjectMember(input: {projectID: $projectID, email: $email}) {
|
||||
invitedMember {
|
||||
email
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type DeleteInvitedProjectMemberMutationFn = ApolloReactCommon.MutationFunction<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useDeleteInvitedProjectMemberMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useDeleteInvitedProjectMemberMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useDeleteInvitedProjectMemberMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [deleteInvitedProjectMemberMutation, { data, loading, error }] = useDeleteInvitedProjectMemberMutation({
|
||||
* variables: {
|
||||
* projectID: // value for 'projectID'
|
||||
* email: // value for 'email'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useDeleteInvitedProjectMemberMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>) {
|
||||
return ApolloReactHooks.useMutation<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>(DeleteInvitedProjectMemberDocument, baseOptions);
|
||||
}
|
||||
export type DeleteInvitedProjectMemberMutationHookResult = ReturnType<typeof useDeleteInvitedProjectMemberMutation>;
|
||||
export type DeleteInvitedProjectMemberMutationResult = ApolloReactCommon.MutationResult<DeleteInvitedProjectMemberMutation>;
|
||||
export type DeleteInvitedProjectMemberMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>;
|
||||
export const DeleteProjectMemberDocument = gql`
|
||||
mutation deleteProjectMember($projectID: UUID!, $userID: UUID!) {
|
||||
deleteProjectMember(input: {projectID: $projectID, userID: $userID}) {
|
||||
@ -3003,6 +3111,57 @@ export function useDeleteProjectMemberMutation(baseOptions?: ApolloReactHooks.Mu
|
||||
export type DeleteProjectMemberMutationHookResult = ReturnType<typeof useDeleteProjectMemberMutation>;
|
||||
export type DeleteProjectMemberMutationResult = ApolloReactCommon.MutationResult<DeleteProjectMemberMutation>;
|
||||
export type DeleteProjectMemberMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteProjectMemberMutation, DeleteProjectMemberMutationVariables>;
|
||||
export const InviteProjectMembersDocument = gql`
|
||||
mutation inviteProjectMembers($projectID: UUID!, $members: [MemberInvite!]!) {
|
||||
inviteProjectMembers(input: {projectID: $projectID, members: $members}) {
|
||||
ok
|
||||
invitedMembers {
|
||||
email
|
||||
invitedOn
|
||||
}
|
||||
members {
|
||||
id
|
||||
fullName
|
||||
profileIcon {
|
||||
url
|
||||
initials
|
||||
bgColor
|
||||
}
|
||||
username
|
||||
role {
|
||||
code
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type InviteProjectMembersMutationFn = ApolloReactCommon.MutationFunction<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useInviteProjectMembersMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useInviteProjectMembersMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useInviteProjectMembersMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [inviteProjectMembersMutation, { data, loading, error }] = useInviteProjectMembersMutation({
|
||||
* variables: {
|
||||
* projectID: // value for 'projectID'
|
||||
* members: // value for 'members'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useInviteProjectMembersMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>) {
|
||||
return ApolloReactHooks.useMutation<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>(InviteProjectMembersDocument, baseOptions);
|
||||
}
|
||||
export type InviteProjectMembersMutationHookResult = ReturnType<typeof useInviteProjectMembersMutation>;
|
||||
export type InviteProjectMembersMutationResult = ApolloReactCommon.MutationResult<InviteProjectMembersMutation>;
|
||||
export type InviteProjectMembersMutationOptions = ApolloReactCommon.BaseMutationOptions<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>;
|
||||
export const UpdateProjectMemberRoleDocument = gql`
|
||||
mutation updateProjectMemberRole($projectID: UUID!, $userID: UUID!, $roleCode: RoleCode!) {
|
||||
updateProjectMemberRole(input: {projectID: $projectID, userID: $userID, roleCode: $roleCode}) {
|
||||
@ -4381,6 +4540,40 @@ export function useCreateUserAccountMutation(baseOptions?: ApolloReactHooks.Muta
|
||||
export type CreateUserAccountMutationHookResult = ReturnType<typeof useCreateUserAccountMutation>;
|
||||
export type CreateUserAccountMutationResult = ApolloReactCommon.MutationResult<CreateUserAccountMutation>;
|
||||
export type CreateUserAccountMutationOptions = ApolloReactCommon.BaseMutationOptions<CreateUserAccountMutation, CreateUserAccountMutationVariables>;
|
||||
export const DeleteInvitedUserAccountDocument = gql`
|
||||
mutation deleteInvitedUserAccount($invitedUserID: UUID!) {
|
||||
deleteInvitedUserAccount(input: {invitedUserID: $invitedUserID}) {
|
||||
invitedUser {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type DeleteInvitedUserAccountMutationFn = ApolloReactCommon.MutationFunction<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useDeleteInvitedUserAccountMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useDeleteInvitedUserAccountMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useDeleteInvitedUserAccountMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [deleteInvitedUserAccountMutation, { data, loading, error }] = useDeleteInvitedUserAccountMutation({
|
||||
* variables: {
|
||||
* invitedUserID: // value for 'invitedUserID'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useDeleteInvitedUserAccountMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>) {
|
||||
return ApolloReactHooks.useMutation<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>(DeleteInvitedUserAccountDocument, baseOptions);
|
||||
}
|
||||
export type DeleteInvitedUserAccountMutationHookResult = ReturnType<typeof useDeleteInvitedUserAccountMutation>;
|
||||
export type DeleteInvitedUserAccountMutationResult = ApolloReactCommon.MutationResult<DeleteInvitedUserAccountMutation>;
|
||||
export type DeleteInvitedUserAccountMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>;
|
||||
export const DeleteUserAccountDocument = gql`
|
||||
mutation deleteUserAccount($userID: UUID!, $newOwnerID: UUID) {
|
||||
deleteUserAccount(input: {userID: $userID, newOwnerID: $newOwnerID}) {
|
||||
@ -4534,6 +4727,11 @@ export type UpdateUserRoleMutationResult = ApolloReactCommon.MutationResult<Upda
|
||||
export type UpdateUserRoleMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateUserRoleMutation, UpdateUserRoleMutationVariables>;
|
||||
export const UsersDocument = gql`
|
||||
query users {
|
||||
invitedUsers {
|
||||
id
|
||||
email
|
||||
invitedOn
|
||||
}
|
||||
users {
|
||||
id
|
||||
email
|
||||
@ -4595,4 +4793,4 @@ export function useUsersLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOp
|
||||
}
|
||||
export type UsersQueryHookResult = ReturnType<typeof useUsersQuery>;
|
||||
export type UsersLazyQueryHookResult = ReturnType<typeof useUsersLazyQuery>;
|
||||
export type UsersQueryResult = ApolloReactCommon.QueryResult<UsersQuery, UsersQueryVariables>;
|
||||
export type UsersQueryResult = ApolloReactCommon.QueryResult<UsersQuery, UsersQueryVariables>;
|
||||
@ -22,6 +22,10 @@ query findProject($projectID: UUID!) {
|
||||
bgColor
|
||||
}
|
||||
}
|
||||
invitedMembers {
|
||||
email
|
||||
invitedOn
|
||||
}
|
||||
labels {
|
||||
id
|
||||
createdDate
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import gql from 'graphql-tag';
|
||||
|
||||
export const CREATE_PROJECT_MEMBER_MUTATION = gql`
|
||||
mutation createProjectMember($projectID: UUID!, $userID: UUID!) {
|
||||
createProjectMember(input: { projectID: $projectID, userID: $userID }) {
|
||||
ok
|
||||
member {
|
||||
id
|
||||
fullName
|
||||
profileIcon {
|
||||
url
|
||||
initials
|
||||
bgColor
|
||||
}
|
||||
username
|
||||
role {
|
||||
code
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default CREATE_PROJECT_MEMBER_MUTATION;
|
||||
@ -0,0 +1,13 @@
|
||||
import gql from 'graphql-tag';
|
||||
|
||||
export const DELETE_PROJECT_INVITED_MEMBER_MUTATION = gql`
|
||||
mutation deleteInvitedProjectMember($projectID: UUID!, $email: String!) {
|
||||
deleteInvitedProjectMember(input: { projectID: $projectID, email: $email }) {
|
||||
invitedMember {
|
||||
email
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default DELETE_PROJECT_INVITED_MEMBER_MUTATION;
|
||||
29
frontend/src/shared/graphql/project/inviteProjectMembers.ts
Normal file
29
frontend/src/shared/graphql/project/inviteProjectMembers.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import gql from 'graphql-tag';
|
||||
|
||||
export const INVITE_PROJECT_MEMBERS_MUTATION = gql`
|
||||
mutation inviteProjectMembers($projectID: UUID!, $members: [MemberInvite!]!) {
|
||||
inviteProjectMembers(input: { projectID: $projectID, members: $members }) {
|
||||
ok
|
||||
invitedMembers {
|
||||
email
|
||||
invitedOn
|
||||
}
|
||||
members {
|
||||
id
|
||||
fullName
|
||||
profileIcon {
|
||||
url
|
||||
initials
|
||||
bgColor
|
||||
}
|
||||
username
|
||||
role {
|
||||
code
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default INVITE_PROJECT_MEMBERS_MUTATION;
|
||||
13
frontend/src/shared/graphql/user/deleteInvitedUser.ts
Normal file
13
frontend/src/shared/graphql/user/deleteInvitedUser.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import gql from 'graphql-tag';
|
||||
|
||||
export const DELETE_INVITED_USER_MUTATION = gql`
|
||||
mutation deleteInvitedUserAccount($invitedUserID: UUID!) {
|
||||
deleteInvitedUserAccount(input: { invitedUserID: $invitedUserID }) {
|
||||
invitedUser {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default DELETE_INVITED_USER_MUTATION;
|
||||
@ -1,4 +1,9 @@
|
||||
query users {
|
||||
invitedUsers {
|
||||
id
|
||||
email
|
||||
invitedOn
|
||||
}
|
||||
users {
|
||||
id
|
||||
email
|
||||
|
||||
12
frontend/src/shared/icons/ArrowDown.tsx
Normal file
12
frontend/src/shared/icons/ArrowDown.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const ArrowDown: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 448 512">
|
||||
<path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArrowDown;
|
||||
12
frontend/src/shared/icons/CaretDown.tsx
Normal file
12
frontend/src/shared/icons/CaretDown.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const CaretDown: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 320 512">
|
||||
<path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaretDown;
|
||||
12
frontend/src/shared/icons/CaretRight.tsx
Normal file
12
frontend/src/shared/icons/CaretRight.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const CaretRight: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 192 512">
|
||||
<path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaretRight;
|
||||
12
frontend/src/shared/icons/Dot.tsx
Normal file
12
frontend/src/shared/icons/Dot.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const Dot: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 18 18">
|
||||
<circle cx="9" cy="9" r="3.5" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dot;
|
||||
12
frontend/src/shared/icons/DotCircle.tsx
Normal file
12
frontend/src/shared/icons/DotCircle.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const DotCircle: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||
<path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default DotCircle;
|
||||
12
frontend/src/shared/icons/EyeSlash.tsx
Normal file
12
frontend/src/shared/icons/EyeSlash.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const EyeSlash: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 640 512">
|
||||
<path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default EyeSlash;
|
||||
12
frontend/src/shared/icons/ListUnordered.tsx
Normal file
12
frontend/src/shared/icons/ListUnordered.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const ListUnordered: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||
<path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListUnordered;
|
||||
@ -1,9 +1,16 @@
|
||||
import Cross from './Cross';
|
||||
import Cog from './Cog';
|
||||
import ArrowDown from './ArrowDown';
|
||||
import ListUnordered from './ListUnordered';
|
||||
import Dot from './Dot';
|
||||
import CaretDown from './CaretDown';
|
||||
import Eye from './Eye';
|
||||
import EyeSlash from './EyeSlash';
|
||||
import CaretRight from './CaretRight';
|
||||
import List from './List';
|
||||
import At from './At';
|
||||
import Task from './Task';
|
||||
import DotCircle from './DotCircle';
|
||||
import Smile from './Smile';
|
||||
import Paperclip from './Paperclip';
|
||||
import Calendar from './Calendar';
|
||||
@ -88,5 +95,12 @@ export {
|
||||
Paperclip,
|
||||
Share,
|
||||
Eye,
|
||||
ListUnordered,
|
||||
EyeSlash,
|
||||
List,
|
||||
CaretDown,
|
||||
Dot,
|
||||
ArrowDown,
|
||||
CaretRight,
|
||||
DotCircle,
|
||||
};
|
||||
|
||||
147
frontend/src/taskcafe.d.ts
vendored
147
frontend/src/taskcafe.d.ts
vendored
@ -61,7 +61,7 @@ type User = TaskUser & {
|
||||
|
||||
type RefreshTokenResponse = {
|
||||
accessToken: string;
|
||||
isInstalled: boolean;
|
||||
setup?: null | { confirmToken: string };
|
||||
};
|
||||
|
||||
type LoginFormData = {
|
||||
@ -91,7 +91,14 @@ type ErrorOption =
|
||||
type: string;
|
||||
};
|
||||
|
||||
type SetFailedFn = () => void;
|
||||
type ConfirmProps = {
|
||||
hasConfirmToken: boolean;
|
||||
onConfirmUser: (setFailed: SetFailedFn) => void;
|
||||
};
|
||||
|
||||
type RegisterProps = {
|
||||
registered?: boolean;
|
||||
onSubmit: (
|
||||
data: RegisterFormData,
|
||||
setComplete: (val: boolean) => void,
|
||||
@ -127,3 +134,141 @@ type ElementBounds = {
|
||||
};
|
||||
|
||||
type CardLabelVariant = 'large' | 'small';
|
||||
|
||||
type InvitedUser = {
|
||||
email: string;
|
||||
invitedOn: string;
|
||||
};
|
||||
|
||||
type InvitedUserAccount = {
|
||||
id: string;
|
||||
email: string;
|
||||
invitedOn: string;
|
||||
};
|
||||
|
||||
type NodeDimensions = {
|
||||
entry: React.RefObject<HTMLElement>;
|
||||
children: React.RefObject<HTMLElement> | null;
|
||||
};
|
||||
|
||||
type OutlineNode = {
|
||||
id: string;
|
||||
parent: string;
|
||||
depth: number;
|
||||
position: number;
|
||||
ancestors: Array<string>;
|
||||
collapsed: boolean;
|
||||
children: number;
|
||||
};
|
||||
|
||||
type RelationshipChild = {
|
||||
position: number;
|
||||
id: string;
|
||||
depth: number;
|
||||
children: number;
|
||||
};
|
||||
|
||||
type NodeRelationships = {
|
||||
self: { id: string; depth: number };
|
||||
children: Array<RelationshipChild>;
|
||||
numberOfSubChildren: number;
|
||||
};
|
||||
|
||||
type OutlineData = {
|
||||
published: Map<string, string>;
|
||||
nodes: Map<number, Map<string, OutlineNode>>;
|
||||
relationships: Map<string, NodeRelationships>;
|
||||
dimensions: Map<string, NodeDimensions>;
|
||||
};
|
||||
|
||||
type ImpactZoneData = {
|
||||
node: OutlineNode;
|
||||
dimensions: NodeDimensions;
|
||||
};
|
||||
|
||||
type ImpactZone = {
|
||||
above: ImpactZoneData | null;
|
||||
below: ImpactZoneData | null;
|
||||
};
|
||||
|
||||
type ImpactData = {
|
||||
zone: ImpactZone;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
type ImpactPosition = 'before' | 'after' | 'beforeChildren' | 'afterChildren';
|
||||
|
||||
type ImpactAction = {
|
||||
on: 'children' | 'entry';
|
||||
position: ImpactPosition;
|
||||
};
|
||||
|
||||
type ItemElement = {
|
||||
id: string;
|
||||
parent: null | string;
|
||||
position: number;
|
||||
collapsed: boolean;
|
||||
children?: Array<ItemElement>;
|
||||
};
|
||||
type NodeDimensions = {
|
||||
entry: React.RefObject<HTMLElement>;
|
||||
children: React.RefObject<HTMLElement> | null;
|
||||
};
|
||||
|
||||
type OutlineNode = {
|
||||
id: string;
|
||||
parent: string;
|
||||
depth: number;
|
||||
position: number;
|
||||
ancestors: Array<string>;
|
||||
children: number;
|
||||
};
|
||||
|
||||
type RelationshipChild = {
|
||||
position: number;
|
||||
id: string;
|
||||
depth: number;
|
||||
children: number;
|
||||
};
|
||||
|
||||
type NodeRelationships = {
|
||||
self: { id: string; depth: number };
|
||||
children: Array<RelationshipChild>;
|
||||
numberOfSubChildren: number;
|
||||
};
|
||||
|
||||
type OutlineData = {
|
||||
published: Map<string, string>;
|
||||
nodes: Map<number, Map<string, OutlineNode>>;
|
||||
relationships: Map<string, NodeRelationships>;
|
||||
dimensions: Map<string, NodeDimensions>;
|
||||
};
|
||||
|
||||
type ImpactZoneData = {
|
||||
node: OutlineNode;
|
||||
dimensions: NodeDimensions;
|
||||
};
|
||||
|
||||
type ImpactZone = {
|
||||
above: ImpactZoneData | null;
|
||||
below: ImpactZoneData | null;
|
||||
};
|
||||
|
||||
type ImpactData = {
|
||||
zone: ImpactZone;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
type ImpactPosition = 'before' | 'after' | 'beforeChildren' | 'afterChildren';
|
||||
|
||||
type ImpactAction = {
|
||||
on: 'children' | 'entry';
|
||||
position: ImpactPosition;
|
||||
};
|
||||
|
||||
type ItemElement = {
|
||||
id: string;
|
||||
parent: null | string;
|
||||
position: number;
|
||||
children?: Array<ItemElement>;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user