Implement the SignInAndUpTheme

[rishabhpoddar]

• import { SignInAndUpTheme } from "supertokens-auth-react/recipe/emailpassword"
• There should be two sub themes in here: SignUpTheme and SignInTheme.
• Themes should use a ThemeProvider which can be used to overwrite the default theme based on the passed props.

[mufassirkazi]

Sign Up UI

Sign Up form with no Terms and condition checkbox (524 px width of white container)

• Default sign up form: https://zpl.io/V0K9Reo
• Input write state: https://zpl.io/agw8P8D
• Email Id error: https://zpl.io/VKrGK4R
• Password field error: https://zpl.io/VxEmRk3
• Something went wrong: https://zpl.io/VY3YGKM
• Required state: https://zpl.io/2yNk8wp

Sign Up form with Terms and condition checkbox (524 px width of white container)

• Default sign up form: https://zpl.io/aNeWMev
• Checkbox ticked: https://zpl.io/bWe50ln
• Email Id error: https://zpl.io/aReA7ln
• Password field error: https://zpl.io/bLeXE6d
• Checkbox unchecked error: https://zpl.io/V07A33l

Sign Up form with no Terms and condition checkbox (420 px width of white container)

• Default sign up form: https://zpl.io/anwod5x
• Input write state: https://zpl.io/a7rw5PR
• Email Id error: https://zpl.io/bJrE9LE
• Password field error: https://zpl.io/VY3YGME

Sign Up form with Terms and condition checkbox (420 px width of white container)

• Default sign up form: https://zpl.io/VDL8wmw
• Input write state: https://zpl.io/VKeJvBX
• Email Id error: https://zpl.io/aXepJyE
• Password field error: https://zpl.io/a3LGOPx
• Checkbox unchecked error: https://zpl.io/a8LdMMg

Sign In UI

Sign In form with Terms and condition checkbox (524 px width of white container)

• Default Sign in form: https://zpl.io/bALPQ8e
• Correct state: https://zpl.io/2EL7pOv
• Incorrect combination state: https://zpl.io/aXepJQP
• Something went wrong state: https://zpl.io/aw8GX7K

Sign In form with Terms and condition checkbox (420 px width of white container)

• Sign in form: https://zpl.io/V1XgdJ4
• Correct state: https://zpl.io/bovle1k
• Incorrect combination state: https://zpl.io/amoJNDe

Loading Screen

• Loading screen (524 px width of white container): https://zpl.io/V4LjmDM
• Loading screen (420 px width of white container): https://zpl.io/bJeBm3x

Sign out State

• Successful sign in/sign up with logout button - https://zpl.io/bJeP3NK

Notes

• The Sign Up and Sign In UI has a white container which is 524 pixels wide. This container is flexible in the sense that the width of this container can be reduced to as small as 420 pixels without affecting other elements inside it. Once the container width goes below 420 px, the UI should change to that of the 420 pixels one which was specifically designed.
• The new 420 pixels white container is again flexible till a width of 320 pixels. 320 pixels is the smallest size we support. A user should have minimum 320 pixels width space for the login widget on his website.
• We have correct states i.e orange ticks if that input field is properly filled. The 'Email Id' field gets an orange tick only after the user has provided the correct email id && clicks anywhere outside the input field.
• The password field gets the orange tick when the user types in the password and our system detects that the condition is true i.e (8 characters and 1 number). As soon as the condition is true, there should be an orange tick even if the user continues to type.
• In the error states, as soon as the user changes, adds or deletes even one character, the red warning icon, red error message and the red border should disappear.
• The UI has been designed keeping our brand color i.e #FF9933 (orange) in mind. If a user changes this color, the new color will be reflected in all the places where the previous color was displayed.
• For the error state, the primary color is #FF1717. The secondary color is #FFEBEB which is used in the 'Incorrect combination state' and 'Something went wrong state' to support the error states as a background color. A user can change these colors.
• By default, the terms and conditions checkbox should be checked.
• Required state is defined as the input field that needs to be filled to continue further in the sign up process. If the sign up form has only email id and password input field, then we don't have the "*" which signifies required. We also will not have the required field if all the fields in the sign up form are marked as required by the person creating the sign up form. In essence, the required state will only be available if the number of fields are more than 2 (which includes email and password) and among the total number of fields atleast one field is a non-required field.

[kant01ne]

Notes on using default browser messages:
Source
TL;DR Not doing it.

• Styling is editable but different in all browsers, making it hard to keep consistency.
• Impossible to overwrite messages
• Temporary messages, focusing in the message will make it disappear.

[mufassirkazi]

Updated comment above to include design of successful sign in/ sign up with sign out functionality

[mufassirkazi]

@NkxxkN I have added the "Required state" design in the main comment above along with the conditions under which it should be rendered in the last point of notes.

[rishabhpoddar]

@mufassirkazi , you can change the design back to removing the checkbox for privacy policy and ToU.. instead, you can say "By signing up, you agree to..."

Sorry about that miscommunication eariler. The above also seems to be OK from a GDPR point of view since a lot of large, global companies do that

[mufassirkazi]

No problem. @NkxxkN I updated the designs again and the designs are listed under the headers "Sign Up form with no Terms and condition checkbox (524 px width of white container)" and "Sign Up form with no Terms and condition checkbox (420 px width of white container)" resp.

[rishabhpoddar]

@mufassirkazi are we sure we want to use orange as the default theme? As opposed to a more neutral colour like blue?

• Pro: Orange is our brand colour.. so over time, high chances of brand recognition
• Con: I think most people would want to change orange.

I prefer if we change it to a more neutral colour. But we can also do this later.

[mufassirkazi]

Let's keep orange now. Even Auth0 keeps their brand color.
Agreed, that people will want to change the orange, but then again, there is no one one color that is right. So better to use the pro that we have.

[kant01ne]

So at the moment overriding css is pretty straightforward which is nice! But we don't have a good way to override the "orange" color everywhere (In the button, the input focus state and in the valid email check image).

It can be done by overriding each properties in the EmailPassword.init({style: {...}}) but if you use another theme, you would have to duplicate your changes without knowing if you replaced all the colors... That seems to be a lot of work for someone who is allergic to orange 😄

Should we allow to override some CSS properties in SuperTokens.init() directly? That would need to be documented but we can make it pretty simple:

Default palette:

SuperTokens.init({
  appInfo: {...},
  palette: {
    colors: {
        background: "white",
        inputBackground: "#f2f2f2",
        primary: "#ff9b33",
        secondary: "#656565",
        link: "#0076ff",
        error: "#ff1717",
        textPrimary: "#222222"
    },
    fonts: {
        size: [14, 16, 28]
    }
  }
}

Override just the orange color:

SuperTokens.init({
  appInfo: {...},
  palette: {
    colors: {
        primary: "blue"
    }
  }
}

@rishabhpoddar

[rishabhpoddar]

@NkxxkN . We should not have this in the supertokens.init level. We should have this in the emailpassword.init level. If the user specifies this and also the css (and they clash), then the CSS should be taken. So the priority is:

Our default CSS is lower than palette is lower than their provided CSS in style prop

In terms of what we allow them to change via this palette object:

• Colours:
  • primary - cool
  • secondary - this refers to which colours?
  • background - refers to what?
  • link - this refers to the sign up and forgot password link? Are they not two different colours by defaukt?
  • error - cool
  • textPrimary - can we change this to be called text?
• fonts:
  • Not sure if this is needed right now.

[rishabhpoddar]

@mufassirkazi please discuss the above with @NkxxkN

[kant01ne]

We should not have this in the supertokens.init level. We should have this in the emailpassword.init level.

Agreed

Our default CSS is lower than palette is lower than their provided CSS in style prop

So the default CSS is created with the help palette. The role of the palette is to have a centralised place for generic values that are used in multiple places in the css. Example of the orange colour above which is injected in multiple CSS properties.

The default CSS (generated with the palette - provided by the customer or not) can be overwritten by the CSS provided by the customer.

colors: {
        background: "white"
        inputBackground: "#f2f2f2",
        primary: "#ff9b33",
        error: "#ff1717",
        textPrimary: "#222222",
        textSecondary: "#656565",
        textLink: "#0076ff"
    },

    fonts: {
        size: [14, 16, 28]
    }
};

Questions: @mufassirkazi

• Do we want to decouple textPrimary? i.e. changing the title color changes the label colors too. Do we need to introduce a "title" color?

• Do we want to let users change font size from the palette or directly from overriding the css?

• Anything else that should be in the palette? or that should be removed?

[mufassirkazi]

@NkxxkN

• Please introduce a "title" color. Let the user have the ability to have different colors for the "Sign in" text and the label text. By default they should have the same color

• Users can change font size from overriding the css

• Rest, everything seems fine