Transcript

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