Custom Login Page

We all can agree having a Custom Login Page can really create an amazing UI experience. But the major drawbacks these custom login pages can cause is security.

Not having a strong password and no email validation can really end up with junks records and breaches.

I created a solution just for that. Custom login page that can perform strong password checks and email validation to filter junks.

Home Screen 

1. First add some HTML controls (here I'm using 2) to get the shady effect. 

First HTML control- 

"<div style ='

height:767px;

width:868px;

background:linear-gradient(90deg, rgba(110,210,249,0.4842670344504989) 0%, rgba(101,126,144,0.20415498963257173) 100%);

'></div>

Second HTML control-

"<div style ='

height:767px;

width:868px;

background:linear-gradient(90deg, rgba(250,171,141,1) 0%, rgba(209,159,239,0.20415498963257173) 100%);

box-shadow: -44px 2px 8px 0px rgb(108,240,111);

'></div>"

2. Add 2 button one that direct you to screen where new users can be added other to from where existing users can login. (Navigate to respective screens).

 Your screen should look like this.

     

New User

1. Create SharePoint list having 2 columns. One for Email ID and other for Password.

2. Then create a form and add that SharePoint list as data source.

3. Change the required field to yes.(making it mandatory).

4. Since we are using a form type just create a button and make the "OnSelect" as SubmitForm. Making the OnReset and OnFailure as true for form properties.

5. You can use the same Password field validation that I'm gonna talk in Next screen here as well. To make sure password is strong.

Existing User

1. Add 2 label and name them as Email and Password.

2. Add 2 input and name them as PasswordInput and EmailInput.(You can name them whatever you want).

3. Create a button. Now we have to specify the OnSelect property of it.

So first to deal with Empty email and Password I used-

If(IsBlank(EmailInput),Notify("Email is required"));

If(IsBlank(PasswordInput),Notify("Password is required"));

Second to deal with Incorrect Email-

If(IsMatch(EmailInput.Text,"[@.com.in]",Contains),0,Notify("Not a valid Email"));

Email is incorrect when it doesn't have any domain.

Third to deal with Password. For a password to be strong it should have Small, Capital alphabets, numbers, special characters.-

If(IsMatch(PasswordInput.Text,"[0-9]",Contains),0,Notify("Password must contains Numbers"));

If(IsMatch(PasswordInput.Text,"[A-Z]",Contains),0,Notify("Password must contains Capital Alphabets"));

If(IsMatch(PasswordInput.Text,"[a-z]",Contains),0,Notify("Password must contains Small Alphabets"));

If(IsMatch(PasswordInput.Text,"[$&+?@#^*()%!]",Contains),0,Notify("Password must contains Special Characters"));

These conditions will check for every possible condition and pops a message when something is not satisfying.

Then we finally have to check if password and email matches the input. If yes then direct user to the desired screen. If no then pops error.-

If(LookUp(Table1,'Email Id'=EmailInput.Text && Password = PasswordInput.Text,true),Navigate(Screen4),Notify("Email or Password is not correct",NotificationType.Error));

I tried to explain all the controls I'm using here. Do try it out and let me know how it turned out!!

Thanks for staying and reading all the way. 

Feel free to use the comment section and share your reviews.