savvy-firebase/firebase.md

# Firebase

API documentation (JS): <https://firebase.google.com/docs/reference/js>
Guides documentation: <https://firebase.google.com/docs/guides>

Handling errors

List of errors: <https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createuserwithemailandpassword>

You can catch the error and use if/else to capture the specific error.

```javascript
firebase.auth().createUserWithEmailAndPassword(email, password)
    .catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  if (errorCode == 'auth/weak-password') {
    alert('The password is too weak.');
  } else {
    alert(errorMessage);
  }
  console.log(error);
});
```

Firebase User object:
<https://firebase.google.com/docs/reference/js/firebase.User>

All properties that it takes/available listed above

## Create new User

Use `firebase.auth().createUserWithEmailAndPassword(email, password)` to create a new user.

Only an email address and password is needed to create a new account. The user itself has a few additional attributes you can attach to it - the `displayName` and the `photoURL` among a few others. You can see all of them in the properties of the user object:
`https://firebase.google.com/docs/reference/js/firebase.User#properties`

Any additional information you want to store alongside the user should use a firestore. You should have a collecton for users, then each document should be named after the `User.uid` and contain the additional data you want to store.

## Update password/email

The instructions to update a password/email:
<https://firebase.google.com/docs/auth/web/manage-users#re-authenticate_a_user>
mention using `reauthenticateWithCredential`. This is only needed if using a 3rd party auth method which returns this credential object. If using native firebase logins then simply forcing the user to resign in is sufficient.

## Adding material icons to Vuetify project

`yarn add @mdi/font -D`


## Controlling layouts

### Spacing

<https://vuetifyjs.com/en/styles/spacing/>

You can use helper classes to apply custom margins/padding to elements.

You can apply padding to left: `class="pl-3"`.
Or apply margin to all: `class="ma-4"`.

You can use this to center objects without using flex:
`class="mx-auto"`.

### Display helpers

The display helpers allow you to control the dispaly of content. These can be used to hide/show elements based on the current viewport, or the actual display element type.

<https://vuetifyjs.com/en/styles/display/>

### Hide/Display elements for different widths

You can hide specific viewport sizes with:
<https://vuetifyjs.com/en/styles/display/#visibility>

`d-flex` by default without any size will apply to `xs` and above.

You can make things visible only on one viewport with:
`class="d-none d-lg-flex d-xl-none"`

You can make things hide only on one viewport with:
`class="d-lg-none d-xl-flex"`

You can hide multiple by using combinations of the above, or, use the following lateral display helper classes:
`class="hidden-md-and-up"` and `class="hidden-sm-and-down"`

### flex

Using flex will make the object fill the entire viewport, rather than adhering to the margins/widths by default. There is a lot more to flex - you can make things align left/right, vertical alignment and more:
<https://vuetifyjs.com/en/styles/flex/#flex>

### cols

In a `<v-row>` you can have many `<v-col>`. You can have as many of these and use the `cols` prop to control how wide the content should be.

```html
<v-col cols="4" class="appTitle d-flex justify-start">
    <v-toolbar-title>
    Savvy Firebase tutorial
    </v-toolbar-title>
</v-col>
```

You can combine this with `d-flex` and justify to control the positioning and alignment:

<https://vuetifyjs.com/en/styles/flex/#flex-justify>

Justify classes include:

- `justify-start`
- `justify-end`
- `justify-center`
- `justify-space-between`
- `justify-space-around`

Using `cols`, `d-flex` and `justify` you can control precisely how things should be laid out for different screen sizes.

- Use `<v-col>`, use the prop `cols=""` to control how wide it should be.
- Use `<v-spacer>`, to dynamically fill space.
- Use `class="d-flex"` and the justify classes.
- Use `class="d-none d-xl-flex"` to control layouts for different sizes.
- Use `class="hidden-md-and-up"` to quickly control layouts for different sizes.

### Dual layouts

You can have the same html element for different sizes.

The layout you want for the screen you want to break on should **not** include it.

For example, to break on the medium viewport and have the second layout apply to it:

```html
<v-app-bar flat color="indigo" app class="hidden-md-and-up"></v-app-bar>
<v-app-bar flat color="indigo" app class="hidden-sm-and-down"></v-app-bar>
```

Here the second layout does not include the medium layout, hence the medium layout will apply to it.


## App bar

### Gradient as a background colour

The background image to the app bar is provided with a `src` prop.

If you want to apply a fade gradient colour on top of the image, you should use a scoped slot:

```html
<v-app-bar
    flat
    app
    class="hidden-sm-and-down"
    src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
>
    <template v-slot:img="{props}">
    <v-img
        v-bind="props"
        gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
    ></v-img>
    </template>
```

If you want to just use a gradient (no img), then apply a solid colour image and then use a scoped slot with the gradient you want.

## Router

When linking to routes, you should use `<router-link>`:

```html
<router-link :to="{ name: 'Login' }">
    <span class="mr-3">Sign In</span>
</router-link>
```

You can apply transitions on a route change:

```html
<transition name="slide">
    <router-view></router-view>
</transition>
```

## vue-responsive-video-background-player

<https://github.com/avidofood/vue-responsive-video-background-player>

yarn add vue-responsive-video-background-player

ffmpeg -an -i Optical\ Fibers\ 1.mov -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 optical.mp4

<https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation>

If using the public folder (not `./assets`) then follow these instructions:
<https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder>

For videos in ./assets do the following:

```javascript
export default {
  data() {
    return {
      video: require("../assets/videos/optical.mp4")
    }
  },
};
```

and reference it in the component:

```html
<video-background :src="video" style=" height: 100vh;"> </video-background>
```

This is done this way because webpack will apply custom names to the assets - this is so it can handle caching.

You can find full props to customise the video:
<https://github.com/avidofood/vue-responsive-video-background-player#props>

You can set a gradient to the image to improve visibility:

```javascript
    style=" height: 100vh;"
    overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
```

## Dynamically hide app bar

Use the Vuex store to determine when you want to hide the app bar:

```javascript
  state: {
    fullScreen: false
  },
  getters: {
    fullScreen: state => {
      return state.fullScreen
    }
  },
  mutations: {
    fullScreen(state, fullScreen) {
      state.fullScreen = fullScreen;
    }
  },
  ```

and create the lifecycle actions in the component that houses the appbar:

```javascript
  created () {
    this.$store.commit("fullScreen", true);
  },
  beforeDestroy () {
    this.$store.commit("fullScreen", false);
  },
```

Then you can wrap the appbar in a `v-if`:

```html
    <v-app-bar
      flat
      app
      class="hidden-sm-and-down"
      color="#EEEEEE"
      v-if="!this.$store.getters.fullScreen"
    >
```