Skip to content

Commit

Permalink
#60: update register site to handle completing registration with Cust…
Browse files Browse the repository at this point in the history 
…omer Service
  • Loading branch information
@an2508374
an2508374 committed Jan 9, 2024
1 parent 2f75ed2 commit 73ce139
Show file tree
Hide file tree
Showing 2 changed files with 274 additions and 22 deletions.
252 changes: 230 additions & 22 deletions SwiftParcel.Web/frontend/src/pages/register.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { HiInformationCircle, HiCheckCircle } from "react-icons/hi";
import { Footer } from "../components/footer";
import { Header } from "../components/header";
import { Loader } from "../components/loader";
import { register } from "../utils/api";
import { register, completeCustomerRegistration } from "../utils/api";

export default function Register() {
const [loading, setLoading] = React.useState(true);
Expand All @@ -21,14 +21,29 @@ export default function Register() {
const [password, setPassword] = React.useState("");
const [confirmPassword, setConfirmPassword] = React.useState("");

const [customerId, setCustomerId] = React.useState(null);
const [firstName, setFirstName] = React.useState("");
const [lastName, setLastName] = React.useState("");

const [street, setStreet] = React.useState("");
const [buildingNumber, setBuildingNumber] = React.useState("");
const [apartmentNumber, setApartmentNumber] = React.useState("");
const [city, setCity] = React.useState("");
const [zipCode, setZipCode] = React.useState("");
const [country, setCountry] = React.useState("");

const termsCheckboxRef = React.useRef<HTMLInputElement>(null);

const [error, setError] = React.useState("");
const [success, setSuccess] = React.useState("");

const [registerLoading, setRegisterLoading] = React.useState(false);
const [registerFinished, setRegisterFinished] = React.useState(false);

const onSubmit = (e: any) => {
const [completionError, setCompletionError] = React.useState("");
const [completionSuccess, setCompletionSuccess] = React.useState("");
const [completionLoading, setCompletionLoading] = React.useState(false);

const onRegister = async (e: any) => {
e.preventDefault();
if (registerLoading) return;
setError("");
Expand All @@ -49,20 +64,61 @@ export default function Register() {

register(email, password, "user")
.then((res) => {
setCustomerId(res);
setSuccess(
res?.data?.message || "Registration successful! Please login."
res?.data?.message || "Registration successful! Please complete data referring to you below."
);
})
.catch((err) => {
setError(err?.response?.data?.message || "Something went wrong during registration!");
})
.finally(() => {
setRegisterLoading(false);
setRegisterFinished(true);
});
};

const onComplete = async (e: any) => {
e.preventDefault();
if (completionLoading) return;
setCompletionError("");
setCompletionSuccess("");
setCompletionLoading(true);

completeCustomerRegistration(
customerId,
firstName,
lastName,
`${street}|${buildingNumber}|${apartmentNumber}|${city}|${zipCode}|${country}`,
"Empty")
.then((res) => {
setCompletionSuccess(
res?.data?.message || "Completion of registration successful! Please login."
);

setEmail("");
setUsername("");
setPassword("");
setConfirmPassword("");
setEmail("");

setCustomerId(null);
setFirstName("");
setLastName("");

setStreet("");
setBuildingNumber("");
setApartmentNumber("");
setCity("");
setZipCode("");
setCountry("");

termsCheckboxRef.current!.checked = false;
})
.catch((err) => {
setError(err?.response?.data?.message || "Something went wrong!");
setCompletionError(err?.response?.data?.message || "Something went wrong during completion of registration!");
})
.finally(() => {
setRegisterLoading(false);
setCompletionLoading(false);
});
};

Expand All @@ -78,21 +134,7 @@ export default function Register() {
Please register below. If you already have an account, please login
using the button in the top right corner.
</p>
{error ? (
<Alert color="failure" icon={HiInformationCircle} className="mb-3">
<span>
<span className="font-bold">Error!</span> {error}
</span>
</Alert>
) : null}
{success ? (
<Alert color="success" icon={HiCheckCircle} className="mb-3">
<span>
<span className="font-bold">Success!</span> {success}
</span>
</Alert>
) : null}
<form className="flex flex-col gap-4 mb-5" onSubmit={onSubmit}>
<form className="flex flex-col gap-4 mb-5" onSubmit={onRegister}>
<div>
<div className="mb-2 block">
<Label htmlFor="email" value="Your email" />
Expand All @@ -107,6 +149,7 @@ export default function Register() {
onChange={(e) => setEmail(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="username" value="Your username" />
Expand All @@ -120,6 +163,7 @@ export default function Register() {
onChange={(e) => setUsername(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="password" value="Your password" />
Expand All @@ -133,6 +177,7 @@ export default function Register() {
onChange={(e) => setPassword(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="repeat-password" value="Repeat password" />
Expand All @@ -146,6 +191,7 @@ export default function Register() {
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</div>

<div className="flex items-center gap-2">
<Checkbox id="agree" ref={termsCheckboxRef} />
<Label htmlFor="agree">
Expand All @@ -155,6 +201,7 @@ export default function Register() {
</span>
</Label>
</div>

{registerLoading ? (
<Button type="submit" disabled={true}>
<div className="mr-3">
Expand All @@ -166,6 +213,167 @@ export default function Register() {
<Button type="submit">Register new account</Button>
)}
</form>

{error ? (
<Alert color="failure" icon={HiInformationCircle} className="mb-3">
<span>
<span className="font-bold">Error!</span> {error}
</span>
</Alert>
) : null}
{success ? (
<Alert color="success" icon={HiCheckCircle} className="mb-3">
<span>
<span className="font-bold">Success!</span> {success}
</span>
</Alert>
) : null}

{(registerFinished && error === "") ? (
<form className="flex flex-col gap-4 mb-5" onSubmit={onComplete}>
<div className="flex flex-col gap-4 mb-5">
<div>
<div className="mb-2 block">
<Label htmlFor="firstname" value="Your firstname" />
</div>
<TextInput
id="firstname"
type="text"
required={true}
shadow={true}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="lastname" value="Your lastname" />
</div>
<TextInput
id="lastname"
type="text"
required={true}
shadow={true}
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
</div>

<div className="col-span-2 grid grid-cols-2 gap-4">
<div>
<div className="mb-2 block">
<Label htmlFor="street" value="Your street" />
</div>
<TextInput
id="street"
type="text"
required={true}
shadow={true}
value={street}
onChange={(e) => setStreet(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="building-number" value="Your building number" />
</div>
<TextInput
id="building-number"
type="text"
required={true}
shadow={true}
value={buildingNumber}
onChange={(e) => setBuildingNumber(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="apartment-number" value="Your apartment number" />
</div>
<TextInput
id="apartment-number"
type="text"
required={false}
shadow={true}
value={apartmentNumber}
onChange={(e) => setApartmentNumber(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="city" value="Your city" />
</div>
<TextInput
id="city"
type="text"
required={true}
shadow={true}
value={city}
onChange={(e) => setCity(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="zip-code" value="Your zip code" />
</div>
<TextInput
id="city"
type="text"
required={true}
shadow={true}
value={zipCode}
onChange={(e) => setZipCode(e.target.value)}
/>
</div>

<div>
<div className="mb-2 block">
<Label htmlFor="country" value="Your country" />
</div>
<TextInput
id="city"
type="text"
required={true}
shadow={true}
value={country}
onChange={(e) => setCountry(e.target.value)}
/>
</div>
</div>
</div>

{(completionLoading) ? (
<Button type="submit" disabled={true}>
<div className="mr-3">
<Spinner size="sm" light={true} />
</div>
Completing registration ...
</Button>
) : (
<Button type="submit">Complete registration of new account</Button>
)}
</form>
) : null}

{completionError ? (
<Alert color="failure" icon={HiInformationCircle} className="mb-3">
<span>
<span className="font-bold">Error!</span> {completionError}
</span>
</Alert>
) : null}
{completionSuccess ? (
<Alert color="success" icon={HiCheckCircle} className="mb-3">
<span>
<span className="font-bold">Success!</span> {completionSuccess}
</span>
</Alert>
) : null}
<Footer />
</div>
</>
Expand Down
44 changes: 44 additions & 0 deletions SwiftParcel.Web/frontend/src/utils/api.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ export const register = async (
'Content-Type': 'application/json'
}
})

console.log("response:", response);

return response.data;

} catch (registerError) {
Expand All @@ -104,6 +107,47 @@ export const register = async (
}
};

export const completeCustomerRegistration = async (
customerId: string,
firstName: string,
lastName: string,
address: string,
sourceAddress: string
) => {
try {

const payload = {
CustomerId: customerId,
FirstName: firstName,
LastName: lastName,
Address: address,
SourceAddress: sourceAddress
};

console.log("Request payload (customer completion):", payload);

console.log("JSON being sent (customer completion):", JSON.parse(JSON.stringify(payload)));

const response = await api.post(`/customers`, JSON.parse(JSON.stringify(payload)), {
headers: {
//'Authorization': `${userInfo.accessToken}`,
'Content-Type': 'application/json'
}
})
return response.data;

} catch (error) {
if (axios.isAxiosError(error) && error.response) {
console.error('Error status:', error.response.status);
console.error('Error data:', error.response.data);
console.error('Error during registration:', error.message);
} else {
console.error('Error during registration:', error);
}
throw error;
}
};

export const logout = async () => {
try {
const headers = getAuthHeader();
Expand Down

0 comments on commit 73ce139

Please sign in to comment.