1
00:00:00,000 --> 00:00:03,000
Now for this section here,

2
00:00:03,000 --> 00:00:06,000
I prepared another brand new starting project,

3
00:00:06,000 --> 00:00:10,000
and you, of course, find it attached like always.

4
00:00:11,000 --> 00:00:12,000
And once you downloaded it,

5
00:00:12,000 --> 00:00:14,000
you should therefore run NPM install once

6
00:00:14,000 --> 00:00:16,000
to install all the dependencies.

7
00:00:16,000 --> 00:00:20,000
And then NPM Run Dev to start the development Server.

8
00:00:21,000 --> 00:00:23,000
Now we'll take a look at this starting project

9
00:00:23,000 --> 00:00:27,000
and the files and folders we got there in just a second,

10
00:00:27,000 --> 00:00:29,000
but once you started that development Server,

11
00:00:29,000 --> 00:00:33,000
you should see this login screen

12
00:00:33,000 --> 00:00:35,000
if you visit Local Host 3000.

13
00:00:35,000 --> 00:00:40,000
You should also be able to visit localhost3000/training

14
00:00:42,000 --> 00:00:44,000
to see this page,

15
00:00:44,000 --> 00:00:47,000
this dummy page with some trainings,

16
00:00:47,000 --> 00:00:48,000
if we're building an app

17
00:00:48,000 --> 00:00:52,000
that allows users to do some online trainings

18
00:00:52,000 --> 00:00:53,000
or something like that.

19
00:00:53,000 --> 00:00:58,000
And it's this page which I later want to protect

20
00:00:58,000 --> 00:01:01,000
so that only authenticated users can visit it.

21
00:01:01,000 --> 00:01:05,000
At the moment, everyone who enters this URL can see it,

22
00:01:06,000 --> 00:01:08,000
but we'll actually start

23
00:01:08,000 --> 00:01:10,000
with that log in screen here anyways,

24
00:01:10,000 --> 00:01:12,000
because the first step

25
00:01:12,000 --> 00:01:16,000
will be to make sure that we can create a new account

26
00:01:16,000 --> 00:01:19,000
and that we then thereafter at some point

27
00:01:19,000 --> 00:01:22,000
can log in with that account.

28
00:01:22,000 --> 00:01:25,000
Now for that, I have this starting project

29
00:01:25,000 --> 00:01:27,000
and this form,

30
00:01:27,000 --> 00:01:29,000
which you're seeing here is actually in the end

31
00:01:29,000 --> 00:01:32,000
rendered by that auth-form component

32
00:01:32,000 --> 00:01:34,000
you find in the components folder.

33
00:01:34,000 --> 00:01:37,000
It's a pretty standard component,

34
00:01:37,000 --> 00:01:39,000
nothing too special in there.

35
00:01:39,000 --> 00:01:42,000
We got a form, an image, some inputs,

36
00:01:42,000 --> 00:01:47,000
and then this link on which we'll work together soon.

37
00:01:47,000 --> 00:01:50,000
And of course, at the moment if you try to submit that form,

38
00:01:50,000 --> 00:01:51,000
that won't do anything.

39
00:01:51,000 --> 00:01:56,000
And that link here, this log in with existing account link

40
00:01:56,000 --> 00:01:58,000
also isn't too useful yet,

41
00:01:58,000 --> 00:01:59,000
but we'll work on that.

42
00:02:01,000 --> 00:02:05,000
Now, besides that, you'll find a lib folder in this project,

43
00:02:05,000 --> 00:02:07,000
which contains a db.js file,

44
00:02:07,000 --> 00:02:11,000
which sets up a SQL light database in your project,

45
00:02:11,000 --> 00:02:15,000
and which then creates some tables for our users

46
00:02:15,000 --> 00:02:18,000
for those authentication sessions

47
00:02:18,000 --> 00:02:21,000
and for these training items

48
00:02:21,000 --> 00:02:22,000
which we're fetching

49
00:02:22,000 --> 00:02:25,000
on this one page I showed you a couple of seconds ago.

50
00:02:26,000 --> 00:02:29,000
And then I also set up some dummy data here

51
00:02:29,000 --> 00:02:32,000
that's stored in that trainings table.

52
00:02:32,000 --> 00:02:35,000
Now, I don't create any users or sessions

53
00:02:35,000 --> 00:02:39,000
because we'll do that together throughout this section.

54
00:02:39,000 --> 00:02:43,000
And it's this training.js file, which then, for example,

55
00:02:43,000 --> 00:02:45,000
fetches all those dummy trainings.

56
00:02:45,000 --> 00:02:47,000
As you see, it's a pretty straightforward file.

57
00:02:47,000 --> 00:02:50,000
Well, and then we got the app folder of course,

58
00:02:50,000 --> 00:02:52,000
where we set up our routes and layouts.

59
00:02:52,000 --> 00:02:56,000
And there we got one route route which renders the all form.

60
00:02:56,000 --> 00:03:00,000
So that's this starting page here that we see here,

61
00:03:00,000 --> 00:03:02,000
and we got that training page,

62
00:03:02,000 --> 00:03:07,000
which renders these training items, and that's it.

63
00:03:08,000 --> 00:03:10,000
But that's of course not the finished app.

64
00:03:10,000 --> 00:03:13,000
Instead, now, as a first step,

65
00:03:13,000 --> 00:03:16,000
I want to make sure that we can use this auth-form

66
00:03:16,000 --> 00:03:20,000
to create new users with valid data,

67
00:03:20,000 --> 00:03:24,000
and then thereafter we'll work on the login and so on.