blob: fdb671b0f0be77d885bbdddf1d795e5e9953eb1f (
plain) (
blame)
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
|
import Card from "./Card";
import TextInput from "./forms/TextInput";
import styled from "styled-components";
import { useState } from "react";
import { voucherLogin } from "../api/login";
import { APIError } from "../api/client";
import { setVoucherToken } from "../slices/authorization";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../store";
import { useNavigate } from "react-router-dom";
import Button from "./forms/Button";
import { decodeJWT, isJWTExpired, maybeRefreshTask } from "../api/jwt";
const VoucherValidateContainer = styled.div`
margin-bottom: 1rem;
`;
const VoucherValidator = () => {
const [voucherCode, setVoucherCode] = useState("");
const [error, setError] = useState<string | null>(null);
const dispatch = useDispatch();
const navigate = useNavigate();
const voucherToken = useSelector((state: RootState) => state.authorization.voucherToken);
let expired = false;
if (voucherToken) {
const parsed = decodeJWT(voucherToken);
expired = isJWTExpired(parsed);
}
const validate = async () => {
try {
const voucherClaim = await voucherLogin(voucherCode);
dispatch(setVoucherToken(voucherClaim.jwt));
setError(null);
maybeRefreshTask();
} catch (e) {
if (e instanceof APIError) {
if (e.data?.detail) {
setError(e.data.detail);
} else {
setError(e.message);
}
} else {
setError("An unknown error occurred.");
}
}
};
return (
<Card title="Voucher Validator">
<VoucherValidateContainer>
<p>Enter your voucher code to view information.</p>
<TextInput
label="Voucher Code"
type="text"
value={voucherCode}
placeholder="Enter your voucher code"
onChange={setVoucherCode}
onSubmit={validate}
submitLabel="Validate Code"
/>
</VoucherValidateContainer>
{(voucherToken && !expired) && (
<>
<h3>Voucher successfully validated!</h3>
<Button onClick={() => {
navigate("/store");
}}>Go to store</Button>
</>
)}
{expired && (
<div>
<h3>Session expired</h3>
<p>Your voucher session has expired. Please enter your voucher again.</p>
</div>
)}
{error && (
<div>
<h3>Error</h3>
<p>{error}</p>
</div>
)}
</Card>
);
};
export default VoucherValidator;
|