web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-03-23 02:38:32 +00:00
parent 77bf8f3826
commit 77be707311
5 changed files with 224 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
firebase.md Normal file
View File

@@ -0,0 +1,167 @@
# 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.
To do

7
src/App.vue
View File

@@ -1,13 +1,8 @@
<template>
<v-app>
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
<v-content>
<Appbar></Appbar>
<router-view></router-view>
<v-container>
<v-row>
Test
</v-row>
</v-container>
</v-content>
</v-app>
</template>

62
src/components/Appbar.vue
View File

@@ -1,29 +1,59 @@
<template>
<v-container>
<v-app-bar flat color="indigo" app class="mb-6">
<!-- <template v-slot:img="{ props }">
<v-img bind="props"></v-img>
</template> -->
<!-- <v-container class="pb-0"> -->
<div>
<v-app-bar flat color="indigo" app class="hidden-md-and-up">
<v-row>
<v-col>
<v-toolbar-title class="appTitle" d-flex justify-space-around mb-6>
Savvy Firebase tutorial
<v-col cols="8" class="appTitle d-flex justify-start">
<v-toolbar-title>
Savvy Firebase
</v-toolbar-title>
</v-col>
<v-spacer> </v-spacer>
<v-col cols="2">
<v-col cols="4" class="d-flex justify-end">
<v-btn color="primary">
Sign In
</v-btn>
</v-col>
<!-- <v-btn icon="">
<v-icon>
mdi-home
</v-icon>
</v-btn> -->
<!-- <v-col>
<v-btn color="primary">
Register
</v-btn>
</v-col> -->
</v-row>
</v-app-bar>
</v-container>
<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>
<v-row>
<v-col cols="2"></v-col>
<v-col cols="4" class="appTitle d-flex justify-start">
<v-toolbar-title>
Savvy Firebase Tutorial
</v-toolbar-title>
</v-col>
<v-col>
<v-spacer> </v-spacer>
</v-col>
<v-col cols="2">
<v-btn color="primary" class="mr-2">
Sign In
</v-btn>
<v-btn color="primary">
Register
</v-btn>
</v-col>
</v-row>
</v-app-bar>
<!-- </v-container> -->
</div>
</template>
<script>

7
src/plugins/vuetify.js
View File

@@ -7,5 +7,12 @@ Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "mdi"
},
theme: {
themes: {
light: {
background: "#EEEEEE"
}
}
}
});

4
src/views/Home.vue
View File

@@ -1,7 +1,9 @@
<template>
<v-container>
<v-row>
Hello
<v-col>
Hello
</v-col>
</v-row>
</v-container>
</template>