Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen

Key Takeaways

so the first step in creating this application is to create our welcome screen component and this welcome screen is going to be a simple form which asks the user for their name the enter their name press Enter that will take them to the chat component and when they add a new chat the chat component is going to know their name because of this welcome screen so first of all you'll notice I've already run NPM a run dev down here which is why we have this local development server running listening to port 8 zero eight zero so now if we go to this address we can see the dummy application here in the browser cool the next thing I'd like to do is to install materialize CSS like we did in the last chapter so we don't have to get bogged down with all of our own CSS so I've gone to materialise CSS comm forward slash getting - starting dot HTML and I'm gonna copy the mini 5 CSS library right here just the top one we don't need the JavaScript and I'll paste this inside our index dot HTML file right here just underneath this meta tag now we also want Google icons so let's scroll down here until we see HTML setup then we want to grab this thing right here Google icon fonts so if we copy that and also paste that inside index dot HTML just above materialised CSS so if we save that now now we can use these different utility classes and icons inside our project cool ok then so now let's start to create this component I'm going to cross off the terminal it was still running the background and inside components instead of hello world we'll rename this to welcome so welcome like so now we've renamed that component we're going to see this big error over here and that's because the router file is looking for the hello world dot view component and we've just renamed that so it doesn't exist anymore so let's update our router file as well so if I just right click on hello world and go to change all occurrences I'll change this to welcome instead so one two three four now we're loading in the welcome screen or the Welcome component when a user goes to just /so if we save this we should now see the Welcome component which is still this thing right here but if we go to the Welcome component now we can get rid of all of this dummy HTML we don't need that anymore get rid of that we also don't need this data message and we can rename this to welcome and finally let's get rid of this CSS down here I also don't want to use the scoped keyword right there either okay so now we have this basic component for our welcome screen the first thing we'll do is change this class right here to welcome and we'll also add a class of container which is that utility class from materialise which brings everything into a central column now the next thing we'll do is a div with a class of card that is going to make a little card on this screen which is where we'll place our form so inside this card we want some card content so again another div with a class of card - content this time and we'll also give this another class called sensor aligned so that's going to align everything inside this to the center all right then so inside this div what would we like to output well we'd like an h2 saying welcome or something like that and also a form so let's do the h2 first of all I'll give this a class of teal text which is kind of like a bluey green and then inside that we'll say welcome underneath the h2 we'll do a form and we don't need an action but what we will do is attach an event to this a submit event so we'll say at submit we want to prevent the default action which will refresh the page so we'll say dot prevent to do that set that equal to some function we'll call this function enter chats now we've not created that function yet we'll do it after we've done our template so inside the forum now first of all we want a label and this label is going to be for the name so we'll say enter your name like so and then underneath that we need an input field which will be of type next the name of this input field is going to be named and the v-model is going to be equal to name so when a user types into this input field we want to sync it with a name property over here on our object so let's add a name property down there and to begin with we'll set it to null when they first land on the screen but as a user types into this field it's going to update over here as well okay finally we need a button for user to click to enter the chat to submit this form this button will have a class equal to beat yet I'll see you til atte class from aterial eyes and also teal to give it that same color as this thing over here by the way whenever we say teal text that does the text color whenever we just do teal or the color itself that does the background color okay that's the difference between these two teal text and teal okay so we want to say enter chat in here so now when a user is entering in a name into this input field we're storing it right here when they click on this button it's gonna fire this thing over here and to chat prevent the default action but we need to create this enter chat method to grab the name that that user has entered so underneath data over here let's create that method we do it in the methods property which is an object and inside this is going to be called enter chat this method okay so in here what do we want to do well eventually we want to take them to the chat screen the chat component so redirect them and we also want to pass through the name that they've entered right here which will be stored on this object but for now all we'll do is console dot log the name that they've entered into that field so console dot log and we'll say this dot name okay so if we save this now and go to the browser we should see this welcome screen now there's a couple of things I want to do first of all I want to take off this logo and I also want to neaten this chat welcome screen up a little bit as well so first of all let's go to the component because that's where the logo is up top view and we can delete that racket while we're in it let's get rid of all this style as well we don't need that okay save that and we should see the logo disappear cool now we just want to make this look a bit neater as well so then let's go down to our style tags inside the Welcome component down here and just add in a couple of rules first of all we'll get the Welcome div which is a class of welcome this thing at the very top and what we'd like to do for this div is give it a max width first of all or 400 pixels because I did think it was a little bit wide on the screen so I'm max with a 400 pixels now we're also going to push it down from the top of the window by saying margin top is 100 pixels will also target the h2 inside here because I think we just need to address the text size so whoops let's just zoom that down again we'll say welcome h2 and then inside here we'll give this a font size of 3mm let's save that and see how it looks so far okay looking a bit better but I'd like to add a little margin between the bottom here and the input field so finally it will just say welcome button and then inside here margin is going to be 30 pixels top and bottom also left and right okay so save that and this looks a lot better now so let's just make sure it works we'll inspect the element so we can go to the console over here and play this and if we type in a name now and press Enter we should see that logged to the console which we do cool Mariam so now we have this welcome screen the next step is to grab this name right here redirect the user to a chat component with that name so we'll address that in the next video