@@ -0,0 +1,103 @@
1+import { useState, useEffect } from 'react';
2+import Head from "next/head";
3+import Meta from "../components/Meta";
4+import {
5+ Container,
6+ SingleColumn,
7+ Section,
8+ IntraNav,
9+} from "@urbit/foundation-design-system";
10+import Header from "../components/Header";
11+import Footer from "../components/Footer";
12+
13+const postReq = (path, params, method='post') => {
14+ const form = document.createElement('form');
15+ form.method = method;
16+ form.action = path;
17+
18+ for (const key in params) {
19+ if (params.hasOwnProperty(key)) {
20+ const hiddenField = document.createElement('input');
21+ hiddenField.type = 'hidden';
22+ hiddenField.name = key;
23+ hiddenField.value = params[key];
24+
25+ form.appendChild(hiddenField);
26+ }
27+ }
28+
29+ document.body.appendChild(form);
30+ form.submit();
31+}
32+
33+
34+
35+export default function Trial(props) {
36+ const post = {
37+ title: "Trial",
38+ };
39+
40+ const [count, setCount] = useState(0)
41+
42+ useEffect(() => {
43+ fetch('https://api.shore.arvo.network/count', {
44+ method: 'GET',
45+ headers: {'Content-Type': 'application/json'}
46+ })
47+ .then(res => res.json())
48+ .then(data => {
49+ setCount(data.count);
50+ });
51+ }, []);
52+
53+ const available = count > 0;
54+
55+ const buttonBg = available ? '' : 'pink';
56+
57+ return (
58+ <Container>
59+ <Head>
60+ <title>Trial • urbit.org</title>
61+ {Meta(post)}
62+ </Head>
63+ <IntraNav ourSite="https://urbit.org" search={props.search} />
64+ <SingleColumn>
65+ <Header />
66+ <Section className="pt-8">
67+ <h1>Trial</h1>
68+ <p className="mt-12">There are currently {count} trial comets left.</p>
69+ </Section>
70+ <div className="layout px-4 md:px-8">
71+ <a className="p-8 button-lg bg-green-400 text-white"
72+ style={{"backgroundColor": buttonBg}}
73+ onClick={(e) => {
74+ e.stopPropagation();
75+
76+ if (!available) {
77+ return
78+ }
79+
80+ fetch('https://api.shore.arvo.network/enter', {
81+ method: 'GET',
82+ headers: {'Content-Type': 'application/json'}
83+ })
84+ .then(res =>{
85+ if (!res.ok) {
86+ throw 'Error response from shore api.';
87+ }
88+ return res.json();
89+ })
90+ .then(data => {
91+ postReq(data.url + '/~/login', {password: data.code, redirect: '/'});
92+ })
93+ .catch(e => setCount(0));
94+ }}
95+ >
96+ {available ? 'Try now' : 'No trial comets available, try again later'}
97+ </a>
98+ </div>
99+ </SingleColumn>
100+ <Footer />
101+ </Container>
102+ );
103+}