diff --git a/firebase.md b/firebase.md new file mode 100644 index 0000000..448b186 --- /dev/null +++ b/firebase.md @@ -0,0 +1,167 @@ +# Firebase + +API documentation (JS): +Guides documentation: + +Handling errors + +List of errors: + +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: + + +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: + +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 + + + +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. + + + +### Hide/Display elements for different widths + +You can hide specific viewport sizes with: + + +`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: + + +### cols + +In a `` you can have many ``. You can have as many of these and use the `cols` prop to control how wide the content should be. + +```html + + + Savvy Firebase tutorial + + +``` + +You can combine this with `d-flex` and justify to control the positioning and alignment: + + + +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 ``, use the prop `cols=""` to control how wide it should be. +- Use ``, 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 + + +``` + +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 + + +``` + +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 diff --git a/src/App.vue b/src/App.vue index 7fbaa0e..45ec150 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,8 @@ diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue index 1e1c283..472c334 100644 --- a/src/components/Appbar.vue +++ b/src/components/Appbar.vue @@ -1,29 +1,59 @@