diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/views/login.tsx')
-rw-r--r-- | sdnr/wt/odlux/framework/src/views/login.tsx | 79 |
1 files changed, 45 insertions, 34 deletions
diff --git a/sdnr/wt/odlux/framework/src/views/login.tsx b/sdnr/wt/odlux/framework/src/views/login.tsx index be1fb801f..53219facd 100644 --- a/sdnr/wt/odlux/framework/src/views/login.tsx +++ b/sdnr/wt/odlux/framework/src/views/login.tsx @@ -36,7 +36,7 @@ import connect, { Connect, IDispatcher } from '../flux/connect'; import authenticationService from '../services/authenticationService'; import { updateExternalLoginProviderAsyncActionCreator } from '../actions/loginProvider'; -import { UpdatePolicies, UpdateUser } from '../actions/authentication'; +import { loginUserAction, UpdatePolicies } from '../actions/authentication'; import { IApplicationStoreState } from '../store/applicationStore'; import { AuthPolicy, AuthToken, User } from '../models/authentication'; @@ -73,6 +73,20 @@ const styles = (theme: Theme) => createStyles({ submit: { marginTop: theme.spacing(3), }, + lineContainer:{ + width: '100%', + height: 10, + borderBottom: '1px solid grey', + textAlign: 'center', + marginTop:15, + marginBottom:5 + }, + thirdPartyDivider:{ + fontSize: 15, + backgroundColor: 'white', + padding: '0 10px', + color: 'grey' + } }); const mapProps = (state: IApplicationStoreState) => ({ @@ -85,7 +99,7 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ updateExternalProviders: () => dispatcher.dispatch(updateExternalLoginProviderAsyncActionCreator()), updateAuthentication: (token: AuthToken | null) => { const user = token && new User(token) || undefined; - dispatcher.dispatch(new UpdateUser(user)); + dispatcher.dispatch(loginUserAction(user)); }, updatePolicies: (policies?: AuthPolicy[]) => { return dispatcher.dispatch(new UpdatePolicies(policies)); @@ -138,6 +152,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> { render(): JSX.Element { const { classes } = this.props; + const areProvidersAvailable = this.props.externalLoginProviders && this.props.externalLoginProviders.length > 0; return ( <> <CssBaseline /> @@ -148,6 +163,32 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> { </Avatar> <Typography variant="caption">Sign in</Typography> <form className={classes.form}> + + + {areProvidersAvailable && + <> + { + this.props.externalLoginProviders!.map((provider, index) => ( + <Button + aria-controls="externalLogin" + aria-label={"external-login-identity-provider-" + (index + 1)} + aria-haspopup="true" + fullWidth + variant="contained" + color="primary" + className={classes.submit} onClick={() => { window.location = provider.loginUrl as any; }}> + {provider.title} + </Button>)) + } + + <div className={classes.lineContainer}> + <span className={classes.thirdPartyDivider}> + OR + </span> + </div> + </> + } + <FormControl margin="normal" required fullWidth> <InputLabel htmlFor="username">Username</InputLabel> <Input id="username" name="username" autoComplete="username" autoFocus @@ -178,10 +219,6 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> { onChange={event => { this.setState({ scope: event.target.value }) }} /> </FormControl> - <FormControlLabel - control={<Checkbox value="remember" color="secondary" />} - label="Remember me" - /> <Button aria-label="login-button" type="submit" @@ -193,34 +230,8 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> { onClick={this.onSignIn} > Sign in - </Button> - { this.props.externalLoginProviders && this.props.externalLoginProviders.length > 0 - ? - [ - <Button - aria-controls="externalLogin" - aria-haspopup="true" - fullWidth - variant="contained" - color="primary" - className={classes.submit} onClick={(ev) => { this.setExternalProviderAnchor(ev.currentTarget); }}> - Use external Login - </Button>, - <Menu - anchorEl={this.state.externalProviderAnchor} - keepMounted - open={Boolean(this.state.externalProviderAnchor)} - onClose={() => { this.setExternalProviderAnchor(null); }} - > - { - this.props.externalLoginProviders.map((provider) => ( - <MenuItem key={provider.id} onClick={() => { window.location = provider.loginUrl as any; } }>{ provider.title} </MenuItem> - )) - } - </Menu> - ] - : null - } + </Button> + </form> {this.state.message && <Alert severity="error">{this.state.message}</Alert>} </Paper> |