0:06 hello everyone this is joe workman and
0:08 today i am excited to talk about page
0:11 safe
0:12 page safe provides us a very simple and
0:15 easy and yet very secure way to password
0:18 protect our web pages
0:21 now a lot of other solutions out there
0:22 are full-blown username and password
0:24 management systems
0:26 and that's really not what we need
0:28 ninety percent of the time
0:31 all we need is a simple password or pin
0:34 to unlock our web pages and page safe
0:37 does exactly that
0:39 so here we have the default look and
0:41 feel for a page safe
0:43 locked page when you go to the web page
0:45 you are presented with the login screen
0:48 and you'll see that we have here we have
0:50 the four digit pin
0:52 and let's go ahead and enter in the
0:54 incorrect number
0:57 so what we'll notice is that page save
0:59 gave us an error
1:00 saying that hey that didn't work please
1:03 try again
1:04 and let's go ahead and enter in the
1:05 correct number and we'll notice that
1:07 when i enter in the correct number
1:09 we'll get a nice unlock animation and
1:11 then our web page will be unveiled
1:13 beneath it
1:14 now page safe allows you a lot of
1:16 customization for the lock screen
1:19 as you see here we actually have a
1:21 padlock
1:22 and we have three different padlocks
1:24 that you can choose from
1:26 and the padlocks animate as well so when
1:28 you log
1:29 in you'll notice that the accent color
1:30 turns green and then the padlock
1:32 actually
1:33 unlocks
1:36 now page safe also shapes with a log out
1:39 button
1:40 and you can actually use this logout
1:42 button with any
1:43 button stack that you want or just a
1:46 simple text link
1:47 to actually log out of the page and
1:50 whenever you click that logout button
1:52 you'll basically the page will be locked
1:54 immediately
1:55 and the user will be prompted for the
1:57 password again
1:59 now if you don't want the padlock or the
2:00 key and you'd like maybe to have a
2:02 custom company logo
2:04 we also provide that as well and here's
2:06 an example that we have actually instead
2:08 of a four-digit pin
2:10 we're using the passcode so a text
2:12 password
2:14 and another thing you'll notice on this
2:15 page is that we actually have a nice
2:17 beautiful background cover image
2:19 as well as a nice styled kind of form
2:22 layout here now those are just a few
2:26 of the design options that you can
2:28 actually do with page safe
2:30 there are a lot of settings to allow you
2:31 to really make that lock screen
2:33 really beautiful and shine now
2:36 a concern about security
2:40 page safe does not allow any content
2:43 whatsoever from your actual web page
2:46 that it locks
2:48 it doesn't allow any of that content to
2:49 come down to the browser
2:51 until the user has properly
2:53 authenticated the stack
2:56 so if you were to even look at the page
2:58 source
3:00 none of the code except for the page
3:02 safe lock screen
3:04 has been downloaded to the browser until
3:07 the user actually enters in the correct
3:10 password
3:11 or pin code now another thing to keep in
3:14 mind is that you can actually use
3:15 page safe to lock one or multiple pages
3:19 with the same login
3:21 so if you want to have multiple pages
3:23 with different passwords
3:25 you can do that very easily if you want
3:27 to unlock multiple web pages
3:29 with the same password you can do that
3:31 as well
3:32 and what i mean is you can actually log
3:34 into one page
3:36 and unlocks all of them or you can have
3:39 it you know this set of pages is maybe
3:41 for the admin
3:42 and this set of pages is for somebody
3:44 else right so you can actually kind of
3:46 divvy up the web pages
3:48 if you want to kind of give different
3:49 access to different people and just give
3:51 them the password that they want
3:54 now page save isn't meant to be a
3:57 full-blown user management system
3:59 right it's not for managing username and
4:01 passwords and granting
4:03 access levels and stuff like that it is
4:05 a simple solution that
4:07 handles 80 to 90 percent of the use
4:09 cases that most people are going to need
4:12 they need to password protect a web page
4:14 and they need to password protect it
4:16 with just a simple pin
4:17 or password that's it so now let's go
4:20 ahead and dive in to see some of the
4:22 settings that page save provides us
4:24 so here is the page safe demo project
4:27 and this demo project
4:28 ships with page safe as well as it's
4:30 always available for download from our
4:32 documentation portal
4:33 so if you want to password protect the
4:35 page all you need to do is add the page
4:38 safe
4:38 stack to the top so add page save to the
4:41 top of the page
4:42 and you will need to add the page save
4:44 stack to every page that you want to
4:46 password protect
4:48 and really that's all you have to do um
4:51 it will work out of the box you don't
4:53 need to do anything anything special
4:54 especially if you like the default
4:56 styling
4:57 but obviously you want to change a few
4:59 things so let's go ahead and jump into
5:00 some of the settings
5:03 by default the passcode type is going to
5:04 be a four digit pin
5:06 you can also choose a password and that
5:09 is where you can actually use
5:11 any sort of characters the four digit
5:13 pin accepts only numbers
5:15 the page safe id is what you're going to
5:17 use if you want to tie multiple
5:19 pages together and we'll look at that in
5:22 a little bit the next setting is the
5:24 expire setting
5:25 and that's how long the login will last
5:29 before the user has to log in again
5:31 okay so the default is going to be one
5:33 day
5:34 but you can actually do fractions of a
5:36 day if you wanted that
5:38 now the next settings have to do with
5:39 the overall page
5:41 the page title is when page safe loads
5:44 the lock screen
5:46 what is the title going to be for the
5:47 browser then
5:49 the background is going to be the
5:50 background setting for the entire lock
5:52 screen page
5:54 we have a lot of settings here you can
5:55 have colors some gradients
5:58 and also images tiled images as well as
6:01 cover images
6:02 now the next settings section has to do
6:04 with the actual login
6:05 form so basically you can choose the
6:08 icon
6:09 the default is going to be that cool
6:11 keyhole that gets you the animation so
6:13 with that when the page unlocks
6:14 the keyhole will rotate and it'll
6:16 animate in green
6:18 looks really beautiful we put a lot of
6:20 work into that
6:21 the next will be the padlock and with
6:24 the padlock you actually have three
6:26 different padlock styles to choose from
6:28 you have simple the default style and
6:31 then
6:31 a detailed padlock and what's cool is
6:34 you can actually customize
6:36 the colors of your padlock and finally
6:39 you can choose your own custom icon so
6:42 this if you want to draw you know add
6:43 your own
6:44 company logo and drag and drop an image
6:47 directly into that
6:48 image drop zone now the next options
6:51 have to do with the
6:53 background of our form by default
6:56 they're actually set to have an opacity
6:57 of 0
6:58 but if we change that to let's say an
7:00 opacity of 30 percent
7:02 we'll see that we have a white
7:04 background that has an opacity of 30
7:06 percent
7:07 and it looks great because we have a
7:08 black background
7:11 you can set the top position so that's
7:13 the position relative to the browser
7:14 window
7:16 that the lock form will be positioned we
7:19 have round corners
7:20 and this affects not only the container
7:22 of the form
7:23 but also the actual input fields for the
7:27 passcode
7:28 and this is so you have a nice uniform
7:30 look between all of your elements on the
7:32 password page
7:34 now if you don't like having this as a
7:37 container you can actually do
7:38 full width container and what that will
7:40 do is that will stretch that
7:42 across the entire width of the browser
7:44 so you kind of have a nice
7:45 band look and it stretches across the
7:48 entire width
7:49 now the next options have to do with the
7:51 actual
7:52 input fields for the password you'll see
7:55 that we have placeholder success and
7:58 error and that when you're using a four
8:00 digit pin
8:01 all of that text is actually below the
8:04 pin code fields and where you when
8:07 you're using a password
8:09 it's actually in line inside of the
8:11 password field
8:13 so the placeholder is the default text
8:16 that will be there on page load
8:18 success is the text that will be shown
8:20 once the
8:21 correct password has been entered and
8:23 then the error text will be shown
8:25 obviously
8:26 when the incorrect password has been
8:28 inputted
8:30 and then the color settings that we have
8:32 here you know affect the actual color
8:34 values for the input field itself as
8:36 well as the placeholder text
8:39 now the very last settings group here is
8:40 for the footer
8:42 and this allows you to add a small logo
8:45 and a
8:46 short notice at the very bottom
8:49 of the lock screen these will always be
8:51 placed at the very bottom of the browser
8:52 window
8:54 and the logo will be resized so that you
8:56 can have a maximum
8:58 of 48 pixels it is for a very small logo
9:02 and while the text you can enter in as
9:04 much text as you want
9:05 i recommend that you keep it short and
9:09 by default this
9:10 color the text is going to be white
9:12 however you know feel free to actually
9:14 use
9:16 the text controls and the color controls
9:18 within the style text view here
9:21 to customize that text a little bit
9:24 now here's a quick tip when you're
9:25 finished editing your page save stack
9:28 and you have it the way that you like it
9:30 since it's going to be at the top
9:32 of your stacks page it's going to be
9:34 annoying having to scroll down by
9:36 every single time so what i recommend is
9:38 after you're done editing it
9:40 select the stack and then hide it via
9:43 the stacks
9:44 hide button this way it just collapses
9:47 that stack and you really don't need to
9:48 see it all the time
9:50 now adding a log out button to your web
9:52 page is going to be really simple
9:55 with the page safe logout stack you'll
9:57 notice that there's actually zero
9:59 settings inside this stack
10:02 all it requires is is that you add any
10:04 button that you'd like
10:06 inside the stack and that button will be
10:09 used
10:10 as a logout now if you can also use
10:13 add a text link as well so any button
10:16 or link that is added to the log out
10:18 stack
10:19 will log the user out when it's clicked
10:23 now as i mentioned earlier we can use
10:25 page safe to unlock
10:27 multiple pages with the same login
10:32 so as we see in this demo if i go ahead
10:34 and try to go to page one
10:36 we'll see that that page is locked and
10:39 if i try to go to page two
10:41 that page is also locked and the same
10:44 thing with page three
10:47 however if i go ahead and enter the
10:49 correct login information
10:56 we'll now see that i can go to page two
11:00 and it didn't require my login and i can
11:03 also go to page one
11:04 and it does not require my login so i
11:08 can seamlessly go between these pages
11:11 without having to log in again now
11:14 obviously if i log
11:15 out it logs me out of
11:18 every single page
11:22 and if i try to visit any of these web
11:24 pages again it's not going to allow me
11:26 to because those pages are locked
11:29 so if we go back to our demo file we'll
11:31 see that this is really simple to
11:33 configure
11:34 it's all tied to the same page safe id
11:38 so if we look we're on multi-lock page 1
11:40 i set the page safe
11:42 id to be multi-lock and if i go to page
11:45 two
11:46 we'll see that the page safe id is also
11:49 set to be multi-lock
11:52 so again every page safe instance
11:54 throughout your entire site
11:56 that is tied to the same page safe id
12:00 is going to be linked to the same login
12:05 so if i wanted any of these pages to
12:07 have separate logins
12:09 i only need to make sure that the page
12:11 safe id
12:12 is different on each page
12:15 now to help make tying page safe stacks
12:19 between different pages together we
12:22 actually provide a global template for
12:25 page safe that can be
12:26 added to all your pages
12:30 so this way if you add the page safe
12:33 global template to
12:34 all your pages when you change the
12:37 settings on one
12:38 page it will change it for all of the
12:40 pages
12:42 this way you can make sure that the lock
12:44 pages have a uniform look
12:46 they have the same id the same password
12:49 and everything this makes things a lot
12:52 simpler
12:54 so there we have it everybody that is
12:56 page safe
12:57 as you see it's really simple to
12:59 implement but
13:01 very very powerful i hope that you use
13:04 it i hope that you love it
13:05 i hope that your users love it because i
13:08 didn't even show you how cool and how
13:10 fluid it works
13:11 on an iphone it's just really really
13:14 solid
13:14 i'm very excited about this stack i i
13:17 hope that it makes your life
13:18 easier and without further ado thanks
13:21 for watching
13:22 i hope you have a great day and i hope
13:24 you enjoy page safe
13:25 bye everybody
13:41 you"}]