amazon-cognito-auth-js icon indicating copy to clipboard operation
amazon-cognito-auth-js copied to clipboard

Login Screen CSS

Open mymattcarroll opened this issue 7 years ago • 6 comments

Not sure if this is the right place to be putting these issues, or if we should be going straight to AWS Support, anyway here goes...

We have been attempting to make the login screen look a little bit more like our application (which is using AngularJS Material) but have run into a few issues.

As you can see from the screen shot below, we have been able to hide the <label> elements on the signin and signup screens

image

Although, the <label>s on the reset password screen does not have the same classes on the <label> elements. Also the inputs do not have placeholders like the signin and signup screens

image

Would it be possible to upload a favicon.ico file as all screens have an empty favicon which does not look very professional.

We would also like to change the background colour of the screen from the murky grey. There does not seem to be any options to change CSS outside of the modal.

Lastly, we would like all button text to be in uppercase.

mymattcarroll avatar Apr 25 '18 02:04 mymattcarroll

I think theese are the properties that you can change https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-ui-customization.html

jollsker avatar Apr 27 '18 08:04 jollsker

Hi, have you had an answer to your issues by any chance. Hitting the same problems. Cheers

tonyjayfunk avatar Apr 30 '19 08:04 tonyjayfunk

We would also like to change the background colour of the screen from the murky grey. There does not seem to be any options to change CSS outside of the modal.

@mymattcarroll have you had any luck with changing the gray body background?

Similarly, I’d love to be able to do something like:

body { background: #fff; }
.modal-content { box-shadow: none; }

mrcoles avatar Jul 14 '19 17:07 mrcoles

Was only able to update it using the API directly, not via the console.

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html#setUICustomization-property

mymattcarroll avatar Jul 14 '19 23:07 mymattcarroll

Yeah, that works for some things, but body is rejected (and so is .modal-content).

  message: 'The CSS class body is not in the list of allowed classes.',
  code: 'InvalidParameterException',

mrcoles avatar Jul 15 '19 20:07 mrcoles

Would also love to have this capability.

shortstack avatar Sep 13 '19 16:09 shortstack