diff --git a/components/Commons/BlankLayout.js b/components/Commons/BlankLayout.js
index 659d90726827aaa9bc3c732208e3580a9526b619..4c348a3677bf43c2c56ba1d430b4014c6cf2504a 100644
--- a/components/Commons/BlankLayout.js
+++ b/components/Commons/BlankLayout.js
@@ -1,7 +1,13 @@
+import styled from "styled-components";
+
+const ChildrenContainer = styled.main`
+ margin-top: 3%
+`
+
const BlankLayout = ({ children }) => {
return (
<>
- <main>{children}</main>
+ <ChildrenContainer>{children}</ChildrenContainer>
</>
);
};
diff --git a/pages/activate/[token].js b/pages/activate/[token].js
new file mode 100644
index 0000000000000000000000000000000000000000..854e6ae5ae783852fd8646f404bcb9e4823fcd48
--- /dev/null
+++ b/pages/activate/[token].js
@@ -0,0 +1,60 @@
+import { useMutation } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useRouter } from 'next/router';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import Layout from '../../components/Commons/BlankLayout'
+
+const VERIFY_ACCOUNT = gql`
+ mutation verifyAccount($token: String!) {
+ verifyAccount(token: $token) {
+ success
+ errors
+ }
+ }
+`
+
+export default function ActivateAccountPage() {
+ const router = useRouter()
+ const [message, setMessage] = useState("")
+ const [verifyAccount, { loading: mutationLoading }] = useMutation(VERIFY_ACCOUNT)
+ const { token } = router.query
+
+ useEffect(() => {
+ if (token) {
+ activateAccount()
+ }
+ }, [token])
+
+ const activateAccount = async () => {
+ try {
+ const { data } = await verifyAccount({ variables: { token } })
+ if (data.verifyAccount.success) {
+ setMessage("Verifikasi akun berhasil!")
+ } else {
+ setMessage(`Verifikasi akun gagal. ${data.verifyAccount.errors.nonFieldErrors[0].message}`)
+ }
+ } catch (e) {
+ setMessage(`Verifikasi akun gagal. ${e}`)
+ }
+ }
+
+ return (
+ <Layout>
+ <div className="container">
+ <Head>
+ <title>Activate Account</title>
+ </Head>
+ <div className="alert alert-primary" role="alert">
+ {mutationLoading && 'Verifying...'}
+ {!mutationLoading && message}
+ <br />
+ <Link href={`/login`}>
+ <a>{'Klik disini untuk login'}</a>
+ </Link>
+ </div>
+ </div>
+ </Layout>
+ )
+}
\ No newline at end of file