# 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"
    >
```

## Change default font colour

In `_variables.scss` create a variable with the colour you want:

```scss
$mainColor: #323947;
```

Then create a new class `fontColor` to apply to the router, and edit the default `theme--light` class for Vuetify to apply this colour:

```scss
.theme--light.v-application,
.fontColor,
.theme--light.v-sheet {
  color: $mainColor !important;
  // color: red !important;
}
```

Then in `App.vue` apply the `fontColor` class to the `<v-app>`:

```html
    <v-app
      :style="{ background: $vuetify.theme.themes.light.background }"
      class="fontColor"
    >
```

## Grids

<https://vuetifyjs.com/en/components/grids/#row-and-column-breakpoints>

In addition to using the flex classes you can use the grid system. The grid system allows you to create rows and columns and use props to control how the content should be displayed.

This playground demonstrates what `align` and `justify` can do:
<https://vuetifyjs.com/en/components/grids/#playground>

The grid system applies to `<v-row>` and you can use the following props:

- `align` controls the y-axis. You have `start`, `center`, `end`, `baseline` and `stretch`.
- `justify` controls the x-axis. You have `start`, `center`, `end`, `space-around` and `space-between`.

For `<v-col>` only `align-self` is available. To align content on a column, or any other element like a card, you should use the same classes as in the flex system. For example:

```html
<v-col cols="5" align-self="start" class="d-flex justify-end pr-0">
```

## Container filling whole page

A container should be used whenever you want to use `<v-col>` and `<v-row>`. To make this container fill the whole page (and be able to use `align` props and flex classes) you should specify the following two props:

- `fill-height`
- `fluid`.

## Helper classes

### Spacing

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

You can use classes like `ma-2` and `pd-3` to control margin/padding in directions for any component.

See the playground for a quick demonstration on what each one does:

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

## Typography

There are quite a few helper classes available to control font sizes and styles.

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

There are two types of styles: Typography Display Classes and Style and Weight Classes.

Examples include `.display-2` and `.font-weight-black`.

### Replace Vuetify default font with own

Fonts needed to replace the Roboto default:

- Thin
- Regular
- Medium
- Light
- Condensed Light (Light)
- Bold
- Black
- italic
- Light italic
- Medium italic
- Bold italic

If font styles dont exist then substitute them with the closest type.