ryan
/
crbtc.org
1
0
Fork 0
Code Issues Pull Requests Activity

update footer & events, remove signup, analytics url

main
Ryan Moon 2023-11-25 03:06:43 -05:00
parent 82f403a1a5
commit b396f6097a
27 changed files with 264 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app.vue
View File

@ -15,9 +15,16 @@
{ name: 'theme-color', content: '#ffffff' } { name: 'theme-color', content: '#ffffff' }
], ],
script: [ script: [
{ defer: 'true', 'data-domain': 'crbtc.org', src: 'https://pa.inspin.co/js/latest.js' } { defer: 'true', 'data-domain': 'crbtc.org', src: 'https://pa.inspin.io/js/latest.js' }
] ]
}) })
const nuxtApp = useNuxtApp()
nuxtApp.hook("page:finish", () => {
window.scrollTo(0, 0)
})
</script> </script>
<template> <template>

6
assets/style/_config.scss
View File

@ -9,10 +9,10 @@ $t-color: #242424; // ternary
$w-color: #ffffff; // white $w-color: #ffffff; // white
$bl-color: #000000; // black $bl-color: #000000; // black
$error: #d30012; // error $e-color: #d30012; // error
$p-color: #666666; // past
$btn-color: #faf1e5; // button $sh-color: #0D0801; // secondary hover
$btnh-color: #f5ece0; // button hover
$link: #308fe7; // link $link: #308fe7; // link
$i-color: #494949; // input $i-color: #494949; // input

155
assets/style/components/_footer.scss
View File

@ -3,7 +3,7 @@
.top { .top {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 2.5fr ; grid-template-columns: repeat(3, 1.25fr) 2fr ;
max-width: 60rem; max-width: 60rem;
padding: 2rem 4rem; padding: 2rem 4rem;
margin: 0 auto; margin: 0 auto;
@ -29,6 +29,27 @@
color: $link; color: $link;
&:hover { text-decoration: underline } &:hover { text-decoration: underline }
} }
.btn a {
display: inline-block;
color: $s-color;
background: $b-color;
font-weight: 600;
border: .1rem solid $s-color;
padding: .15rem 2rem .25rem 1.55rem;
margin: .25rem 0;
.icon-btc-b {
position: relative;
top: .15rem;
font-size: 1.15rem;
}
&:hover {
text-decoration: none;
background: $sh-color;
}
}
} }
} }
@ -41,78 +62,94 @@
} }
.bottom { .bottom {
max-width: 60rem; background: $b-color;
height: 5.5rem;
padding: 2rem 4rem;
margin: 0 auto;
.who {
float: left;
color: $f-color;
font-size: .895rem;
a {
color: $link;
margin: 0 2px;
&:hover { text-decoration: underline }
}
.icon-btc-b {
position: relative;
top: .25rem;
font-size: 1.1rem;
}
}
ul { .center {
float: right; height: 5.5rem;
list-style-type: none; max-width: 60rem;
white-space:nowrap; padding: 2rem 4rem;
padding: 0; margin: 0 auto;
margin: 0;
.who {
li, li p { float: left;
display:inline;
font-size: .895rem;
}
a {
color: $link;
margin: 0 .5rem;
&:hover { text-decoration: underline }
}
p {
color: $f-color; color: $f-color;
margin: 0 0 0 .5rem; font-size: .895rem;
a {
color: $link;
margin: 0 2px;
&:hover { text-decoration: underline }
}
.icon-btc-b {
position: relative;
top: .25rem;
font-size: 1.1rem;
}
} }
.copy .icon-copyright { ul {
font-size: .7rem; float: right;
opacity: .9; list-style-type: none;
white-space:nowrap;
padding: 0;
margin: 0;
li, li p {
display:inline;
font-size: .895rem;
}
a {
color: $link;
margin: 0 .5rem;
&:hover { text-decoration: underline }
}
p {
color: $f-color;
margin: 0 0 0 .5rem;
}
.copy .icon-copyright {
font-size: .7rem;
opacity: .9;
}
} }
} }
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
.footer { .footer {
height: unset; height: unset;
padding: 0 2rem; padding: 0;
margin: 1rem 0;
.who, .top {
.links { grid-template-columns: 1fr 1fr;
float: none; padding: 2rem 2rem 0 2rem;
ul {
margin: 2rem 1rem;
}
} }
.links { .bottom {
padding: .5rem 0; .center {
height: 5.5rem;
padding: .5rem 2.5rem;
margin: 0;
a:first-of-type { .who {
margin: 0 1rem 0 0; float: none;
padding: .5rem;
}
ul {
float: none;
}
} }
} }
} }

16
assets/style/components/_header.scss
View File

@ -25,6 +25,7 @@ header {
img { img {
max-width: 6.5rem; max-width: 6.5rem;
background: $b-color;
} }
} }
} }
@ -62,14 +63,21 @@ header {
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
header { header {
grid-template-columns: 5.5rem calc(100% - 5.5rem); grid-template-columns: 5.5rem calc(100% - 5.5rem);
padding: 2.5rem 2rem 1rem 2rem; padding: 2.5rem 2rem 1rem 2rem;
.logo h1 { .logo {
font-size: 1rem; height: 5.25rem;
line-height: 1rem;
a {
height: 5.25rem;
img {
max-width: 5.5rem;
}
}
} }
.nav { .nav {

6
assets/style/main.scss
View File

@ -3,17 +3,19 @@
body { body {
background: $b-color; background: $b-color;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .075) 25%, rgba(255, 255, 255, .075) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .075) 75%, rgba(255, 255, 255, .075) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .075) 25%, rgba(255, 255, 255, .075) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .075) 75%, rgba(255, 255, 255, .075) 76%, transparent 77%, transparent);
background-size: 4.5rem 4.5rem;
margin: 0; margin: 0;
} }
main { main {
max-width: 60rem; max-width: 60rem;
min-height: calc(100vh - 438px); min-height: calc(100vh - 464px);
margin: 0 auto; margin: 0 auto;
padding: 0 4rem; padding: 0 4rem;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
main { padding: 2rem 1.5rem } main { padding: 2rem 1.5rem }
} }

14
assets/style/pages/_auth.scss
View File

@ -1,5 +1,13 @@
.login,
.register { .register {
padding: 4rem 0 0 0;
text-align: center;
p {
margin: 1rem 0;
}
}
.login {
max-width: 24rem; max-width: 24rem;
padding: 2rem; padding: 2rem;
margin: 0 auto; margin: 0 auto;
@ -53,7 +61,7 @@
} }
span { span {
color: $error; color: $e-color;
font-family: $p-font; font-family: $p-font;
font-size: .75rem; font-size: .75rem;
} }
@ -67,7 +75,7 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background: rgba($s-color, .05); background: $sh-color;
} }
} }
} }

7
assets/style/pages/_guide.scss
View File

@ -3,8 +3,13 @@
.hero { .hero {
h3 { font-size: 2.5rem } h3 { font-size: 2.5rem }
h4 { h4 {
font-size: 1.05rem;
padding: .5rem 0;
}
p {
font-size: .9rem; font-size: .9rem;
font-weight: 500; font-weight: 500;
} }

2
assets/style/pages/_pages.scss
View File

@ -52,7 +52,7 @@
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
.about, .about,
.workshop, .workshop,
.privacy, .privacy,

23
assets/style/pages/index/_banner.scss
View File

@ -3,8 +3,8 @@
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
max-width: 60rem; max-width: 60rem;
background: $t-color; background: $t-color;
margin: 2rem auto 4rem auto;
padding: 2rem 2rem 2.25rem 2rem; padding: 2rem 2rem 2.25rem 2rem;
margin: 2rem auto 4rem auto;
h4 { h4 {
margin: 0 0 1.5rem 0; margin: 0 0 1.5rem 0;
@ -15,17 +15,32 @@
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 400; font-weight: 400;
line-height: 1.65rem; line-height: 1.65rem;
padding: .5rem 2rem 0 0; padding: .5rem 4rem 0 0;
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
.banner { .banner {
display: block; display: block;
padding: 3rem 1rem 8rem 1rem; padding: 1.5rem 1.5rem 2rem 1.5rem;
margin: 4rem .5rem 2rem .5rem;
h4 {
margin: 0 0 .5rem 0;
}
h6 {
padding: .5rem 4rem .5rem 0;
}
.msg .donate { .msg .donate {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
} }
}
@media only screen and (max-width: 600px) {
.banner h6 {
padding: .5rem 0;
}
} }

9
assets/style/pages/index/_events.scss
View File

@ -12,6 +12,7 @@
grid-template-columns: 3fr 2fr; grid-template-columns: 3fr 2fr;
grid-template-rows: 1fr .7fr .6fr; grid-template-rows: 1fr .7fr .6fr;
grid-column: 2; grid-column: 2;
background: $b-color;
padding: 1rem 2rem; padding: 1rem 2rem;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
border: .15rem solid $w-color; border: .15rem solid $w-color;
@ -69,11 +70,15 @@
} }
.past { .past {
opacity: .4; border-color: #666666;
div {
opacity: .4;
}
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
.events { .events {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 4rem 1rem; padding: 4rem 1rem;

3
assets/style/pages/index/_guides.scss
View File

@ -11,6 +11,7 @@
.guide { .guide {
display: inline-block; display: inline-block;
background: $b-color;
border: .15rem solid $w-color; border: .15rem solid $w-color;
padding: 0; padding: 0;
@ -31,7 +32,7 @@
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
.guides { .guides {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 1rem; grid-gap: 1rem;

4
assets/style/pages/index/_hero.scss
View File

@ -1,5 +1,5 @@
.hero { .hero {
padding: calc(50vh - 260px) 0 12vh 0; padding: calc(50vh - 240px) 0 10vh 0;
h3 { h3 {
color: $f-color; color: $f-color;
@ -24,7 +24,7 @@
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
.hero { .hero {
padding: 18vh 0; padding: 18vh 0;

2
assets/style/pages/index/_sponsors.scss
View File

@ -15,7 +15,7 @@
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 768px) {
.sponsors { .sponsors {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 4rem 0 2rem 0; padding: 4rem 0 2rem 0;

32
components/Footer.vue
View File

@ -1,15 +1,9 @@
<script setup> <script setup>
const { path } = useRoute() const route = useRoute()
let show = true
if (path === '/login' || path === '/register') {
show = false
}
</script> </script>
<template> <template>
<div class="footer" v-if="show"> <div class="footer" v-if="route.path === '/login' || route.path === '/register' ? false : true">
<div class="top"> <div class="top">
<ul class="info"> <ul class="info">
<li><h5>Resources</h5></li> <li><h5>Resources</h5></li>
@ -24,26 +18,28 @@
<li><NuxtLink to="/forms">Suggestions</NuxtLink></li> <li><NuxtLink to="/forms">Suggestions</NuxtLink></li>
</ul> </ul>
<ul class="social"> <ul class="social">
<li><h5>Follow Us</h5></li> <li><h5>Follow us</h5></li>
<li><NuxtLink to="https://twitter.com/UpstateNYBTC" target="_BLANK">Twitter</NuxtLink></li> <li><NuxtLink to="https://twitter.com/UpstateNYBTC" target="_BLANK">Twitter</NuxtLink></li>
<li><NuxtLink to="https://www.meetup.com/capitalregionbitcoinnetwork" target="_BLANK">Meetup</NuxtLink></li> <li><NuxtLink to="https://www.meetup.com/capitalregionbitcoinnetwork" target="_BLANK">Meetup</NuxtLink></li>
<li><NuxtLink to="https://discord.gg/jnrh6rPQ4b" target="_BLANK">Discord</NuxtLink></li> <li><NuxtLink to="https://discord.gg/jnrh6rPQ4b" target="_BLANK">Discord</NuxtLink></li>
</ul> </ul>
<ul class="donate"> <ul class="donate">
<li><h5>Donate</h5></li> <li><h5>Support us</h5></li>
<li><h6>BTC: <NuxtLink href="bitcoin:bc1qtw78x248kzq547w0zkm790u0yhgjkerxahpm9e" >bc1qtw78x248kzq547w0zkm790u0yhgjkerxahpm9e</NuxtLink></h6></li> <li class="btn" ><NuxtLink to="https://btcpay0.voltageapp.io/apps/2hjkatjQgn5LUU2bkHZxQmq8uR1y/crowdfund" target="_BLANK"><span class="icon-btc-b"></span> Donate</NuxtLink></li>
</ul> </ul>
</div> </div>
<hr/> <hr/>
<div class="bottom"> <div class="bottom">
<div class="who"> <div class="center">
<p>Made with <span class="icon-btc-b"></span> by <NuxtLink to="https://ryanmoon.com" target="_blank">Ryan Moon</NuxtLink></p> <div class="who">
<p>Made with <span class="icon-btc-b"></span> by <NuxtLink to="https://ryanmoon.com" target="_blank">Ryan Moon</NuxtLink></p>
</div>
<ul>
<li><NuxtLink to="/privacy">Privacy Policy</NuxtLink></li>
<li><NuxtLink to="/terms">Terms of Service</NuxtLink></li>
<li><NuxtLink to="https://git.inspin.io/ryan/crbtc.org" target="_blank">Source Code</NuxtLink></li>
</ul>
</div> </div>
<ul>
<li><NuxtLink to="/privacy">Privacy Policy</NuxtLink></li>
<li><NuxtLink to="/terms">Terms of Service</NuxtLink></li>
<li><NuxtLink to="https://git.inspin.io/ryan/crbtc.org" target="_blank">Source Code</NuxtLink></li>
</ul>
</div> </div>
</div> </div>
</template> </template>

2
components/index/Banner.vue
View File

@ -2,7 +2,7 @@
<div class="banner"> <div class="banner">
<h4>Get Involved</h4> <h4>Get Involved</h4>
<div class="msg"> <div class="msg">
<h6>Come learn and talk about Bitcoin. Meet new people, ask questions, suggest topics, or just come and hang out.</h6> <h6>Come learn and talk about Bitcoin. Meet new people, ask questions, suggest topics, or just hang out.</h6>
</div> </div>
</div> </div>
</template> </template>

5
content/about.md
View File

@ -13,4 +13,7 @@ The first meetup was held on Thursday, May 11th 2023. Meetups allow for open dis
about Bitcoin news and common questions surrounding the currency. about Bitcoin news and common questions surrounding the currency.
Follow us on <a href="https://twitter.com/UpstateNYBTC" target="_BLANK">Twitter</a> and view Follow us on <a href="https://twitter.com/UpstateNYBTC" target="_BLANK">Twitter</a> and view
the schedule of <a href="/#events">upcoming events</a> to see if you can make it to the next one. the schedule of <a href="/#events">upcoming events</a> to see if you can make it to the next one.
You can also visit <a href="https://crbtc/" target="_BLANK">crbtc/</a> to use this website with
<a href="https://handshake.org" target="_BLANK">Handshake</a>.

2
content/event/monthly-meetup-10-18-2023.md
View File

@ -7,7 +7,7 @@ location: Mocha Lisa's Caffe
address: 22 Clifton Country Road, Clifton Park address: 22 Clifton Country Road, Clifton Park
time: 6:00 PM time: 6:00 PM
meetup: 295742661 meetup: 295742661
priority: 1 priority: 3
--- ---
## Details ## Details

21
content/event/monthly-meetup-11-29-2023.md 100644
View File

@ -0,0 +1,21 @@
---
title: Monthly Meetup
slug: monthly-meetup-11-29-2023
date: 2023-11-29
published: 2023-11-24
location: Frog Alley Brewing Co
address: 108 State St, Schenectady
time: 6:00 PM
meetup: 297525682
priority: 1
---
## Details
Okay guys finally getting our November event on the books! The holiday threw things off a little bit.
Looking forward to seeing everyone at the November meetup! We willl be at Frog Alley in Schenectady this month.
Our monthly Bitcoin meetup! This is a Bitcoin only event. Whether you are interested in learning about Bitcoin, or are a seasoned pleb, come and hang out! We will have learning materials for those who are just starting out.
This has grown into a great event about meeting new plebs, socializing, and talking all things bitcoin. Hope you all can make it! Feel free to bring a friend or two to orange pill :-). Appetizers and first hour of drinks will be provided.

2
content/event/monthly-meetup-7-26-2023.md
View File

@ -7,7 +7,7 @@ location: Druther's Brewing Company
address: 221 Harborside Drive, Schenectady address: 221 Harborside Drive, Schenectady
time: 6:00 PM time: 6:00 PM
meetup: 294822271 meetup: 294822271
index: 9999 priority: 9999
--- ---
## Details ## Details

2
content/event/monthly-meetup-9-20-2023.md
View File

@ -7,7 +7,7 @@ location: Druther's Brewing Company
address: 7 Southside Drive, Clifton Park address: 7 Southside Drive, Clifton Park
time: 6:00 PM time: 6:00 PM
meetup: 295741531 meetup: 295741531
priority: 2 priority: 9999
--- ---
## Details ## Details

2
content/event/movie-game-night-9-6-2023.md
View File

@ -7,7 +7,7 @@ location: Ballston Lake, NY
address: Ballston Lake, NY address: Ballston Lake, NY
time: 6:00 PM time: 6:00 PM
meetup: 295741625 meetup: 295741625
priority: 3 priority: 9999
--- ---
## Details ## Details

33
content/event/regional-meetup-10-29-2023.md 100644
View File

@ -0,0 +1,33 @@
---
title: New England Bitcoin Meetup
slug: regional-meetup-10-29-2023
date: 2023-10-29
published: 2023-10-21
location: Sports World
address: 226 Main Street · East Windsor, CT
time: 12:00 PM
meetup: 296853356
priority: 2
---
## Details
The Capital Region Bitcoin Network is excited to share the details of New England’s 1st Regional Bitcoin Meetup!
In our mission to accelerate bitcoin mass adoption, we are trying a novel idea and bringing together bitcoin meetup groups throughout New England under 1 roof!
Meetup will have 4 stages.
1. We are preparing a “home cooked/healthy meal prepared on premises for all attendees to enjoy.
2. Jason Maier (author of “A Progressive’s Case for Bitcoin”) will be talking to the group (as well as bringing some books with him to sign)
3. The leaders of the N.E. Groups will talk to meetup about what each Individual group is working on.
4. A brainstorming session to help formulate and crystallize the freedom festival 2024.
Be part of the 1st N.E. Bitcoin meetup and help spread the mass adoption of bitcoin. This meet up is bringing together some of the brightest bitcoin minds in New England including groups from MA, NH, RI, CT, NY.
*This is a great opportunity for ingenious collaboration between the New England bitcoin thought leaders and hugely valuable bitcoin plebs. Come and participate in this amazing and energizing meet up.
All members of the Capital Region Bitcoin Network have been formally invited to attend this event in East Windsor, CT. Feel free to RSVP to this event, or to the original Mass Adoption event (https://meetu.ps/e/MxmMM/SgvfD/i) If anyone wants to carpool please let me know in the comments. I am happy to set something up!

7
package.json
View File

@ -1,6 +1,9 @@
{ {
"name": "nuxt-app", "name": "crbtc",
"private": true, "version": "1.1.0",
"description": "Capital Region Bitcoin Network",
"license": "GPL-3.0-only",
"homepage": "https://crbtc.org",
"scripts": { "scripts": {
"build": "nuxt build", "build": "nuxt build",
"dev": "nuxt dev", "dev": "nuxt dev",

7
pages/guide/[slug].vue
View File

@ -19,10 +19,9 @@
<div class="guide" :id="data.slug"> <div class="guide" :id="data.slug">
<div class="hero"> <div class="hero">
<h3>{{ data.title }}</h3> <h3>{{ data.title }}</h3>
<h4>Written by: {{ data.author }}</h4> <p>Written by: {{ data.author }}</p>
<h4 v-if="data.updated < data.published">Updated: {{ data.updated }}</h4> <p v-if="data.updated < data.published">Updated: {{ data.updated }}</p>
<h4 v-if="data.published <= data.updated">Published: {{ data.published }}</h4> <p v-if="data.published <= data.updated">Published: {{ data.published }}</p>
<img :src="'/img/guide/' + data.thumbnail" :alt="data.title + ' Thumbnail'" />
</div> </div>
<ContentDoc class="content" /> <ContentDoc class="content" />
</div> </div>

4
pages/index.vue
View File

@ -9,15 +9,13 @@
}, },
], ],
}) })
const { isDesktopOrTablet } = useDevice();
</script> </script>
<template> <template>
<div class="index"> <div class="index">
<div class="hero"> <div class="hero">
<h3>Welcome to our <br v-if="isDesktopOrTablet" /><span>Bitcoin</span> community.</h3> <h3>Welcome to our <br/><span>Bitcoin</span> community.</h3>
</div> </div>
<IndexSponsors /> <IndexSponsors />

8
pages/login.vue
View File

@ -45,8 +45,8 @@
<template> <template>
<div class="login"> <div class="login">
<h3>Sign in to your account</h3> <h3>Sign in to your account</h3>
<h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of <h4 class="policy">By continuing, you agree to our <NuxtLink to="/terms">Terms of
use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4> use</NuxtLink> and <NuxtLink to="/privacy">Privacy policy</NuxtLink>.</h4>
<Form v-slot="{ errors }" @submit="onSubmit" > <Form v-slot="{ errors }" @submit="onSubmit" >
<div class="input"> <div class="input">
@ -64,8 +64,8 @@
<button>Sign in</button> <button>Sign in</button>
</Form> </Form>
<p class="newbie">Don't have an account? <NuxtLink href="/register">Create account</NuxtLink></p> <p class="newbie">Don't have an account? <NuxtLink to="/register">Create account</NuxtLink></p>
<p class="reset">Forgot password? <NuxtLink href="/reset">Reset password</NuxtLink></p> <p class="reset">Forgot password? <NuxtLink to="/reset">Reset password</NuxtLink></p>
</div> </div>
</template> </template>

53
pages/register.vue
View File

@ -8,60 +8,11 @@
}, },
], ],
}) })
import { Form, Field, ErrorMessage } from 'vee-validate';
function required(value) {
return value ? true : 'This field is required'
}
const { createUser } = useDirectusAuth();
const onSubmit = async (values) => {
let slug = values.username.toLowerCase().replace(/\s/g, '')
try {
const newUser = await createUser({
first_name: values.username,
email: values.email,
password: values.password,
external_identifier: slug,
role: process.env.DIRECTUS_ROLE,
})
} catch (e) {}
}
</script> </script>
<template> <template>
<div class="register"> <div class="register">
<h3>Create your account</h3> <p>Already have an account? <NuxtLink to="/login">Sign in</NuxtLink></p>
<h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of <p>Don't have an account yet? Get in touch to <br/>have an account created for you.</p>
use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>
<Form v-slot="{ errors }" @submit="onSubmit" >
<div class="input">
<label>Username</label>
<Field name="username" placeholder="Choose a username" />
<ErrorMessage name="username" />
</div>
<div class="input">
<label>Email</label>
<Field name="email" placeholder="Enter your email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
<ErrorMessage name="email" />
</div>
<div class="input">
<label>Password</label>
<Field name="password" placeholder="********" type="password" />
<ErrorMessage name="password" />
</div>
<button>Create account</button>
</form>
<p class="newbie">Already have an account? <NuxtLink href="/login">Sign in</NuxtLink></p>
</div> </div>
</template> </template>