0

Hi Martin Crawford,

Create a page with login page template and allow anonymous users and create a user role 'Anonymous' and make this as the anonymous. and set the newly created login page as default page for this role. Now you Have a custom login Page now make changes in this page as per your requirement.

Thankyou.

answered 2024-06-12

0

Hi, Martin Crawford

 

1. Create a Custom Login PageFirst, you need to create a custom login page in your Mendix application.

Open Mendix Studio Pro.Create a new page (Right-click on the Pages folder and select "Add Page")

.Select a Blank Page template and name it (e.g., CustomLoginPage).

 

2. Add a Login FormAdd the login form to your custom page.

Drag and drop a Data View onto the page.

Set the Data Source of the Data View to "Microflow" and select the Account entity.

Inside the Data View, drag and drop the necessary input fields (e.g., Username, Password) and a Login button.

 

3. Add the Duotone Picture and AnimationTo replicate the duotone picture and animation, you need to add custom CSS and potentially some JavaScript.

 

Adding the Duotone PictureDrag and drop an Image widget onto the page. Set the image source to your desired duotone image.

You can add the image to your project's resources.

Customizing with CSS Open the styles folder in your Mendix project.

Edit the main.scss file (or create a new CSS file if you prefer).

Add the following CSS to style the login page and apply the duotone effect:

 

css code:

Custom Login Page Styles

 

.page-custom-login-page {   

display: flex;   

justify-content: center;   

align-items: center;   

height: 100vh;   

background: linear-gradient(to right, rgba(34,193,195,1), rgba(253,187,45,1));   

overflow: hidden;

}

 

.login-form-container {   

background-color: rgba(255, 255, 255, 0.8);   

padding: 20px;   

border-radius: 10px;   

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);   

z-index: 2;

}

.duotone-image {   

position: absolute;   

top: 0;   

left: 0;   

width: 100%;   

height: 100%;   

object-fit: cover;   

filter: url('#duotone-filter');   

z-index: 1;

}

#duotone-filter {   

color-interpolation-filters: sRGB;

}

/* Background animation */

@keyframes slide {   

0% { transform: translateX(0%);

}   

50% {

transform: translateX(-50%);

}   

100% {

transform: translateX(0%);

}

}

.duotone-image {   

animation: slide 20s infinite;

}

 

4. Applying Classes in Mendix Studio ProSelect the Image widget and set its class to duotone-image.Select the container around your login form and set its class to login-form-container.Ensure the page has the class page-custom-login-page.

 

 

5. Set the Custom Login PageFinally, set your custom page as the default login page:

Go to Project Settings.Navigate to the Runtime tab.Set the Default login page to your CustomLoginPage.

 

Martin Crawford Follow these steps, and maybe your problem will be solved and let me know.

answered 2024-06-12