Update events media queries & events links

assets/style/pages/_event.scss

@@ -52,4 +52,16 @@
       padding: 1rem 0;
     }
   }
+}
+
+@media only screen and (max-width: 600px) {
+  .event {
+    padding: 2rem .5rem;
+
+    .hero  h3 {
+      font-size: 2.25rem;
+      line-height: 2.5rem;
+      margin: 1rem 0;
+    }
+  }
 }

assets/style/pages/index/_events.scss

@@ -26,14 +26,17 @@
     .attend,
     .meetup {
       grid-column: 2;
-      display: inline-block;
-      font-size: 1rem;
-      line-height: 1.4rem;
       text-align: right;
-
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
+      
+      a {
+        display: inline-block;
+        font-size: 1rem;
+        line-height: 1.4rem;
+  
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
       }
     }
 

components/index/Events.vue

@@ -25,10 +25,13 @@
         <p class="location">{{ event.location }}</p>
         <p>{{ event.date }} · {{ event.time }}</p>
       </div>
-      <NuxtLink v-bind:class="(event.meetup)?'attend both':'attend bottom'" class="attend" 
-        v-if="!event.past" :href="'/login?action=attend&?ref=' + event.slug" >Attend event</NuxtLink>
-      <NuxtLink class="meetup bottom" v-if="event.meetup" target="_BLANK"
-        :to="'https://www.meetup.com/capitalregionbitcoinnetwork/events/' + event.meetup + '/'">Meetup.com</NuxtLink>
+      <div v-bind:class="(event.meetup)?'attend both':'attend bottom'" >
+        <NuxtLink v-if="!event.past" :href="'/login?action=attend&?ref=' + event.slug" >Attend event</NuxtLink>
+      </div>
+      <div class="meetup bottom">
+        <NuxtLink v-if="event.meetup" target="_BLANK" 
+          :to="'https://www.meetup.com/capitalregionbitcoinnetwork/events/' + event.meetup + '/'">Meetup.com</NuxtLink>
+      </div>
     </div>
   </div>
 </template>

content/event/monthly-meetup-6-28-2023.md

@@ -3,7 +3,7 @@ title: Monthly Meetup
 slug: monthly-meetup-6-28-2023
 date: 2023-06-28
 published: 2023-06-04
-location: Druthers Brewing Company
+location: Druther's Brewing Company
 address: 7 Southside Drive, Clifton Park
 time: 6:00 PM
 meetup: 294210792

pages/login.vue

@@ -9,8 +9,63 @@
     ],
   })
 
+  import { Form, Field, ErrorMessage } from 'vee-validate';
+
+  function required(value) {
+    return value ? true : 'This field is required';
+  }
+
+  const goodEmail = (email) => {
+    if (!email) {
+      return 'This field is required'
+    }
+  }
+
+
+  const { login } = useDirectusAuth()
+
+  const onSubmit = async (values) => {
+    try {
+      await login({ 
+        email: values.email,
+        password: values.password,
+        role: process.env.DIRECTUS_ROLE
+      })
+
+      // Redirect on success
+      navigateTo('/')
+
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
 </script>
 
 <template>
+  <div class="login">
+    <h3>Sign in to your account</h3>
+    <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
+      use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>
 
+    <Form v-slot="{ errors }" @submit="onSubmit" >
+      <div class="input">
+        <label>Email</label>
+        <Field name="email" :rules="required" placeholder="Enter your email" />
+        <ErrorMessage name="email" />
+      </div>
+
+      <div class="input">
+        <label>Password</label>
+        <Field name="password" :rules="required" placeholder="********" type="password" />
+        <ErrorMessage name="password" />
+      </div>
+
+      <button>Sign in</button>
+    </Form>
+
+    <p class="newbie">Don't have an account? <NuxtLink href="/register">Create account</NuxtLink></p>
+    <p class="reset">Forgot password? <NuxtLink href="/reset">Reset password</NuxtLink></p>
+
+  </div>
 </template>

pages/register.vue

@@ -9,8 +9,58 @@
     ],
   })
 
+  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,
+      })
+    } catch (e) {}
+  }
+
 </script>
 
 <template>
+  <div class="register">
+    <h3>Create your account</h3>
+    <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
+      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>
 </template>