UI Usability Fixes

* Fallback to sessionStorage if localStorage is absent
* Disable auto-correct and auto-capitalize on username field (SignIn)
* Fix SignIn component name
* Improve support for low screen widths

Co-authored-by: kasedy <kasedy@gmail.com>
This commit is contained in:
rjwats
2020-05-16 12:39:18 +01:00
committed by GitHub
parent a1f4e57a21
commit 7d3bbf4240
6 changed files with 84 additions and 99 deletions

View File

@ -39,17 +39,17 @@ const styles = (theme: Theme) => createStyles({
}
});
type SignInPageProps = WithSnackbarProps & WithStyles<typeof styles> & AuthenticationContextProps;
type SignInProps = WithSnackbarProps & WithStyles<typeof styles> & AuthenticationContextProps;
interface SignInPageState {
interface SignInState {
username: string,
password: string,
processing: boolean
}
class SignInPage extends Component<SignInPageProps, SignInPageState> {
class SignIn extends Component<SignInProps, SignInState> {
constructor(props: SignInPageProps) {
constructor(props: SignInProps) {
super(props);
this.state = {
username: '',
@ -115,6 +115,10 @@ class SignInPage extends Component<SignInPageProps, SignInPageState> {
value={username}
onChange={this.updateInputElement}
margin="normal"
inputProps={{
autoCapitalize: "none",
autoCorrect: "off",
}}
/>
<PasswordValidator
disabled={processing}
@ -140,4 +144,4 @@ class SignInPage extends Component<SignInPageProps, SignInPageState> {
}
export default withAuthenticationContext(withSnackbar(withStyles(styles)(SignInPage)));
export default withAuthenticationContext(withSnackbar(withStyles(styles)(SignIn)));