Polished activation page

This commit is contained in:
keannu125 2023-02-27 00:13:17 +08:00
parent 115b8b207f
commit 1cc9762d08
2 changed files with 38 additions and 7 deletions

View file

@ -10,25 +10,51 @@ export interface activation {
} }
export default function Activation() { export default function Activation() {
let { uid, token } = useParams(); let { uid, token } = useParams();
const [activationStatus, setStatus] = useState("Activating..."); const [status, setStatus] = useState(0);
async function verify(activation: activation) { async function verify(activation: activation) {
let status = await UserActivate(activation); let status = await UserActivate(activation);
if (status) { if (status) {
setStatus("Success!"); setStatus(1);
} else { } else {
setStatus("Invalid Activation Link"); setStatus(2);
} }
} }
if (uid && token) { if (uid && token) {
verify({ uid, token }); verify({ uid, token });
} }
if (status === 1) {
return (
<div style={styles.background}>
<Header />
<div style={styles.note}>
<p style={styles.text_small}>User ID: {uid}</p>
<p style={styles.text_small}>Activation Token: {token}</p>
<p style={styles.text_small_green}>
Activation Successful. Please login
</p>
</div>
</div>
);
}
if (status === 2) {
return (
<div style={styles.background}>
<Header />
<div style={styles.note}>
<p style={styles.text_small}>User ID: {uid}</p>
<p style={styles.text_small}>Activation Token: {token}</p>
<p style={styles.text_small_red}>Invalid Activation Link</p>
</div>
</div>
);
}
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header /> <Header />
<div style={styles.note}> <div style={styles.note}>
<p style={styles.text_medium}>User ID: {uid}</p> <p style={styles.text_small}>User ID: {uid}</p>
<p style={styles.text_medium}>Activation Token: {token}</p> <p style={styles.text_small}>Activation Token: {token}</p>
<p style={styles.text_medium}>{activationStatus}</p> <p style={styles.text_small}>Activating...</p>
</div> </div>
</div> </div>
); );

View file

@ -122,7 +122,12 @@ const styles: { [key: string]: React.CSSProperties } = {
fontWeight: "bold", fontWeight: "bold",
textAlign: "center", textAlign: "center",
}, },
text_small_green: {
color: "#0dbc6a",
fontSize: "2vh",
fontWeight: "bold",
textAlign: "center",
},
text_medium: { text_medium: {
color: "white", color: "white",
fontSize: "4vh", fontSize: "4vh",