How to change UI component on AWS amplify Authenticator ui-react - reactjs

I am using Amazon Cognito for my registration page with AWS Amplify.
Everything is up and running as expected but, my only issue now is how to override the CSS component.
I can modify from the console but when copy and paste on my style component the code does not work.
Basically what I am trying to achieve is to modify the order of the CTA at the bottom of the sign-in and sign-up page and try to get them to display in a column rather than inline but because Amazon is using 'slot' I am struggling to find the solution.
Does anyone experienced the same issue or could give me some tips about how to force the UI component and style as my client wants?
Thanks

Related

Google Form Editor in iFrame?

I am currently working on a project that exposes Google Docs and Forms to a React frontend using Oauth and iFrames. I am able to embed doc, sheet and slide editors with no issues, but no luck with Google forms (I assume it may not permit editing when embeded), so I have come here to ask if anyone has had any luck doing this.
Whilst it is trivial to embed a Google form itself, I am not able to find a way to access the Google form editor within an iframe as it simply throws a 403. For docs I create an iframe for a given document and suffix the following query params: ?embedded=true&authuser=<EMAIL_ADDRESS>&oauth_token=<OAUTH2_TOKEN>. however this does not work for forms.
Is anyone aware of any work around to access the form editor via iframe? otherwise I will have to create a frontend wrapper for the forms API which is not ideal.

How to make a site with, WordPress handling the UI and ReactJS handling the Front-End logic

ReactJS allows us to create user interfaces. Word Press allows us to build websites, whose buttons, list, color, styles can be customized, with a minimal(to no) knowledge in coding.
I have a web site up and running with ReactJS, where the backend is done in NodeJS and ExpressJS.
But the UI is just a basic one.
I want to build a new site where WordPress handles the UI, like the color, style, size etc of components like Button, Tables, List, headings etc and a person with minimal-to no knowldge in coding should be able to drag and drop or customize the website UI, and the ReactJS should handle all the front-end logic and the backend would be handled by NodeJS and ExpressJS.
Is it possible to do so?? Which frameword or word-press plugin should I use. How can I achieve this.
Good day, Hari.
I can try to help you.
1)Wordpress has now Gutenberg block editor withs use React to create UI logic.
So its very easy to create buttons with colors and style the text in 3 clicks.
At the backend we still have wordpress PHP scripts.
2)Another solution is that Wordpress allow to include your React code to your theme with webpack file
please follow this link to see Demo theme
https://github.com/zgordon/twentytwenty-react/
3)Next solution is Frontify its a framework to connect Wordpress + React
https://frontity.org/
The Let me know if it helps you.
Thanks

is it possible to create react app and deploy in sharepoint online without creating as web part?

has anyone worked with react and sharepoint, please tell me, if there any reference for creating a react app and deploy in sharepoint online directly, many of the references are creating react app as web part, but I cant find what I looking for. please help
It actually depends on where you want your application to show up in the SharePoint.
In addition to the WebParts, there is AppCustomizer option that allows you to show your app in one dedicated the placeholder of the sharepoint site (top or bottom):
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions
Other that, there is "single page part" option that allows you app to occupy all the space on the page, and to be the only thing the user gets basically:
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh

Microsoft Teams modify Save button in Connector setup page

I am currently working on the setup page for my custom MS Teams Connector.
For inspiration, I was looking into other companies and one particular thing caught my attention.
Teams usually has at the bottom 2 buttons, like here in my setup page:
I have no Problem communicating with them using the #microsoft/teams-js client SKD and could make my page work like it is now. But I got curious how to do it with custom buttons like other Companies.
For example Trello:
Like you can see they moved the buttons up and also have a login button.
I also need to add authentication form my Connector, so I was wondering if its possible to archive a similar layout for my Connector.
For the Setup page I am using web app created with create react app
So my questions are:
Is this possible using react?
If yes how is it done?
I could not find much documentation regarding this topic.
The behavior is by design. Quite a while back we started giving developers more control in the tab configuration flow and allow them to render their own button within the iframe. Everything within that task module is now controlled by the app.

After i create a APK to PWA i see toolbar of browser

I have a problem with my first PWA.
I have created one with reactjs and configured good manifest.
I follow step by step google guide.
PWA, works perfectly, and i see "add to home button".
After QA i wanted to publish it in store.
I used https://appmaker.xyz/pwa-to-apk.
Now i have app publish in the store but when i open it, i see a browser toolbar and i can't use it as a native app.
Someone can help me?
How about using TWA (Trusted Web Activity)?
Using Trusted Web Activities
This can be achieved by proving that the app and the web trust each other.
If you can prove it, you can prevent the browser toolbar from being displayed.
I'm sorry if you don't get the answer you want.

Resources