-
Notifications
You must be signed in to change notification settings - Fork 122
/
Registration.tsx
123 lines (110 loc) · 3.24 KB
/
Registration.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { Button, Steps } from "antd";
import React, { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-toastify";
import CreateOrganization, {
Organizaton,
} from "../components/Registration/CreateOrganization";
import { Authentication } from "../api/api";
import { CreateOrgAccountType } from "../types/account-type";
import SignUp from "../components/Registration/SignUp";
import { QueryErrors } from "../types/error-response-types";
// import sjcl from "sjcl";
const { Step } = Steps;
const steps = [
{
title: "Create Organization",
content: "organization",
},
{
title: "Sign Up",
content: "signup",
},
];
const defaultOrg: Organizaton = {
organization_name: "",
industry: "",
};
const Register: React.FC = () => {
const [current, setCurrent] = useState(0);
const [organization, setOrganization] = useState<Organizaton>(defaultOrg);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const inviteToken = searchParams.get("token");
const queryClient = useQueryClient();
const next = () => {
setCurrent(current + 1);
};
const prev = () => {
setCurrent(current - 1);
};
const handleCreateOrganization = (org: Organizaton) => {
setOrganization(org);
next();
};
const mutation = useMutation(
(register: CreateOrgAccountType) => Authentication.registerCreate(register),
{
onSuccess: () => {
queryClient.invalidateQueries(["session"]);
navigate("/login");
},
onError: (error: QueryErrors) => {
toast.error(error.response.data.detail);
},
}
);
const handleSignUp = (user: {
username: string;
email: string;
password: string;
}) => {
// const pwBitArray = sjcl.hash.sha256.hash(user.password);
// const hashedPassword = sjcl.codec.hex.fromBits(pwBitArray);
const register_object: CreateOrgAccountType = {
organization_name: organization.organization_name,
industry: organization.industry,
email: user.email,
password: user.password,
username: user.username,
invite_token: inviteToken,
};
mutation.mutate(register_object);
};
return (
<div className="grid h-screen place-items-center gap-3">
<div className=" space-y-4 place-items-center">
{inviteToken ? (
<SignUp onSubmit={handleSignUp} hasInvite />
) : (
<>
<Steps current={current}>
{steps.map((item) => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<div className="steps-content">
{" "}
{current === 0 ? (
<CreateOrganization onSave={handleCreateOrganization} />
) : (
<SignUp onSubmit={handleSignUp} />
)}
</div>
</>
)}
<div className="steps-action">
<Button
type="primary"
className="ml-auto bg-info"
onClick={() => navigate("/login")}
>
Log In Instead
</Button>
</div>
</div>
</div>
);
};
export default Register;