Join me live as I begin rebuilding Jagr.Co with AdonisJS. In this livestream we create a new project, install and configure the Lucid and Auth packages. Define our migrations and model schema. And hammer down basic authentication. We also add TailwindCSS to our project using Webpack Encore.
Transcript
Looking for something specific? Feel free to search the page for keywords to find a specific portion of the live stream that interests you most.
okay so um yeah so i thought i'd just uh live stream some actual building stuff
so i thought as a beginner point i'd start rebuilding uh yeager.co
where all of my lessons live so here i did a bad job i didn't resize
that to the screen properly do that real quick
okay there we go um so essentially it's got a home page with all of the posts and stuff listed
on it then you go into a post and there's two different versions so
there's the post not in a series which would be like this one where the video gets more screen real estate
and then there is the version where it is within a series where then the series bar is over on the
right hand side and the video gets smaller um then there's a whole back end side to it
as well so here if i log in really quick
so you get the whole crud side as well where all of the posts are managed all of the series are managed topics
uh comments so all that fun stuff let me turn my
pc's sound off
so so yeah i thought it'd uh be a good starting point to just start
building this back out i it this current site is built in adonis
but i used it as my adonis playground so it's got kind of a messy code base
where i was just trying different stuff out so it could use a good rebuild um so i'm going to go ahead and
node npm and net adonis ts app at latest
jager dot co do the web version
all right give that a second to install all of the dependencies
this is the first time i'm installing an adonis apple creating an adonis application on this pc so it might take
a little bit longer than usual as well
okay there we go
let's go ahead and get that opened up
all right and so i'm going to go ahead and install all of the things that i know i need at
least out of the bat uh so we'll do mpmi js
off wait a minute oh lucid first npm i at adonis js
lucid there we go
node ace configure adonis
js lucid so the current code base is on my sql i'm going to be transitioning over
to postgres so i will copy the postgres
variable definitions and go into my env.ts and paste that in um anytime i'm adding
an additional module i kind of like to separate them by so these are the defaults and then i'll give them a separation by space and then
i'll do like the auth and then i'll do drive and all that fun stuff so i'll separate them out
using a space so that they're a little bit easier to group that way all right so that should be good um
let's go ahead and do off next so npm i don't js off
okay configure
js off i will use lucid i will use web
model name will be user yes please create the migration for that
okay so now we should have database migration users and we should have app
models user as well
all right so next i guess let's go ahead and start
hammering out all of the fun models and migrations
um let's see
don't quite remember off the top of my head what the schema is for it so i will go into the current code base and take a
look at least as a starting point
so let's see we got roles users posts topics assets
all that fun stuff so let's just start hammering some of this stuff out
so let's do node ace
make migration or no make model
there we go did it in the wrong order node ace make
model see we already have users so we'll do post next
on a model and a controller for that one
and then we'll do topic do a model and controller for that one as well
then we got the post topic tables so let's do just a migration for that one
post topics now that is the table that should work
okay nowadays make model
asset do a model on the migration or yeah i don't wanna control her for that
and then we got post authors profiles appearances i don't know if i'm
gonna do appearances and all that stuff uh let's see node ace
model
let's just do a migration for the post authors
all right i'll skip over appearances for right now um and then we got post histories so i track history changes on
that on post changes so we'll do that as well i suppose
and that one just needs to be a miguel let's do a model for that one too
post history we don't need a controller for it
since that'll save along with any post saves as well so we'll just do a model and a migration for that one
then we got series so maybe right here is a good spot to stop we have posts we have users
and we'll just start rigging those up instead of hammering through all of them
so we should have asset post post history profile role topic user
all right so i actually want roles to be created
first so i'm going to rename that and tell you what i'll just copy the user's
timestamp and offset it by negative one
because i'm gonna have a role id on my user and i'm going to have a
foreign key attaching them so the rules table will want to be created first so the role will just be i think if i
remember correctly um that is just a name
oh i gave it a description too okay we'll follow suit with that
so table string name 50
table okay so that one should be good and then
users in addition to all of this stuff we will also do i like to do my form key
assignments first so we'll do table dot integer role id unsigned
not nullable let's see that references
id in table rows i don't want the cascade
and we'll make that not nullable and then we'll also default to one for
that see posts
well anything else for the user i guess
username and then i also put deleted on deleted that on there as well so
okay just do username for right now
okay so users should be good roles should be good let's move on to posts next
all right i am just going to copy all of this
everything except for the deleted ad and let's just paste that in there
uh did i copy created that and updated that no okay
so give that a save okay topics
i believe yeah let me just copy that as well
uh i don't know if i want a user id on it this time we'll leave it there it won't hurt
anything
all right and then we have our create post topics table which binds our post to a topic
so that looks correct still i don't want to change anything there so i will keep these columns as well
um let's actually put foreign keys on them so unsigned
references id in table posts
and dot references id in table
topics okay so that should be good for that one and
then we have the assets um you might be able to stop
there for right well then we get down to the post author so we'll go ahead and do these two i guess
okay so all of this should remain the same i
don't want to change anything there um and then i define the asset type as an enum outside of the database so that
won't reference any foreign key or anything like that so that should be a-okay
and then we have the create post assets tables which binds a post to an asset nothing's going to change there
pretty simplistic table so and oh did i not create that
migration
doesn't look like i did okay well all that needs is a migration so i'm
just going to copy the assets migration and paste that in
and then just to make sure that it runs after the assets tables created i'm going to increment
how did i copy oh i copied the wrong table my bad
all right yep be gone with it copy assets
and paste as it there we go okay now i have two copies of that all
right it's early in the morning for me i'm sorry if i'm not making too much sense
okay so let's see so instead of just assets here let's increment the timestamp
by one so that this gets created after and then i also meant to change the name from just assets to asset
uh posts is that what it was binding to so it was
looking at yes okay
hey how's it going um yes it should be i think youtube automatically saves
streams so it should be saved
i don't think i'm recording it so it should but it youtube should save it
all right and then instead of all that fun stuff we want the post id and the asset id
then we also want a foreign key there so references id in table
posts and references id
in table asset id
give that a save and then we're on to profiles and post
history so
post authors
did i not create a post authors i post histories
skip over that one too okay well all that one needs is a migration as well and that one can be anywhere so i'm
going to go ahead and just make a new migration for that
i thought i made it though yes that's profiles posted nope okay
what was it create post assets table all right so
post assets no i just made that i'm looking at the wrong one
post authors oh okay right and i didn't make that
post topics asset posts post histories okay
author posts all right well now that one's created so
i'll go in the order that they are up here on github so i don't get lost like that hopefully again
all right everything there will remain the same again author type id is just an enum
outside of the database so no foreign key on that one
but we will put it on the post and user so references id and table
posts and references id
and table users okay and then i think
profiles was next maybe yes
all right all that fun stuff should still be applicable i think
doesn't hurt to have it
and then the avatar asset id is going to
be in id and table
assets sorry about my chair it's a really old
chair so if it comes through sorry about that
you always wonder how it can work on a white ide um yeah i so i tend to record on a dark one
just because i know most people prefer that but yeah i actually really like a light ide it's
i don't know it's easier on my eyes for some reason more contrast maybe i don't know
um let's see and then i skipped appearances and went with post histories
so this is pretty much just a direct copy of the post table with just all of the
important stuff that would need to be captured so
an alternative name for this could have been post snapshots um in hindsight that probably would be
better so maybe i will just change the name of that
since we're rebuilding now would be a good time to go ahead and make that change
okay and then post id we're going to want a forall key on that so
that should now be good
um i'm gonna go ahead and tack on a used tz on that time stamp
or not let me give me here
okay okay well
just do without it for right now it's no big deal
and then author posts i think i skipped over that one didn't i
or no i already did that when i went back to it yes okay
so now we should be good to go ahead and jump this stuff over into the models
so i like to go in the order of my migrations and then just kind of follow through with whatever is in the model so
here we have roles which has a name and description both of type string
so we'll do column public name string
column public description string
and then we have users most of this should be taken care of thanks to lucid so we should just need
to add the role id of number and the username of string
so we'll do act column public
username string and i should have done world id first so column
public role id of number
okay should be good on the users now so now we've got to do the post and
computer keeps going to sleep sorry what i like to do whenever i have a lot
of columns to copy over into a migration is i just copy all of the migrations
that lucid doesn't automatically add for me so like the id and they created an updated app
and i like to paste that directly into the model
and then use multi-line to just clean that up a little bit so
what i'll do is i will copy the type
remove everything beforehand take the public cut everything after the name and then i
will just paste in the type and for the most part it's pretty accurate so you can see string is
good um and then you pretty much just got to take care of these so body is of type string
integer changes to number
number and timestamp changes to date time
and then all we have to do is add on the column decorator to these so
get all of them again at column if i can spell column right there we go
and then go down one to the end of the line and hit enter again to get your spacing so
just a little quick cheat for that and then um i don't have it on this computer but there is an
extension called camel case
change case maybe
yeah i think this is a change case that you can install so let me go ahead
and just undo a couple of steps here okay and then what we can do is
highlight all of these and use that extension to change
to camelcase there we go all right and then we'll just reapply
oh put the enter in the wrong spot big column and voila
so now we have our model ready and we just need to change the types that
need additional decorating so that should just be this publish up
so date time and it's not going to auto create or auto update so we can just leave it at that
get rid of that extra space okay
let's see so that was posts so then we got topics so that one is just a user id
a name and a slug so topic topic topic there it is
column public i'm blanking user id name and select okay
user id of type number column
public name of type string and column public
slug of type string and then post topics is a intermediary
table so we don't need to do anything with that and then we have assets
well actually we could go ahead and just add in the relationship while we're at this point
um now we'll go back through afterwards and add in relationships so let's go to assets
and i have a feeling i'm getting to blank and not be able to remember five so i'm just going to copy and paste these in
and then
public get rid of that oh i forgot to check for the nullable not nullable
i'll go back through i'll go back through and do that that's no biggie
camel castle put the space in the wrong spot
and then we got a number there which will actually change to an enum
once we get the enums in here and then the byte size will be a number as well
so we can save that
uh yeah they should be i didn't check anything to make sure that it would be but i'm pretty sure youtube auto makes
the stream available afterward um so we should be good there
hey roman thanks for stopping by everybody um
so let's see where did i leave off here we got the assets yes so then we have asset post which is a
menu to many which we'll circle back to and then we have the profiles so again we got a lot of columns here so
i'm just going to copy it go into the profile model paste these guys in
and work to clean it up so we have the types
prefix that with public get rid of everything after drop the type on there which we'll fix
here in a second at column hit enter
and user id be up i forgot the camel case go back
camel case go forward oh something i changed it can't go forward right
that column there we go
all right you become a number you become a number
and you become a string all right
so that was profiles and then we got post snapshot which is i forgot to
change the name of the model for that so go ahead and take care of that too so we got post
snapshot change the class name on that too before i forget
post snapshot there we go
so we'll do the same thing that we've been doing here just copy all of these go into the model paste it in
and there we go
okay number number
uh time stamp date time
number and is that the last one string
well really should just do a final replace number
number okay i didn't think i would have too many more after i said that but okay there we go number number date time
and daytime let me put my phone on silent
okay and that gets a date time as well and so does that one
okay and then we'll circle back after we get oh all that we got left is the menu to
many for the uh for the uh author to post relationship so we'll go ahead and circle back and take care of the
nullable items so
normally i'd do this as i'd paste them in but i forgot to do that so let's see
we have revision that should really be not nullable
all right page title description meta description canonical
body video url okay really everything beyond
the slug on the post history or post snapshot now
is nullable so let's just go down to the slug here
and we'll do or null on the end of that
oh i copied the whole thing okay well
let me retry that copy there there we go
down to delete that there we go okay
so that was it for the post snapshot profiles what you got
my nullable avatar asset id is nullable and everything afterward is nullable as
well so go into profile
and do the same there
all right assets bite size alt text and credit
uh oh right here
okay and then topics nothing there posts
this again should be everything after slug i believe yeah so uh post puff post there you are
so everything after slug
and okay and then user i don't think yeah no nothing in there
and a rule should be nothing as well so that should be good okay so there should all be good now we
just got the relationships to go ahead and add in so
i guess we'll go ahead and start with roles on the user so user
i like to put my relationships down below the columns um and then after the hooks
so at
it belongs to
yep although you did not import it for me there we go public roll roll
um that belongs to type of roll there we go
see co-pilot's catching on it's getting getting a couple things wrong but it's catching on okay there we go
so we'll do the inverse as well so on the roll our roll will have many users so
has many user good oh gotta import it there
public user it's close has
many type of user there we go all right so roland user is taken care of
uh let's see so that should be good for that and then we have our post
which doesn't directly relate to the user it has an intermediary table doing that
so nothing directly off of the user that needs a
belongs to or anything like that so we'll move on from there up until we get
down to the intermediary table then we'll assign that so our topic does belong to a specific user
though yeah i'm going to go ahead and just put a foreign key on that as well
okay so topic topic topic okay
it belongs to user
public user um belongs to type of user there we go
and then the inverse of that
user has many topic public
topics there you go you're catching on you got to import stuff but you're catching on there
all right so that should be good for the topics now where was that right here all right so
then we have the post topics huh oh yeah okay that was user topics now we
got the post topics so uh go into topic this has an intermediary table so it is
a mini to many so at many too many
post
pivot table is not topic post but
post topics and i believe that has a sort order on
it yes so i'm going to go ahead and put pivot columns on there with the
sort order and then we got public posts ah you're so close co-pilot you're so
close that needs to be a capital a money to many all right there we go
so then we got to do the inverse of that so the post also has many
actually i'm going to go ahead and just copy it since the only thing needs to change is the name and the types
okay oh yeah and the imports so many to many
many to many post changes to topic
topic pivot table and columns stay the same and instead of this being post it is
topics okay so now down to assets
um it has the asset type id which i will be defining as an enum not directly in the
database so that should be good and then we get on asset posts where again we have something very
similar to what we just did with the topic and assets or topic and posts
so at many too many
posts pivot table
asset posts pivot column again this should have a sort
order on it public posts
many to many type of post all right and then the inverse of that
is many too many
asset pivot table
asset the posts
blank there all right there we go public there you go
all right oh yeah control d thank you about that
corey um i have a tendency to forget about that or what the um
keyboard shortcut is for it um so let's see
nope okay got that wrong
ctrl d um
on a mac today so i don't know if it's different for mac or maybe that's actually working and
it's just taking me back up to the top of the page yep okay that's what's happening
okay i'll play around with that later but thank you for that [Music]
okay so we got down to the asset posts so now we have
the profile which belongs to a specific user and then the avatar asset id as
well so profile
this yeah belongs to belongs to
user got import user public use user not users
belongs to type of user and then i will go ahead and do the asset as well
which should be the same so it belongs to if i can type it there we go
asset public asset
yeah that's just one okay belongs to type of asset
so then on the user we need to add
profile and then on the i don't think it makes sense to define
profile on that asset so i'll skip that so at
what is this has one has one
pro nope not promise profile there we go i hope you didn't import it
profile there we go now we got it public
profile has one profile gotta import has one
okay so that should be good and then we have the post snapshots
so [Music] we'll want to define this on both sides so post snapshot belongs to a post so
app belongs to post
public post belongs to type of post
and then the post has many um snapshots so that has
many post snapshot and i'm going to just name this
snapshot off of the post since i seem to see i feel like that's self-defining so i'm going to
manually define the table as
post snapshots did i get the is it i think i thought it was table name but
i feel like no all right i'll look here in a second
public snapshots has
many type of post snapshot okay let's go take a look
relationship options
oh you know what i might be overthinking it maybe it doesn't need it
i bet you it doesn't i do need to go collapse my node modules now though there we go
okay so because it should still pull the table name off of the actual post snapshot table so we should still be
good there or the post snapshot model i mean sorry about that
okay and then we have the author to post i don't think i've done that yet so
author type id is going to be an enum outside of the database so we just need to worry about the post id and the user id so
let's see so we'll do user first so user
at and then this is going to be a mini to mini
post
see the pivot table should follow through with the norm but we do want to grab the pivot column
author type id so we'll do pivot column
author type id public posts has many type of posts
why the red squiggly here
argument of type user is not assigned multiple perimeter of type posts many to many posts
all right i feel like i'm doing something stupid let's see
if i get rid of the options is it still no
let me try retyping it
post imported
what am i having a brain fart with post id user id author posts
all right well let's see if i can define the inverse see if maybe i have an epiphany there so many to many
user we'll skip on that for right now public
users let's do authors
i need a mini i did not no no it's important okay type
of user yeah so that one's fine
imports all look right
did i have has many here i bet you i did overlooked it
okay oops okay so should be all of those good
um all right
shall we try running the migrations i suppose
node ace migration run
that's a first
uncut exception detected process will shut down
client pat oh yeah all right don't forget to set up your um emv
my bad on that so let's see the database name is not
lucid but yeager i think so
now we should be good i believe that's all that i needed to change there so let's clear that and rerun it no
password must be a oh yeah password is password my super secure
password there all right
user's not losing i need to read man i need to wake up and read postgres
i was using many to mini well thank you i don't know maybe an import was missing for it or something i don't
know clear
there we go we at least got some ran so asset posts
migrating it failed to create table asset relation assets already exists
[Music]
did i create two that's the one that i was having copy and paste issues with it
so we have assets there yep all right so it needs to be asset
posts
all right so node is migration let's just go ahead and roll back those ones that did run
and try re-running and oh no same table
foreign key asset id references asset id relation asset id does not exist
oh dang it assets
i'm going to blame co-pilot on that one node ace migration
roll back node base migration
there we go now we got it all right next i um guess let's go ahead and get those
enums populated in um so you can either place enums like in the contracts
directory i kind of like placing them with an app personal preference um
so i just do enums just like that and let's go grab them because i have no
clue what i had app
enums oh yeah i didn't do the auth attempt
table either okay well um
yeah absolutely in real videos everything gets edited out but in live streams it
humanizes people it shows that not everybody's perfect
so i'm actually going to pull this down just so that i can copy the enums directory
as opposed to copying and pasting each file content so
click clone
okay c code uh
it's this one i don't like this view let's do that for you there we go um app
enums and i'm just going to copy all of those
and then let's go back into [Music] our current directory
app enums and paste all of those in
get back into yagerko all right
and there they are so i didn't change anything with any of the enum
columns so all of these should still be accurate so they're just simple genomes that export out
um some of them have descriptions with them as well uh
yeah like this where it's kind of human readable so that those are just objects at that
point but um yeah so pretty simplistic files there so those should be good and then i guess
let's start rigging up off since that's where i typically start
so i'm going to make a controller for that
there we go for a second there i thought i just typed assets controller all right
computer keeps going to sleep you have to change the sleep timer on that
all right so let's see public async
show sign up
okay grab the view out of that and return view dot render
let that sign up let's go ahead and create that file so views
off signup.edge
uh while we're in here i am going to create
a layout file as well so we'll do oh i forget how i name this stuff
whether it's capital or lowercase auth
layout.i just off.edge yeah there we go
okay and then i did i okay i guess visual studio code comes with that out of the box now so that's
good
all right and i actually forget what that needs to be like whether it's at content or
whatnot so i'm going to go look here i'm already here i can go ahead and
look here so resources views
layouts ah app should work
ah section right so at section
content at and section
and then if i'm remembering correctly this is at layout off
nope what am i doing layouts edge layouts off
okay and we'll just put an h1 here
working just to make sure into the routes
route.get sign up
show sign up i'm pretty excited with off
there we go all right let's try booting it up i actually don't think i've tried booting
this up yet so let's give that a go
oh that's very true thank you roman so if i go back into layouts here i
mentioned that this is a self-closing section so i can just do at exclamation point to have that
self-close instead of having that enclosed tag there so save a line there
and let's see if that booted up yep so let's go instead of here let's go to localhost
3333 and it works so let's go to sign
up
oh yeah i have a section and i did not put my
content within that section so section content
is it section or is it something else well we'll test it and see yep there it is okay it's section
i couldn't remember if the inverse side was something different so there we go so at least we're getting a render out and that seems to be working okay
so let's just do a simplistic form here and form
method post action will be
off dot sign up that's what i named the show isn't it i need to change that to auth dot show
sign up ah dot sign up dot shell there we go that'll work
and then within here that should be good we'll name the actual post route
off dot sign up and let's see i have username email
and password so we'll just do simple inputs for right now
type equals string string is that right
text name equals username
and we'll put a placeholder on there as username enter
username go back and change that later all right i'll do one for email
and then one for password email
password email
password all right get ourselves a button type of
submit sign up sounds good all right
close the terminal there i don't know when that opened up
i do yeah i prefer to use the uh edge engine over a separate front-end
framework edge does most of what i need most of the time
if i need a front-end framework it's because i'm specifically building something that's spa-based
a single page application based where i need constant changing
page stuff with edge for the most part you can replace sections pretty easily just using ajax calls
if you do need dynamic stuff so and we'll get into that in later streams
i don't know if we'll get we'll get that far in this one today um
but yeah so let's go ahead and create our sign up so off controller
public async sign up
request response
well look at you co-pilot get me most of the way there all right create
username email password um
import user okay so the user gets created there
i'm pretty sure that's all that we need for the user and then we can actually sign that user directly in so using um
i'm going to import off here awaits
off dots i believe login is the one that takes a user yes login
and then let's go ahead and yeah for right now let's redirect just
redirect back to the home page and let's go ahead and grab the session
too we don't have session stuff rigged up at all yet but um we can plop something on that temporary welcome
home page just to make sure that it actually came through so we'll flash
success welcome the egg or something like that
give that a save oh yes um what are you doing up here let's see
um most of the time i use validation for this
but i believe it would be all maybe only only
yeah i think either one would work but i'll go with only um for right now so we'll just do this to test to make sure
everything's working um didn't have any brain farts with it and then we'll add in a validation step to it as well so
let's go ahead and refresh here yep didn't define the route that's very true
routes route dot post sign up off controller as
yeah that's that's pretty close i'm just gonna do off dot sign up on that one though but yeah that should do it
go ahead and refresh again all right there's our super simplistic form so we'll do test user one
email of well i'll do a fake email testuser1
at gmail.com and
all goes well missing get away
for this website missing method signup oh it's all lowercase in it
where are you yep all lowercase so maybe i should uh
stick with one naming convention there huh here actually i'm gonna change this to
sign up show there we go that's better
so sign up show sign up
okay no let's go ahead and just re-enter the form make sure everything works okay so
resubmit the page test user one test user one at gmail.com
and oh yeah npm i
p h c argon 2 there's no at in front of that right yes
okay
all right there we go so that's for hashing our password um so
just needed to install that there again i'm gonna go ahead and resubmit from the start
so test user one test well yeah that would have been on create so
our user would not be created yet and
okay incremental steps here insert into users updated at username
values returning id inserter update on table user violates foreign key constraint user role
i default oh i didn't give it a roll id did i i thought i set a default on that though did it not
user roll id default to one
and i defined it within the model yeah
maybe let's see if it works if i manually define a role id there
let's give that a try
at least try to narrow down what might have happened there
okay yeah so it's something that i have configured for the database here
oh i don't have any rolls i didn't i didn't create a seed of course
so role id one does not exist is the issue
so if we come back and whoop into the database
into the database reload am i using the right database
[Laughter] uh all right it should be named jager
yep database name is jager all right well i was going to pop a database or
rolled just right in there but i guess let's go ahead and just create a seeder to do it for us
actually i think i already have one
and i can just copy and paste from here that way i can make check and make sure
i didn't miss any other seeds that i might need starter seed there we go
oh nope just rolls okay i'm gonna go ahead and just copy
that then [Music]
and what's that go into seeds i'll just use node to make it or
the acli to make it so node ace make
cedar i think starter
seed there we go okay and now we got the seeders file and i
just gonna copy and paste that okay so one is a basic authenticated user two
is an administrator so now let's run node ace db
seed there we go npm run dev
there we go all right back to here
try this one more time test user one
test user one at gmail.com some password there we go now we got it
working
it's all the small stuff that you forget right all right so our sign up is working um
i guess let's go ahead and drop some off check on the home page the welcome page to make sure
that the auth actually went through and our user is authenticated if i can read there we go
so just do pre off dot user dot
uh let's do the user name okay
okay cut that back a little bit let's try the user undefined
let's check out the kernel there we are all right
right here imports at ioc
adonis core silent no no maybe that's in my project instead
of there middleware yep so instead of doing ioc that will be app
middleware silent off which will run off check which will propagate the user onto the auth module
so now we should be good to do off user username i'm going to place a
i don't remember if that works in
an edge i don't remember if that works i think it does but all right there we go so we are
authenticated there we go we got our test user one so authentication seems to be sticking
so that should be good let's go ahead and do validation on this so
i can either plop it directly into here or i can make a separate file for it i
think for right now i'm just going to plop it directly into here um
so let's see let's import no i'm the one that capitalizes schema
rules from adonis core validator and then what i personally like to do is i like to name my shimashima after it's
made so i call a capital schema
is that wrong as is that right there i think it says so then i do const schema equals await
schema.create we got username
rules uh wait no that's not right
schema dot string and
let's trim it
and that is an extra right there and then we do rules dots and this is
very much so required and um let's see is there a unique one yes
there is spot on so that should be good
and then email see trim true required unique spot on thank you
and password i like it i'm also going to add them in with or min with midlength to it
six is a little light let's jump that up to eight okay so there is our schema so then we
can do const data equals
awaits oh you're close request dot validate
schema and then instead of manually popping that in there we can do just data
so now we can get rid of that right there and that should be
all good we can try they don't have any log out um
that's okay let's see i'm not familiar with
safari's devtools i don't know why i'm using safari either
cookies cookies there's cookies delete them all
yeah i should do it and then if i where do i close it right there if i refresh there we go now we
got n a so the um knowledge what is that coalescence
uh right here does work i thought it did and then we should be able to go back to
sign up test user two
test user two at gmail.com some password that is
now let's test the validation less than eight okay so we came back here so i'm going to assume that that
means that the validation worked i don't have any of the errors popping onto the page yet i guess we can go ahead and do
that um
sign up let's see if i can remember how to do that so let's first clean this up a little bit i
guess so
what am i doing no oh
i don't have tailwind in here yet either do i oh man what am i gonna do
all right well i'll just um
wrap these in dips for right now there we go
okay and then underneath the div we'll do a small and this one would be
nope that's wrong it's giving me laravel syntax
uh let's see what is that that is flash
messages dot get uh
errors dot username i think and then we can wrap this up in an if
flash messages dot has errors.username
then we can end if all right let's stop right there just uh check to see whether or not that works
in itself so sign up oh okay
all right i got that wrong then let's go take a look
yeah just search for it
oh i'm missing an s okay simple things
back to here refresh there we go now they're all in the line
and there we go now we got our validation failed messages so that seems to be working so i'm gonna go ahead and
move these off into a component um that way it'll just it'll be easier to style it once i do get
tailwind in here so let's create a new file components
input.edge and i didn't copy it so or did i maybe i did but now i definitely have a copy
so we'll paste that in here and we are going to take
the type otherwise it should be strip ring if i can spell it
text text there we go the name
will be just the name and that will be required and then the placeholder
will be there then we do errors
well now we need to specifically take in the error since it's a component so we would do at if
just do errors um
yeah and end if and then we will drop
that in there and we will do
just errors dot join just like that
give that a save come back out here get rid of that at
com okay component components.input
name is username and
placeholder is enter username
and then the errors would then be flash messages dot get
errors dot username so let's test that out again see if
that's working still so send that off and there we go so now we can
copy this component in place of these two so do
one and two
and instead of well let's start with this one so instead of username here this would be email
and that also needs the type of email enter email
and errors dot email this one here needs a type of
password name is password enter password
and that will be password as well so now if we refresh this unexpected
token forgot the comma always forget the comma there we go all right
sign up all of them have their errors
oh yeah i added required um and they are all automatically required
because i did not specify that they are optional so this rules that required is a little
redundant so i can just go ahead and remove that on each of them
now if we try that again we should just get one of those error messages there it is okay
and now if did i create a test user too is this going to work for me now it's not
all right let me try adding in another connection for it jager postgres
postgres postgres jaeger no no that's password sorry database
should be maybe that's what i did wrong last time i set it up
there we go all right let me delete this one then okay
so users all right we only have test user once we're good to use test user two here
test user two at gmail.com
and there we go now we have test user too so our validation is working we have simple input components
[Music] i guess let's go ahead and get tailwind added since
our forms are just going to be super basic without it i
let's see i'm going to have to take a look at the documentation on that don't do it enough to exactly remember how to
do it let's see guides
asset manager okay we already have encore configured
because i started my application with it so we're good there um
actually resources where are you here you are we
have our css file already so really this should just be adding in tailwind um
because i'm pretty sure our encore is already started with the css
yeah there's js and then we just need to add in like uh
enabling post css yeah and then we're probably gonna have to
configure it with tailwind i'm gonna cheat i'm gonna look and see what i did here
actually i'm gonna look and see what i did on a newer project because that might be out of date so let's see github.com
no that one's not using all right i'll just go to github
let's see what we got
yeah no yeah this one
scroll down all right so here i was using view three i don't think i need that so nope nope
okay no additional configurations needed you just need to enable the css loader
and then install tailwind so
so let's see i
css get started installation
okay
hey uh tina hopefully i'm pronouncing your name right thanks for stopping by
all right and then what is the command to add that default
here it is tailwind config if i can copy it
okay so then we should be good to go ahead and start stuff back up i think
no oh okay well that makes it easy enough
let's install post css loader 2. npm run dev and
all right now we're started up so now all that i need to do is add these in
i believe to our starting css file
i'm going to go ahead and nuke this and just paste these in here
see if it uh yeah not updated okay let's give it a try let's give it a test
so change our title here to text
red 500. the good old make the text read the test and see if it's working
no no it doesn't look like it okay
um yeah okay so the post css i probably
need to add a post css config yeah maybe yeah right here
all right i'm gonna go ahead and copy that and post css config.js add that to the root
so let's go inside of there so that we know that we're going off of the root here post css config js
paste that in there uh let's see it looks like i'm already also using post css nested here
um to keep with my norm i'm going to go ahead and install that plugin as well so
npm i post css nested
okay run dev
and actually make sure that all that ran through okay
uh close this and yeah okay cool there we go it's red awesome
and the text size reset too so that's another uh way to tell that it's working now
cool cool um
so what next we need login we need log out
so let's add a simple log out first since it'd be nifty to be able to log
out our users so that we can go back and test log in instead of having to clear the cookies so
within our resource nope not within our resource well i guess we could add the button first but let's go ahead and add
the functionality first so public async
since i'm going with sign up here let's go ahead and do sign out for the name here
do response and off i think that's all that we'll need and we'll do session two we'll put a session message on there
okay uh
co-pilot's controlling my stream all right now let's add the route
route dot um see do i normally do a get request or a post request
put put i think yeah it would work sign out
of controller sign out most of the time i don't fully
rebuild the auth i just copy and paste it from project.project so
but it'd be good to just rebuild it from scratch for once
all right so we have our uh request here so now we just need to add a button that sends off that request
to i'd say probably the layout so we'll give ourselves some kind of
funky header here bg gray gray with an a 100
flex flex uh between
flex items nope nope item center
justify between item center there we go okay do it div that would be like the
header and then we'll do the div which would be our log out
okay so i think normally i do just like a
straight get request but i'm going to try something let's try just the anchor anchor href
going to the route hopefully remember how i usually do it but let's see what did i name that um
i'll sign out yeah i'll sign out
see if this works
and let's wrap that up in an if because we don't want to show it if we're not authenticated so if auth user
okay so that should just log us out redirect
us back to the homepage
elk welcome's not using v well this is the off layout i don't want to use the off layout let's create a main layout
cut this out of here first
okay main.edge there we go html5
there we go paste that in there we'll do the same thing
nope section section content there we go let's get them mixed up
okay and then we need to on welcome.edge
take everything out but let's see we'll keep this div because i'll end up putting main within
the layout i think and
do at no get rid of everything there we go at
layout equals layouts and main
at section content
okay and plop the div in there so now that should be using there's our sign out okay
so if i click sign out and there we go so yeah that worked i wonder if that is how i usually do it
i don't remember okay so we have our sign out working
and our sign up working so let's go ahead and do our sign in
so public async sign in show
return view.render thank you and public async
sign in request response off
session okay
uh no no i normally don't validate the login because you want that to be kind of loose in case your signup changes
your signup validation changes you don't want to lock the user out so do const
email password equals requests only
yep email password and then let's see
await off dot attempt email password
sure that works and sure so i i think that's it
we'll test it we'll see all right so we got sign up sign up
route dot get sign in off
controller sign in show as sign in show route dot post
sign in off controller uh sign in
is off sign in and it's starting to drive me a little bit crazy so i'm gonna line these up
there we go that's better okay next we need to add in
i don't even think the view is created yet so we need to add within our auth folder a
sign in dot edge at layout layouts
off at section content and
section um i'm going to go ahead and copy the
sign up content because it's pretty close i guess i could just copy the whole file but that's all right
so that changes the sign in we won't use the username and i think that's it
so let's give that a go um actually let's go ahead and add routes to the our temporary header
and let's go ahead and extract our temporary header into a partial so views
i'm gonna do a partial instead of a component that way it has access to all of the data that's on our uh
edge that's that's available with an edge so partials header dot edge
paste that in there that way we have direct access to auth we have direct access to
anything else that might be added so session all that fun stuff and let's add that back into our layouts
is at um is it is it just partial
i'm questioning myself that it's just partial i don't remember do i have the authentic
off but the documentation open i don't let's get that open
and search for partials
include yeah i didn't think it was partial
include partials header and
okay add that to our off layout as well pardon my dog
have a good night all right
let's see so within our header in addition to those let's add in our
simple menu so if our user is not logged in we don't want to show sign out we
want to show sign up sign in so at href
route off dot sign up or wait no sign in usually comes first
don't know sign in
sign in nope not all of it just the button there
we go and then sign up
and take a
marshmallow three on that
okay so back into here
there we go so that uh that that should be over on the right but i'm not gonna fret that
for right now so all right testing our sign in here could use some spacing too
all right so we have test user 1 and test user 2 created so we'll test with test user 1 first i suppose
and there we go so sign in is working cool
and then we also need to add handlers so like if i were to try to sign in with test user
3 which does not exist and imagine at this point in time we're
going to get an error because i'm not handling the attempt call right yeah we're failing out some i don't have
the error actually rendering out on the page but yeah um
so we would want to handle that and show something to the user so
within our auth controller here if i can remember how to do this do we just wrap this up at a try catch
i believe so
yeah that's close enough but i think this is something different response dots
i'm gonna cheat i'm gonna go look and see what i'm doing i don't fully remember
so let's see app auth
register show login login
i got all the bad attempt stuff to keep you from being able to just spam the
login trying to guess passwords and where's the actual attempt so the attempt is right here
and then oh yeah they remember me i forgot about that and let's see so that's within a try
catch if you fail out then i got form with the message and the message is either one of these so
okay and then we just okay it's re response redirect and then chained off of that is
back i knew that what copilot's given me here was wrong but i couldn't remember exactly how it was
wrong so there we go response redirect back and then instead of yeah we do form because it's a whole
form message you're not directly passing it onto a particular
okay
all right and then i'm just going to copy the paste that message that does not contain
the incorrect attempts we will circle back and do that later
okay and then let's see if i can remember how i'm
showing that so sign in all right let's do div roll equals alert
class equals bg red 100 text
red 600 p3 rounded
border border red 200.
and let's
see flash messages dot get
errors dot four see if that's right at if
err one too many r's there errors dot form
and if plop that guy on in there
and let's go try to get our login wrong so yeah you could probably just end it up with nothing yep there it goes so there
we go um none of my styling went in there
oh oh oh yeah um i don't have the style sheets in there at all do i
let me go back and i'm just going to copy and paste the default from here then
entry point styles entry point scripts and let's plop those into our layouts i
knew some something was looking wrong because our header should have been on the right
all right let's try that now that's looking okay well that shouldn't be in the header but it's
it's a little bit right i must not have closed something in my header
let's see if oh i got the oh that's a start div yeah that needs to be an end if
that looks better that looks more right he's padding but that's that's better
uh let's do px6py2 at py3
sure and then margin bottom let's add a margin bottom to that too marching bottom six so we'll get an actual header
in here later on but just to get things going okay so now if we hit sign up we'll get
a big red error the provided email or password is incorrect being vague not necessarily
saying that the email is wrong or the passwords wrong so that if somebody's trying to steal somebody's account they
don't know which one they got wrong necessarily okay
so that should be good for that and then if
we actually do sign in test user one
oh the button still says sign up let's change that too
sign in let's actually make that capital two there we go
okay test user one
gmail.com all right cool so our header switched to
sign out our user's still authenticated if we click sign out that still works
so everything authentication wise seems to be working okay so far um
i guess let's go ahead and stylize this a little bit
so not you not you but oh i did have the dock open twice okay
[Music] i'm um use tailwind ui here
uh i don't know if i'm allowed to show this on stream actually
i don't remember what the rules are with that uh let's see so i'll just get the
plugin installed actually i think it's just at tailwind
css forms
yeah oh wait yeah no that's the right project okay and then
what i think within the tailwind config under plugins just hit
require that yeah and then let's do npm run
dev get our server started back up and
okay that's definitely different
let's see where is our there we go
do they use form control 2 or is that just the pooch trap thing doesn't seem to be doing anything
all right well i'll uh i won't bore you guys with the styling stuff
but yeah so then we should also on our sign up
include a link to sign in and vice versa
so for our auth let's see layout let's take the content here and wrap it
up a little bit so for class max width um
md mx auto
all right and then we'll plop our content in there and then so now that should yeah
and then we can do an h1 sign up
or create your free account or something like that
okay and then we'll do a paragraph there
with uh already have an account
that's pretty close off dot sign in
and since we're going with that verbiage we'll do sign in and since that's in a sentence we'll do
sign in and then we'll do the same thing for the inverse side let's actually check make sure that that looks decent
it's okay it's not great but it's okay
it at least tells you where you're at and then log sign in
sign in to
sign into your account need an
account sign up
sign up so we'll make this one a sentence form two instead of having capitalizations
for each word okay so now create your free account i
already have an account sign in click sign in takes you to sign up for it sign in oh i read that backwards sign in your
account need an account sign up so there we go
cool cool cool uh let's see how long have we been going here
obs won't open up
[Music]
okay well at least i have controls up there all right but i i think i'm going to stop there for right now uh and then
i'll think of a better approach on what to do in the next stream i just kind of wanted to get something started here to
see how this went um check and see how i do how it would do on the stream uh like quality wise
all that fun stuff so thank you all for stopping by hopefully we'll do this again more and soon so thank you all for
stopping by i appreciate it
Join The Discussion! (2 Comments)
Please sign in or sign up for free to join in on the dicussion.
alifn27
gg
Please sign in or sign up for free to reply
tomgobich
Thank you! :)
Please sign in or sign up for free to reply