ory / elements

Preflight checklist

I could not find a solution in the existing issues, docs, nor discussions.
I agree to follow this project's Code of Conduct.
I have read and am following this repository's Contribution Guidelines.
This issue affects my Ory Cloud project.
I have joined the Ory Community Slack.
I am signed up to the Ory Security Patch Newsletter.

Describe your problem

If you have a user registering on your site you want to make sure they read and understood the terms and read the privacy policy. So I am missing a way to specify a link to either of them and have the elements create a checkbox with some text? :)
Maybe I have to build my own UI then, but I like the seamless integration with Ory Elements and the components, so I would prefer a "native" solution.
It can also be a legal issue.

Describe your ideal solution

Props to specify the link for privacy policy and terms and conditions.

additionalProps: {
  privacyPolicyURL: "privacy",
  termsURL: "terms.pdf",
},

Workarounds or alternatives

Building my own UI...

Version

v0.0.1-alpha.27

Additional Context

Is it possible to save that information in Ory then? Can I create a schema for kratos that holds the "y" for "readPrivacyPolicy" or something? It is for legal reasons.

Hi @DrBu7cher

I think we could probably add an additional field to the props for the checkbox to accommodate this

elements/src/react-components/ory/helpers/node.tsx

Lines 181 to 195 in 9713065

    
           return ( 
        
             <Checkbox 
        
               className={className} 
        
               helperMessage={ 
        
                 <NodeMessages nodes={[node]} gap={4} textPosition={"start"} /> 
        
               } 
        
               label={getNodeLabel(node)} 
        
               name={attrs.name} 
        
               required={attrs.required} 
        
               defaultValue={attrs.value} 
        
               disabled={attrs.disabled} 
        
               defaultChecked={Boolean(attrs.value)} 
        
               dataTestid={`node/input/${attrs.name}`} 
        
             /> 
        
           )

But this is also quite nested... Maybe a better solution would be to detect URLs inside the label and have it wrapped by a link?

You can then specify the link inside the Ory Schema when adding the Terms of Service and Privacy Policy checkbox items?

My question aims at the UserAuthCard - can I add my own Checkbox here? Then this issue can be closed, because it can be worked around easily.

Or how can I add my own „generic stuff“ between the last field and the button anyway?

Should the children field be for that? It is not documented and I couldn’t find, where it is used/consumed.

elements/src/react-components/ory/user-auth-card.tsx

Line 69 in 6616472

children?: string

No, you cannot adjust the Checkbox currently through the UserAuthCard props. Due to the reasons given above.

We can maybe expose a way to override the elements used within UserAuthCard or props for specific things like labels.

It is a bit tricky though since the elements get mapped dynamically based on data provided by Ory Kratos. So overriding a Checkbox for example will override all Checkboxes being mapped by Ory Elements based on data given by Ory Kratos. That's why this problem requires a bit of thought.

/cc @mszekiel

Just for me, since this might give me a way to work around this issue (without a link in the checkbox-label): How can I set up Kratos to show checkboxes in the UserAuthCard then?
BR

You can add a boolean trait to your Identity Schema which will tell Ory Elements to render the checkbox for you.

{
...
"properties": {
    "newsletter": {
        "type": "boolean",
        "title": "Newsletter subscription"
    }
  }
...
}

https://www.ory.sh/docs/kratos/manage-identities/identity-schema#example-with-name-and-newsletter-opt-in

Thank you very much!

No, you cannot adjust the Checkbox currently through the UserAuthCard props. Due to the reasons given above.

We can maybe expose a way to override the elements used within UserAuthCard or props for specific things like labels.

It is a bit tricky though since the elements get mapped dynamically based on data provided by Ory Kratos. So overriding a Checkbox for example will override all Checkboxes being mapped by Ory Elements based on data given by Ory Kratos. That's why this problem requires a bit of thought.

/cc @mszekiel

What is the children field for then?

And I think overriding could happen based on trait/field name? It would maybe even enable localization? Also, how do I specify the label for the password field? The other labels I can change by editing the kratos schema, but what about password label?

What is the children field for then?

Currently nothing. The intent was to have the form customization through children, but the plan was changed while this was being implemented - so it's just code that wasn't deleted...

You are correct that you can do overriding with trait/field names using the identity schema, but it will only do this partially and not everything afaik is used from the schema e.g. "Sign in with GitHub" is a string constructed within Kratos. There is a discussion about localization here
#64

Hello contributors!

I am marking this issue as stale as it has not received any engagement from the community or maintainers for a year. That does not imply that the issue has no merit! If you feel strongly about this issue

open a PR referencing and resolving the issue;
leave a comment on it and discuss ideas on how you could contribute towards resolving it;
leave a comment and describe in detail why this issue is critical for your use case;
open a new issue with updated details and a plan for resolving the issue.

Throughout its lifetime, Ory has received over 10.000 issues and PRs. To sustain that growth, we need to prioritize and focus on issues that are important to the community. A good indication of importance, and thus priority, is activity on a topic.

Unfortunately, burnout has become a topic of concern amongst open-source projects.

It can lead to severe personal and health issues as well as opening catastrophic attack vectors.

The motivation for this automation is to help prioritize issues in the backlog and not ignore, reject, or belittle anyone.

If this issue was marked as stale erroneously you can exempt it by adding the backlog label, assigning someone, or setting a milestone for it.

Thank you for your understanding and to anyone who participated in the conversation! And as written above, please do participate in the conversation if this topic is important to you!

Thank you 🙏✌️

	return (
	<Checkbox
	className={className}
	helperMessage={
	<NodeMessages nodes={[node]} gap={4} textPosition={"start"} />
	}
	label={getNodeLabel(node)}
	name={attrs.name}
	required={attrs.required}
	defaultValue={attrs.value}
	disabled={attrs.disabled}
	defaultChecked={Boolean(attrs.value)}
	dataTestid={`node/input/${attrs.name}`}
	/>
	)