suggestion page & form, mobile styling

assets/style/main.scss

@@ -58,6 +58,7 @@ a {
 @import 'pages/index';
 @import 'pages/pages';
 @import 'pages/event';
+@import 'pages/suggest';
 @import 'pages/guide';
 @import 'pages/auth';
 @import 'pages/404';

assets/style/pages/_pages.scss

@@ -1,5 +1,6 @@
 .about,
 .workshop,
+.suggest,
 .privacy,
 .terms {
   padding: 4rem 8rem;
@@ -55,6 +56,7 @@
 @media only screen and (max-width: 768px) {
   .about,
   .workshop,
+  .suggest,
   .privacy,
   .terms {
     padding: 1rem .5rem;

assets/style/pages/_suggest.scss

@@ -0,0 +1,15 @@
+.suggest {
+  @import 'suggest/form';
+  @import 'suggest/poll';
+
+  .success {
+    text-align: center;
+    margin: 8rem 6rem;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .suggest .success {
+    margin: 4rem 1rem;
+  }
+}

assets/style/pages/index/_hero.scss

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

assets/style/pages/suggest/form.scss

@@ -0,0 +1,84 @@
+form {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: 1rem 0;
+
+  label {
+    display: block;
+    color: $fs-color;
+    font-family: $p-font;
+    font-size: .85rem;
+    font-weight: 300;
+    margin: 1rem .75rem .25rem .25rem;
+    text-transform: uppercase;
+
+    sub {
+      display: inline-block;
+      font-size: .65rem;
+      opacity: .65;
+      padding: 0 0 0 .25rem;
+    }
+  }
+
+  button,  
+  textarea,
+  input {
+    width: 100%;
+    color: $w-color;
+    background: $b-color;
+    font-family: $p-font;
+    box-shadow: none;
+  }
+
+  textarea,
+  input {
+    font-size: 1rem;
+    font-weight: 400;
+    padding: .5rem 1rem;
+    margin: .25rem 0;
+    border: 1px solid $i-color;
+
+    &:focus {
+      border-color: $s-color;
+      outline: .1rem solid $s-color;
+    }
+
+    &::placeholder {
+      font-family: $p-font;
+      font-size: 1rem;
+      opacity: .4;
+    }
+  }
+
+  textarea {
+    min-height: 10rem;
+    font-family: $p-font;
+    padding: .75rem;
+    resize: vertical;
+  }
+
+  .message {
+    grid-column: 1;
+  }
+
+  button {
+    grid-column: 1/3;
+    font-size: .9rem;
+    font-weight: 500;
+    padding: .5rem 1rem .6rem 1rem;
+    margin: 1.5rem 0 0 0;
+    border: 1px solid $s-color;
+    text-align: center;
+
+    &:hover {
+      cursor: pointer;
+      background: $sh-color;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  form {
+    display: block;
+  }
+}

assets/style/pages/suggest/poll.scss

@@ -0,0 +1,78 @@
+form .poll {
+  grid-row: 1/3;
+  grid-column: 2;
+  padding: 0 0 0 2rem;
+
+  input,
+  label {
+    display: inline-block;
+  }
+
+  .check{
+    display: block;
+    position: absolute;
+    border: .15rem solid #AAAAAA;
+    border-radius: 100%;
+    height: 1rem;
+    width: 1rem;
+    top: .5rem;
+    left: .5rem;
+  }
+
+  .group {
+    display: block;
+    position: relative;
+    margin: .5rem 0;
+    
+    .check::before {
+      display: block;
+      position: absolute;
+      content: '';
+      border-radius: 100%;
+      height: .40rem;
+      width: .40rem;
+      top: .18rem;
+      left: .2rem;
+    }
+
+    @-moz-document url-prefix() {
+      .check::before {
+        height: .35rem;
+        width: .35rem;
+        top: .2rem;
+        left: .2rem;
+      }
+    }
+
+    label {
+      font-size: .9rem;
+      padding: .25rem 0 0 2rem;
+      margin: 0;
+      text-transform: none;
+      vertical-align: middle;
+    }
+  }
+
+  input[type=radio] {
+    position: absolute;
+    visibility: hidden;
+
+    &:checked ~ .check {
+      border: .15rem solid $s-color;
+    }
+    
+    &:checked ~ .check::before{
+      background: $s-color;
+    }
+    
+    &:checked ~ label{
+      color: $s-color;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  form .poll {
+    padding: 1rem 0;
+  }
+}

components/Footer.vue

@@ -15,7 +15,7 @@
         <li><h5>Community</h5></li>
         <li><NuxtLink to="/#events">Events</NuxtLink></li>
         <li><NuxtLink to="/workshop">Workshops</NuxtLink></li>
-        <li><NuxtLink to="/forms">Suggestions</NuxtLink></li>
+        <li><NuxtLink to="/suggest">Suggestions</NuxtLink></li>
       </ul>
       <ul class="social">
         <li><h5>Follow us</h5></li>

components/Header.vue

@@ -1,8 +1,7 @@
 <script setup>
   const { isDesktopOrTablet } = useDevice();
 
-  const user = useDirectusUser();
+  const user = false
-  const { logout } = useDirectusAuth()
 
   /* <NuxtLink to="/" class="logo"><h1>Capital <br/>Region <br/>Bitcoin <br/>Network</h1></NuxtLink> */
   /* <a @click="logout" ><h2>Logout</h2></a> */
@@ -27,7 +26,7 @@
         <NuxtLink to="/login"><h2>Sign in</h2></NuxtLink>
       </div>
       <div class="user" v-if="user">
-        <NuxtLink :to="'/u/' + user.external_identifier"><h2>{{user.first_name}}</h2></NuxtLink>
+        <!-- <NuxtLink :to="'/u/' + user.external_identifier"><h2>{{user.first_name}}</h2></NuxtLink> -->
       </div>
     </div>
   </header>

nuxt.config.ts

@@ -5,15 +5,21 @@ export default defineNuxtConfig({
   modules: [
     '@nuxt/content',
     '@nuxtjs/device',
-    'nuxt-directus',
+    ['nuxt-mail', {
+      message: {
+        to: process.env.EMAIL,
+      },
+      smtp: {
+        host: process.env.SMTP_HOST,
+        port: process.env.SMTP_PORT,
+        auth: {
+          user: process.env.SMTP_USER,
+          pass: process.env.SMTP_PASS,
+        },
+      },
+    }],
   ],
   
-  directus: {
-    url: process.env.DIRECTUS_URL,
-    token: process.env.DIRECTUS_TOKEN,
-    autoFetch: true,
-  },
-  
   css: [
     "~/assets/style/main.scss",
   ],

package.json

@@ -12,16 +12,15 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.7.0",
+    "@nuxt/content": "^2.9.0",
     "@nuxt/devtools": "latest",
-    "@nuxtjs/device": "^3.1.0",
+    "@nuxtjs/device": "^3.1.1",
-    "@types/node": "^18.16.19",
+    "@types/node": "^20.10.0",
-    "nuxt": "^3.6.2",
+    "nuxt": "^3.8.2"
-    "nuxt-directus": "^5.5.0"
   },
   "dependencies": {
     "date-fns": "^2.30.0",
-    "sass": "^1.63.6",
+    "nuxt-mail": "^4.0.2",
-    "vee-validate": "^4.10.8"
+    "sass": "^1.69.5"
   }
 }

pages/login.vue

@@ -8,38 +8,6 @@
       },      
     ],
   })
-
-  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>
@@ -48,21 +16,19 @@
     <h4 class="policy">By continuing, you agree to our <NuxtLink to="/terms">Terms of 
       use</NuxtLink> and <NuxtLink to="/privacy">Privacy policy</NuxtLink>.</h4>
 
-    <Form v-slot="{ errors }" @submit="onSubmit" >
+    <form @submit="onSubmit" >
       <div class="input">
         <label>Email</label>
-        <Field name="email" :rules="required" placeholder="Enter your email" />
+        <input name="email" placeholder="Enter your email" />
-        <ErrorMessage name="email" />
       </div>
 
       <div class="input">
         <label>Password</label>
-        <Field name="password" :rules="required" placeholder="********" type="password" />
+        <input name="password" placeholder="********" type="password" />
-        <ErrorMessage name="password" />
       </div>
 
       <button>Sign in</button>
-    </Form>
+    </form>
 
     <p class="newbie">Don't have an account? <NuxtLink to="/register">Create account</NuxtLink></p>
     <p class="reset">Forgot password? <NuxtLink to="/reset">Reset password</NuxtLink></p>

pages/suggest.vue

@@ -0,0 +1,148 @@
+<script setup>
+  useHead({
+    title: 'Suggestions - Capital Region Bitcoin Network',
+    meta: [
+      { 
+        name: 'description', 
+        content: `Do you have any advice or proposals to improve the meetup, fill 
+          out the form below and we will try to create a better experience.` 
+      },      
+    ],
+  })
+
+  const mail = useMail()
+
+  const info = reactive({
+    name: undefined,
+    message: undefined,
+    poll: undefined,
+    test: undefined,
+    sent: false
+  })
+
+  async function onSubmit () {
+
+    let workshop = ""
+
+    switch (info.poll) {
+      case "node":
+        workshop = "Setting up a full node"
+        break;
+      case "wallets":
+        workshop = "Software/Hardware wallet comparisons"
+        break;
+      case "business":
+        workshop = "Accepting Bitcoin for businesses"
+        break;
+      case "lightning":
+        workshop = "What is the lightning network"
+        break;
+      case "shopping":
+        workshop = "Places to use Bitcoin"
+        break;
+      default:
+        workshop = "undefined";
+    } 
+
+    /*
+    if (info.poll === "node") {
+      workshop = "Setting up a full node"
+    } else if (info.poll === "wallets") {
+      workshop = "Software/Hardware wallet comparisons"
+    } else if (info.poll === "business") {
+      workshop = "Accepting Bitcoin for businesses"
+    } else if (info.poll === "lightning") {
+      workshop = "What is the lightning network"
+    } else if (info.poll === "shopping") {
+      workshop = "Places to use Bitcoin"
+    } else {
+      workshop = "undefined"
+    }
+    */
+    
+    let details = `
+${ info.name } has sent a suggestion.
+
+Next Workshop: ${ workshop }
+
+${ info.message }
+    `
+
+    if (info.test === undefined) {
+      mail.send({
+        from: 'suggest@crbtc.org',
+        subject: info.name + ' - Suggestion for Meetup',
+        text: details,
+      })
+
+      info.sent = true
+    }
+  }
+</script>
+
+<template>
+  <div class="suggest">
+    <h1>Meetup Suggestions</h1>
+    <p>Do you have any advice or proposals to improve the meetup, fill out 
+      the form below and we will try to create a better experience.</p>
+
+    <form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
+      <div class="group">
+        <label for="name">Name</label>
+        <input name="name" v-model="info.name" type="text" placeholder="Your name" required="true" />
+      </div>
+
+      <!--
+      <div class="group">
+        <label for="email">Email <sub>(optional)</sub></label>
+        <input name="email" v-model="info.email" type="email" placeholder="Email address" required="true" />
+      </div>
+      -->
+
+      <div class="group message">
+        <label for="message">Message</label>
+        <textarea name="message" v-model="info.message" placeholder="Suggestion..." ></textarea>
+      </div>
+
+      <div class="group poll">
+        <label>Next Workshop</label>
+
+        <div class="group">
+          <input id="node" value="node" v-model="info.poll" type="radio" checked />
+          <label for="node">Setting up a full node</label>
+          <div class="check"></div>
+        </div>
+
+        <div class="group">
+          <input id="wallets" value="wallets" v-model="info.poll" type="radio" />
+          <label for="wallets" >Software/Hardware wallet comparisons</label>
+          <div class="check"></div>
+        </div>
+
+        <div class="group">
+          <input id="business" value="business" v-model="info.poll" type="radio" />
+          <label for="business">Accepting Bitcoin for businesses</label>
+          <div class="check"></div>
+        </div>
+
+        <div class="group">
+          <input id="lightning" value="lightning" v-model="info.poll" type="radio" />
+          <label for="lightning">What is the lightning network</label>
+          <div class="check"></div>
+        </div>
+
+        <div class="group">
+          <input id="shopping" value="shopping" v-model="info.poll" type="radio" />
+          <label for="shopping">Places to use Bitcoin</label>
+          <div class="check"></div>
+        </div>
+
+      </div>
+
+      <button type="submit" >Submit</button>
+    </form>
+
+    <p v-if="info.sent" class="success">Your suggestion has been submitted. Thank you for supporting the Capital Region Bitcoin Network.</p>
+    
+  </div>
+</template>