mirror of
https://github.com/lemeow125/React-NotesApp.git
synced 2024-11-17 06:29:28 +08:00
Polished activation page
This commit is contained in:
parent
115b8b207f
commit
1cc9762d08
2 changed files with 38 additions and 7 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue