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:
13
frontend/src/Confirm/Styles.ts
Normal file
13
frontend/src/Confirm/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%;
|
||||
`;
|
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;
|
Reference in New Issue
Block a user