This week in Orchard - 12/13/2019
Improving user management by having a way to log in users without password during external login and be able to disable users in Orchard Core. Brand new look for the Flow editor UI and fix the accessibility issues in your Orchard Core site using Accessibility Insights for Web! Oh, and our improved Avatars Orchard module is waiting for you in our post!
On Orchard Core
External Login registration without password
Navigate to Login Settings page by heading to Security -> Settings -> Login from the admin UI. Here you will see a brand new page with several options. Let's see what are these for!
- Use external provider for login: if only one external provider is defined and this option is checked, the external provider is automatically challenged.
- Disable local password login: prevents users from logging in with their local credentials. Only external providers are displayed in the login screen unless the above option is set.
- Use a script to set user roles based on external provider claims: if checked, the above handlers are not invoked and instead the script executes. Here we have to mention the
IExternalLoginEventHandlerinterface, with theUpdateRolesandGenerateUserNamemethods. Any module can define logic to perform the mapping and generate usernames. And take a look at theUserLoggedInEventworkflow event too! The event is triggered after the above logic and provides the username, the roles, the login provider and the external claims as Input. If the login was for the local users, the login provider and the external claims are null.
If you enable the Users Registration module you can find a Registration Settings page under Security -> Settings -> Registration. Let's see what you can set on this page!
- Configure users registration: define if new users are allowed to register.
- Use a script to generate userName based on external provider claims: if not selected, when a new user is registering, the registered
IExternalLoginEventHandlersare invoked in order to provide a username. If more than one handlers are defined, the first one wins. If you use a script to generate the userName, the above handlers are not triggered. - Do not ask username: if checked, no user name is requested in the registration form.
- Do not ask email address: if checked, no email address is requested in the registration form.
- Do not create local password: if checked, no password is requested in the registration form.
If all of the above is true, no registration form is displayed to the user.
Disable a user account
Now you have the ability to disable a user account. When you navigate to Security -> Users and hit Edit near one of the users, you will see a new Is enabled? switch that you can uncheck to disable the given account.
Now when you list the users you will see a little red badge with a Disabled text near the user that is disabled.
But what that really mean? With a disabled account, users can' log in to the site. If they want to log in they will face the following error message.
New blog post: Orchard Core, Open ID, and GraphQL
Sipke Schoorstra published a new blog post about how to invoke Orchard Core’s GraphQL API endpoint using Postman. His objectives are to:
- Expose a GraphQL endpoint from Orchard to allow content querying.
- Invoke the GraphQL endpoint from a client application. This could be plain vanilla JS, Angular, React, Blazor, and so on. He's just gonna use Postman to try out the GraphQL endpoint. Once that works, he can do it from any other client application.
Read his post for a long and interesting journey to learn about these features!
New Orchard Core site
Borne out of a passion for travel, and a belief that bridging cultures can only happen with global mobility, flyEgypt started operations in 2015 as a small but ambitious charter airline. Their website is now live, including a comprehensive help center and online booking and payment functionality. And they are using Orchard Core!
If you are interested in more websites using Orchard and Orchard Core, don't forget to visit Show Orchard. Show Orchard is a website for showing representative Orchard CMS (and now Orchard Core) websites all around the internet. It was started by Ryan Drew Burnett, but since he doesn't work with Orchard anymore, as announced earlier it is now maintained by our team at Lombiq Technologies.
Demos
Flow editor UI improvements
Set up your site using the Blog recipe. This recipe contains a Page content type with an attached Flow Part. Let's create a new page using the admin UI. Here you will see a brand new UI when editing the Flow Part of the page. You will see a blue line with a plus sign and an arrow of the center of it. Clicking on these you can add new widgets to your Flow Part by choosing them from the context menu. If you hover over your newly added widget you can set the alignment and the percentage of the item just like you can do it before. If you add a new widget that can contain other items (for example a Container) you can hover over the body of the widget and use the blue line inside it to populate it with other new content!
You can also watch a great detailed demo on YouTube about the Flow editor UI improvements.
Find and fix the accessibility issues in your Orchard Core site using Accessibility Insights for Web
Accessibility Insights for Web is an extension for Chrome and Microsoft Edge Insider that helps developers find and fix accessibility issues in web apps and sites. The tool supports two primary scenarios:
- FastPass is a lightweight, two-step process that helps developers identify common, high-impact accessibility issues in less than five minutes.
- Automated checks: the tool automatically checks for compliance with approximately 50 accessibility requirements.
- Tab stops: the tool provides clear instructions and a visual helper that makes it easy to identify critical accessibility issues related to keyboard access, such as missing tab stops, keyboard traps, and incorrect tab order.
- Assessment allows anyone with HTML skills to verify that a web app or web site is compliant with Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.
- Automated checks: the tool automatically checks for compliance with approximately 50 accessibility requirements.
- Manual tests: the tool provides step-by-step instructions, examples, and how-to-fix guidance for approximately 20 tests; many tests are "assisted", which means that the tool identifies the test instances or provides a visual helper.
If you add this extension to Google Chrome, you will see a new dark blue heart icon with a magnifying glass at the right top corner of your browser. If you click on it and select the FastPass option, you can check for common issues of accessibility. If you try it on the admin page, you will see some red exclamation marks that show you some common accessibility problems such as missing or invalid properties.
For example, you could see a message that Buttons must have a discernible text. If you click on one of those red exclamation marks you will get a longer explanation of what is the issue with the given item. It says fix one of the following from the list and there are many ways to fix the issue.
The issue is that we have a little expand here, which is a button without a text. If there is a button without a text, people with disabilities would not be able to see what the button does, so we need to fix that. Let's use the aria-label attribute to fix the issue.
<button class="btn-nostyle" aria-label="expand"><span class="collapse-icon">...</span></button>
By going through these failures you can detect and fix the accessibility problems on your site. You can also watch a great detailed demo on YouTube about how to use the Accessibility Insight for Web in your Orchard Core application.
On Lombiq
The first Orchard Nuggets post
Instead of lengthy tutorials short question-based blog posts on Orchard Dojo about solving specific Orchard problems can be very useful for community members as a learning resource. An Orchard Nuggets blogpost's topic is a single question on how to achieve something in Orchard (be it 1.x or Core) and it focuses solely on an answer to this question. The topic can be not just about development questions but user-facing features too. In our first post, we wrote about how to register your content part in the service container. We have many topics to write about but we are happy if you'd have questions about Orchard and Orchard Core that we can write about!
Improving our Avatars Orchard module
The aim of our Avatars Orchard module is to bring avatars to the platform. This week we have added two new features to this module:
- Piedone.Avatars.Blogs: adds Avatars to Blog Posts in Detail view.
- Piedone.Avatars.Comments: adds Avatars to comments from logged in users.
If you enable both of them, the Avatar Part will automatically be attached to the Blog Post and Comment content types to present the avatar of the author user if any. We updated this module in Orchard Dojo too, if you check the screen of the first Orchard Nuggets post you will now see the name of the author and the avatar of the author under the title of the blog post. Thanks for the great contribution to Gábor Pór from Lombiq Technologies!
Orchard Dojo Newsletter
Now we have 108 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!