DEV Community: Hilton Meyer

Logout User

Hilton Meyer — Mon, 19 Apr 2021 07:15:00 +0000

Code for this can be found in the Github Branch

The final step in wrapping up auth before getting back to the ingredients form is being able to log a user out of the application. Again firebase does the heavy lifting and all we need to do is make sure our state is updated.

Store #

The store needs to be refactored and updated after I noticed a few issues. The first is that the user details can be stored as an Object for easier use in the app called currentUser.

store/auth/authIndex.js

import authActions from './authActions.js';
import authMutations from './authMutations';
import authGetters from './authGetters';

export default {
  namespaced: true,
  state() {
    return {
      currentUser: { id: 0, username: '', email: '' },
      registrationError: false,
      isLoggedIn: false,
      errorMsg: '',
    };
  },
  mutations: authMutations,
  actions: authActions,
  getters: authGetters,
};

Below you can see the use of firebase to sign out the user from the system. The snippet below is without the full code for register and login. Take a look at the repo for full code.

store/auth/authActions.js

import firebase from '@/firebase.js';

const userRef = firebase.firestore().collection('/user');

export default {
  async register({ commit }, user) {
    ...
  },
  async login({ commit }, user) {
    ...
  },
  async logout({ commit }) {
    await firebase.auth().signOut();
    commit('logout');
  },
};

Our mutation now has to update the state of the user being logged out. I also refactor the currentUser data in both the logout and authSuccess.

store/auth/authMutations.js

import router from '@/router';

export default {
  authSuccess(state, user) {
    state.currentUser.id = user.uid;
    state.currentUser.email = user.email;
    state.currentUser.username = user.username;
    state.registrationError = false;
    state.isLoggedIn = true;
    state.errorMsg = '';
    router.push({ name: 'home' });
  },
  authFail(state, error) {
    state.registrationError = true;
    state.isLoggedIn = false;
    state.errorMsg = error.message;
  },
  logout(state) {
    state.isLoggedIn = false;
    state.currentUser.id = null;
    state.currentUser.email = null;
    state.currentUser.username = null;
    router.replace({ name: 'home' });
  },
};

Implement #

With this done we complete the logout functionality and now just need to use the action after clicking the button.

components/ui/TheHeader.vue

<template>
  <img
    alt="App logo"
    src="https://res.cloudinary.com/hiltonmeyer-com/image/upload/v1611488325/pantry/cooking-robot_xdaw7k.png"
  />
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link v-if="isLoggedIn" to="/ingredients"> Ingredients</router-link>
  </div>
  <div id="auth">
    <router-link v-if="!isLoggedIn" to="/login" tag="button">
      <button>Login</button>
    </router-link>
    <router-link v-if="!isLoggedIn" to="/register">
      <button>Register</button>
    </router-link>
    <button v-if="isLoggedIn" @click.prevent="logout">Logout</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters('auth', ['isLoggedIn']),
  },
  methods: {
    ...mapActions('auth', ['logout']),
  },
};
</script>

Login form

Hilton Meyer — Thu, 08 Apr 2021 07:48:00 +0000

Code for this can be found in the Github Branch

This form is pretty much the same as the registration form so could be am interesting to look at using slots and refactoring the form. But as it stands I just want to get the login working so that I can start adding ingredients and at least creating a shopping list which would be the first milestone.

views/Login.vue

<template>
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" v-model="email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" v-model="password" />
  </div>
  <button @click="loginUser">Login</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions('auth', ['login']),
    loginUser() {
      const userData = {
        email: this.email,
        password: this.password,
      };

      this.login(userData);
    },
  },
};
</script>

Header component #

Lets connect that up with some navigation and show when the user is actually logged in. the first thing is to extract the header into a separate component that will make changes easier and keep the main App.vue file cleaner. I created a file in a new directory under components, components/ui/TheHeader.vue. This naming is in line with the style guide of naming components using multiple words and using The for components that will only be used once. Read more about this guideline in the Vue Style Guide

components/ui/TheHeader.vue

<template>
  <img
    alt="App logo"
    src="https://res.cloudinary.com/hiltonmeyer-com/image/upload/v1611488325/pantry/cooking-robot_xdaw7k.png"
  />
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link v-if="isLoggedIn" to="/ingredients"> Ingredients</router-link>
  </div>
  <div id="auth">
    <router-link v-if="!isLoggedIn" to="/login" tag="button">
      <button>Login</button>
    </router-link>
    <router-link v-if="!isLoggedIn" to="/register">
      <button>Register</button>
    </router-link>
    <button v-if="isLoggedIn" @click.prevent="logout">Logout</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('auth', ['isLoggedIn']),
  },
};
</script>

Routing #

To get the router links working and also to show whether the user in logged in I added the login view to the vue router setup and also added another bit of state to vuex as you can see in the below files.

router/index.js

  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
  },

Store #

This takes care of showing the form when the button is clicked for either the register or the login button is pressed. For keen eye's I have already added the logout button although that currently does nothing and we'll handle that in an upcoming article. The next step is to show various links and buttons based on whether the user is logged in or not. I used the mapGetters method of loading the getters of the vuex state which we add as follows.

store/auth/authMutations.js I added isLoggedIn state

store/auth/authMutations.js

import router from '@/router';

export default {
  authSuccess(state, user) {
    console.log(state, user);
    state.email = user.email;
    state.username = user.username;
    state.registrationError = false;
    state.isLoggedIn = true;
    state.errorMsg = '';
    router.push({ path: 'home' });
  },
  authFail(state, error) {
    state.registrationError = true;
    state.isLoggedIn = true;
    state.errorMsg = error.message;
  },
};

store/auth/authIndex.js I added isLoggedIn state and set it to false by default

store/auth/authIndex.js

import authActions from './authActions.js';
import authMutations from './authMutations';
import authGetters from './authGetters';

export default {
  namespaced: true,
  state() {
    return {
      id: 0,
      username: '',
      email: '',
      registrationError: false,
      isLoggedIn: false,
      errorMsg: '',
    };
  },
  mutations: authMutations,
  actions: authActions,
  getters: authGetters,
};

store/auth/authGetters.js returns the isLoggedIn state

store/auth/authGetters.js

export default {
  isLoggedIn(state) {
    return state.isLoggedIn;
  },
};

Using the new component #

With this new state in place and the component extracted this leaves the App.vue file needing to import and use the component

App.vue

<template>
  <the-header />
  <router-view />
</template>

<script>
import TheHeader from '@/components/ui/TheHeader.vue';
export default {
  components: {
    TheHeader,
  },
};
</script>

<style>
:root {
  --clr-neutral-500: #2c3e50;

  --clr-accent-500: #00b8f0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--clr-neutral-500);
}

img {
  display: block;
  margin: 0 auto;
}

#nav {
  padding: 30px;
  text-align: center;
}

#nav a {
  font-weight: bold;
  color: var(--clr-neutral-500);
}

#nav a.router-link-exact-active {
  color: var(--clr-accent-500);
}
</style>

With that the auth is almost complete. The next step will be to add a logout functionality.

Login user using firebase

Hilton Meyer — Thu, 01 Apr 2021 10:10:00 +0000

Code for this can be found in the Github Branch

In the vuex auth store all that needs to be done is add the login functionality. The great thing about using actions for asynchronous functions and let the mutations handle the state changes is as you can see in this case the mutation is the same whether the user registered or logged in for both success or failure. So firebase does all the heavy lifting of handling the auth which is a world unto its own and we just manage the state using Vuex. The application will then reflect the current state.

import firebase from '@/firebase.js';

const userRef = firebase.firestore().collection('/user');

export default {
  async register({ commit }, user) {
    try {
      // Register user
      const registered = await firebase
        .auth()
        .createUserWithEmailAndPassword(user.email, user.password);
      console.log(registered);

      // Create userdata
      const userData = {
        id: registered.user.uid,
        username: user.username,
        email: user.email,
      };

      // Save user to DB
      const createUser = await userRef.add(userData);
      commit('authSuccess', createUser);
    } catch (err) {
      commit('authFail', err);
    }
  },
  async login({ commit }, user) {
    try {
      const loggedIn = await firebase
        .auth()
        .signInWithEmailAndPassword(user.email, user.password);
      console.log(loggedIn);

      const userData = {
        id: loggedIn.user.uid,
        username: user.username,
        email: user.email,
      };

      commit('authSuccess', userData);
    } catch (err) {
      commit('authFail', err);
    }
  },
};

The next step will be to add a login form similar to the registration form and then start creating checks on the routing.

Sticky Headings

Hilton Meyer — Sun, 21 Mar 2021 11:40:00 +0000

Came across a great article showing how to create a sticky heading. Really simple and love little additions like this that don't require a ton of changes and can be added as some sparkles to tweak the site. Probably not useful in every site but I must say that they are in something like a blog where you're creating content or tutorials and have the heading still showing.

/* Create stick headings */
h1,
h2,
h3,
h4 {
  letter-spacing: -1px;
  position: sticky;
  top: 0;
  background: var(--background);
  padding: 0.5em 0;
}

Register form

Hilton Meyer — Sun, 21 Mar 2021 06:34:00 +0000

Code for this can be found in the Github Branch

This is a continuation from the registration functionality that I setup up in Vuex. This post will now create a simple form for registering the user in firebase using that function.

src/views/Register.vue

<template>
  <div>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" v-model="username" />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" v-model="email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" v-model="password" />
  </div>
  <button @click="registerUser">Register</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions('auth', ['register']),
    registerUser() {
      const userData = {
        username: this.username,
        email: this.email,
        password: this.password,
      };

      this.register(userData);
    },
  },
};
</script>

Other than the standard Vue features I'm using there is a cool little use of the spread operator and one of Vuex's best features. Instead of having to have to try and traverse the context and state I use mapActions. This is then added to the methods and I can use is as a normal method in the file. Pretty cool. This will register the user and on success re-direct the user back to the homepage.

Register user to firebase

Hilton Meyer — Fri, 12 Mar 2021 13:00:00 +0000

Code for this can be found in the Github Branch

Organise Firebase #

After previously setting up firebase and vuex I want to organise things a bit better and then add login and registration of users. So first I extract the firebase setup to a separate file, this enables me to use it in other parts of the app and then to also import this into main and use it in the app.

firebase.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'AIzaSyDbYPvxMaECPwjgR06njRfTLFa_skZ9-Qo',
  authDomain: 'pantry-fe77c.firebaseapp.com',
  databaseURL: 'https://pantry-fe77c-default-rtdb.firebaseio.com',
  projectId: 'pantry-fe77c',
  storageBucket: 'pantry-fe77c.appspot.com',
  messagingSenderId: '235929136377',
  appId: '1:235929136377:web:f4687227f50dc7bd76c628',
  measurementId: 'G-7J6VBCW3SE',
};

firebase.initializeApp(firebaseConfig);

export default firebaseConfig;

You'll notice that I also added the auth package to the import so that we can use this feature too as well as the firestore so that we can save data later. I like to also setup and user table when registering so that in the future settings on the user can be saved there.

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import firebase from './firebase.js';

let app;

firebase.authDomain().onAuthStateChanged(() => {
  if (!app) {
    app = createApp(App);

    app.use(firebase);
    app.use(store);
    app.use(router);

    app.mount('#app');
  }
});

The main.js file is cleaned up and I import the firebase settings.

Register Action and Mutation #

Let's setup the registration option now and then connect it to a register form. First thing is to add state to the module of the extra user information that we want to save for now.

authIndex.js

import authActions from './authActions.js';
import authMutations from './authMutations';
import authGetters from './authGetters';

export default {
  namespaced: true,
  state() {
    return {
      id: 0,
      username: '',
      email: '',
      registrationError: false,
      errorMsg: '',
    };
  },
  mutations: authMutations,
  actions: authActions,
  getters: authGetters,
};

Now for the action that does the asynchronous calls before passing on the data to the mutation that does the work to save the state. This separation of concerns help to keep state valid and consistent.

authActions.js

import firebase from '@/firebase.js';

const userRef = firebase.firestore().collection('/user');

export default {
  async register({ commit }, user) {
    try {
      // Register user using email and password
      const registered = await firebase
        .auth()
        .createUserWithEmailAndPassword(user.email, user.password);
      console.log(registered);

      // Create userdata
      const userData = {
        id: registered.user.uid,
        username: user.username,
        email: user.email,
      };

      // Save user to DB
      const createUser = await userRef.add(userData);
      commit('authSuccess', createUser);
    } catch (err) {
        commit('authFail', err);
    }
  },
};

This user is first created using firebase auth so that we can get the user token for future validation. The next step is to then take that user and save it with the extra data. Once done we can send the data to the mutation using commit or if there is an error we again send the error along to the mutation for later showing the error.

authMutations.js

import router from '@/router';

export default {
  authSuccess(state, user) {
    console.log(state, user);
    state.email = user.email;
    state.username = user.username;
    state.registrationError = false;
    state.errorMsg = '';
    router.push({ path: 'home' });
  },
  authFail(state, error) {
    state.registrationError = true;
    state.errorMsg = error.message;
  },
};

With that we have the registration functionality setup. In the next post I'll create a registration form and hook that up to the vuex store.

Add Vuex

Hilton Meyer — Fri, 05 Mar 2021 10:19:00 +0000

Code for this can be found in the Github Branch

This is a short one but will lay the foundation for saving ingredients, recipes and any other state of the app.

vue add vuex

Once the package has been installed you should see a new folder called store under src. In main.js the file will also be imported and used by the App. I like to break my modules up in separate folders that hold each store and I name space them but more of this shortly. In the store directory I create a new folder called auth. Within this folder I have 4 files

authIndex.js
authActions.js
authMutation.js
authGetters.js

This is probably huge overkill for now but later on and as the project grows it just makes it easier to handle. For now the only files I'll flesh out in authIndex.js

import authActions from './authActions.js';
import authMutations from './authMutations';
import authGetters from './authGetters';

export default {
  namespaced: true,
  state: {},
  mutations: {
    authMutations,
  },
  actions: {
    authActions,
  },
  getters: {
    authGetters,
  },
};

And then import the module into the store/index.js

import { createStore } from 'vuex';

import authModule from './auth/authIndex';

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: { auth: authModule },
});

The skeleton of the store is ready for handling the next thing to tackle which is login and registration of a user. That way we can manage the router paths of what users can do while logged in and also what they can only read when not.

Setup Firebase

Hilton Meyer — Mon, 01 Mar 2021 04:30:00 +0000

Code for this can be found in the Github Branch

There is a bit of a chicken or the egg situation now. I guess I could start with getting my state managed in Vuex setup first although I prefer to get the DB setup so that I can use it. I'm going for Firebase to give me a quick solution for setting up a database and also later adding auth in one place. So let's go ahead and install and initialize firebase

Setup #

The first thing is going over to Firebase console and setting up a new project. Once done you want to add the new application that you want to give access to your Firebase project. Select Project Overview and then select +Add app and select web app

After that you give the application a name and it will create the app and provide the SDK config required when initializing the app. Save that data and we'll add it to the main.js file soon to get things up and running with Firebase initialized.

Installing Firebase SDK with NPM is done as follows

npm install firebase

Once installed in my main file I will initialize Firebase using the config file created for this app.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import firebase from 'firebase/app';

// Initialize Firebase
const firebaseConfig = {
  apiKey: 'AIzaSyDbYPvxMaECPwjgR06njRfTLFa_skZ9-Qo',
  authDomain: 'pantry-fe77c.firebaseapp.com',
  databaseURL: 'https://pantry-fe77c-default-rtdb.firebaseio.com',
  projectId: 'pantry-fe77c',
  storageBucket: 'pantry-fe77c.appspot.com',
  messagingSenderId: '235929136377',
  appId: '1:235929136377:web:23a498fc887466ce76c628',
  measurementId: 'G-S4ER2JYTKZ',
};
firebase.initializeApp(firebaseConfig);

createApp(App)
  .use(router)
  .mount('#app');

With this we can now use firebase in the application. So let's add a method for getting and posting the ingredients to the DB

Creating components

Hilton Meyer — Fri, 19 Feb 2021 12:10:00 +0000

Code for this can be found in the Github Branch

Things are going to start increasing in size and one of the cool things about Vue is using components. So the first thing I want to do is create a directory in src called components/ingredient, this will be where I add all my ingredient related components. This is just the way that I've decided to go but you could have something else or a different layout. Again I'm learning as I go along here and trying to share that with you as I pick up new things or better ways of doing things. If all goes according to plan I would come back and update these files not with the correct way but rather a link to the new way of doing it. I still want others to see the process which I find sometimes missing in these polished tutorials.

mkdir src/components/ingredient
touch src/components/ingredient/AddIngredient.vue

With this done I create a file called AddIngredient.vue and add what we previously did setting up the ingredient view cut that all out and paste it into the new file.

AddIngredient.vue

<template>
  <div class="ingredient">
    <div class="add-ingredient-frm">
      <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="category">Category:</label>
        <select id="category" name="category">
          <option value="legumes">Legumes</option>
          <option value="vegetables">Vegetables</option>
          <option value="fruit">Fruit</option>
          <option value="dairy">Dairy</option>
        </select>
      </div>
      <div>
        <label for="uom">Unit of Measure:</label>
        <input type="text" name="uom" id="uom" />
      </div>
      <div><button>Add</button></div>
    </div>
    <ul>
      <li>Milk</li>
      <li>Whole wheat flour</li>
      <li>Olive Oil</li>
    </ul>
  </div>
</template>

In Ingredients.vue in the views directory we import the newly created component and add it to the view we're using. This will get us back to where we were in the begining but with the added benefit of having broken up the code a bit and starting to use components.

Ingredients.vue

<template>
  <add-ingredient></add-ingredient>
</template>

<script>
import AddIngredient from '@/components/ingredient/AddIngredient.vue';

export default {
  components: { AddIngredient },
};
</script>

<style></style>

Customize Bullet Style

Hilton Meyer — Thu, 18 Feb 2021 08:41:00 +0000

A quick way to customize a bullet style instead of having to use :before and content or twisting yourself in knot's.

li::marker {
  font-size: 150%;
  font-weight: bold;
  color: lightgreen;
}

li::marker {
  font-size: 0.7em;
  color: fuchsia;
}

Setup ingredients

Hilton Meyer — Wed, 17 Feb 2021 06:36:00 +0000

Code for this can be found in the Github Branch

Change About #

In order to add ingredients we'll need a form, I'm thinking that with this form I should be able to setup a shopping list as a first milestone for the project. There is an about page that I'm not really sure that I'll be using so instead of deleting it I'll re-purpose it for the form to add ingredients and show the current list of ingredients.

App.vue #

In App.vue I change the router-link from

<router-link to="/about">About</router-link>

<router-link to="/ingredients">Ingredients</router-link>

Router #

Next thing is setting the router so again I change the router/index.js from

{
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}

{
    path: '/ingredients',
    name: 'Ingredients',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Ingredients.vue')
}

Ingredient Form #

For now I just want the layout of the form for being able to show a list of ingredients and the ability to add ingredients that are missing.

<template>
  <div class="ingredient">
    <div class="add-ingredient-frm">
      <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="category">Category:</label>
        <select id="category" name="category">
          <option value="legumes">Legumes</option>
          <option value="vegetables">Vegetables</option>
          <option value="fruit">Fruit</option>
          <option value="dairy">Dairy</option>
        </select>
      </div>
      <div>
        <label for="uom">Unit of Measure:</label>
        <input type="text" name="uom" id="uom" />
      </div>
      <div><button>Add</button></div>
    </div>
    <ul>
      <li>Milk</li>
      <li>Whole wheat flour</li>
      <li>Olive Oil</li>
    </ul>
  </div>
</template>

Next steps #

The next thing that I want to do is be able to add an ingredient and save it to a database and the other would be to show those ingredients on the list. After that a search feature would be cool and then being able to add the ingredients to a shopping list which will already have the first milestone and allow me to start using the app for my weekly shopping.

CSS Reset

Hilton Meyer — Wed, 17 Feb 2021 06:30:00 +0000

After doing a the CSS Demystified CSS course of Kevin Powel I left with a much better understanding of CSS although far from where I want to be and coming from a development side of thigs my design chops need some serious work. At the moment I love Tailwind although more and more lately WaterCSS drop in stylesheet. But for me to start working and learning I'll have to start working on CSS and not depending on others. The base is where everything starts off with so I will use this as a page that I will come back to as I build out my CSS reset for projects.

:root {
  --ff-sans: 'IBM Plex Sans', sans-serif;
  --ff-serif: 'IBM Plex Serif', serif;

  /* small screen font-sizes */
  --fs-200: 0.75rem;
  --fs-300: 1rem;
  --fs-400: 1.25rem;
  --fs-500: 1.375rem;
  --fs-600: 1.75rem;
  --fs-900: 2.125rem;

  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-700: 700;

  --clr-neutral-100: #fff;
  --clr-neutral-200: #eef1f6;
  --clr-neutral-300: #a9afbc;
  --clr-neutral-400: #737b8c;
  --clr-neutral-500: #434956;
  --clr-neutral-900: #020203;

  --clr-primary-300: #f3f7ff;
  --clr-primary-400: #8ea8da;

  --br: 1rem;

  --lh-heading: 1rem;
  --lh-text: 1.5rem;
}

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  line-height: var(--lh-heading);
}

* {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout */

body {
  padding: 1rem;
  line-height: var(--lh-text);
}