From ea4214b550d072ace9050f53f1b71e03d091e56c Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Wed, 13 Dec 2017 15:45:48 +0100 Subject: [PATCH] [SSO] Small UI improvements --- common.js | 5 ++ components/User/SSO.js | 100 ++++++++++++++++++------- components/User/SelectInstanceModal.js | 6 +- stores/SSOStore.js | 1 + 4 files changed, 84 insertions(+), 28 deletions(-) diff --git a/common.js b/common.js index d91d974bd..a54adb2bc 100644 --- a/common.js +++ b/common.js @@ -127,5 +127,10 @@ export default { return false; } return true; + }, + + isEmailAddress: (email) => { + var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + return re.test(email); } }; diff --git a/components/User/SSO.js b/components/User/SSO.js index 367859968..b34517563 100644 --- a/components/User/SSO.js +++ b/components/User/SSO.js @@ -8,6 +8,7 @@ import {hashPassword} from '../../configs/general'; import instances from '../../configs/instances.js'; import SSOSingIn from '../../actions/user/SSOSingIn'; import {FormattedMessage, defineMessages} from 'react-intl'; +import {Accordion, Icon} from 'semantic-ui-react'; const MODI = 'sso_modi'; const NAME = 'sso_data'; @@ -17,7 +18,8 @@ class SSO extends React.Component { super(props); this.state = { - grecaptcharesponse: null + grecaptcharesponse: null, + activeIndex: 0 }; this.errorMessages = defineMessages({ @@ -68,7 +70,7 @@ class SSO extends React.Component { $(ReactDOM.findDOMNode(this.refs.SSO_form)).form(validationRules); - if (!instances[this.props.SSOStore.instance]) { + if (this.props.SSOStore && !instances[this.props.SSOStore.instance]) { console.log('Wrong instance name:', this.props.SSOStore.instance); swal({ title: 'Problem with the URL', @@ -120,42 +122,90 @@ class SSO extends React.Component { }); } + handleAccordionClick(e, titleProps) { + e.preventDefault(); + + const { index } = titleProps; + const { activeIndex } = this.state; + const newIndex = activeIndex === index ? -1 : index; + + this.setState({ activeIndex: newIndex }); + } + render() { const signUpLabelStyle = {width: '150px'}; const recaptchaStyle = {display: 'inline-block'}; const PUBLIC_KEY = '6LdNLyYTAAAAAINDsVZRKG_E3l3Dvpp5sKboR1ET'; // Public reCAPTCHA key let url = ''; - if (instances[this.props.SSOStore.instance]) + let redirect = ''; + if (this.props.SSOStore && instances[this.props.SSOStore.instance]) { url = instances[this.props.SSOStore.instance].url; + redirect = instances[this.props.SSOStore.instance].validate; + } + + const { activeIndex } = this.state; return (
-

Single Sign On

-

At this page you could sign up or sign in with an account from this instance on another one.

-

Beneath you have to enter your password and your account with the email {this.props.SSOStore.email} will be used on {url}.

-//TODO add more information - like in OpenID -
-
- -
-
- -
-
-
- - -
-
-
- - +
+ +

SlideWiki Single Sign On

+
+
+
+

+ SlideWiki wants to access your account on {instances[instances._self].url} in order to retrieve your account details to the SlideWiki on {url}. +
+ Beneath you have to enter your password and your account with the email {(this.props.SSOStore) ? this.props.SSOStore.email : ''} will be copied to {url}. +

+
+
+ + + + + Personal Account Data + + + The following details will be read and transfered: +
+
    +
  • Username
    • +
  • Email Address
    • +
  • Full Name
    • +
  • Country
    • +
  • Picture
    • +
  • Biography
    • +
  • Organization
    • +
  • Language
    • +
+ + + +
+
+
+
+ +
+
+
+ + +
+
+
+ +

This will redirect you to
{redirect}

+ +
+
diff --git a/components/User/SelectInstanceModal.js b/components/User/SelectInstanceModal.js index 123436dd4..bc47489bf 100644 --- a/components/User/SelectInstanceModal.js +++ b/components/User/SelectInstanceModal.js @@ -49,7 +49,7 @@ class SelectInstanceModal extends React.Component { console.log(name, value); this.setState({ [name]: value }); - if (name == 'email' && value !== '' && value !== undefined && this.state.instance !== '') { + if (name == 'email' && value !== '' && value !== undefined && this.state.instance !== '' && common.isEmailAddress(value)) { this.context.executeAction(checkEmail, {email: value, dispatch: 'SSO_MODAL_CHECKED_EMAIL', url: instances[this.state.instance].emailcheck}); } } @@ -153,9 +153,9 @@ class SelectInstanceModal extends React.Component { return true; } - checkEmail() {//TODO only check email if value is an email + checkEmail() { const email = this.state.email; - if (email !== '' && this.state.instance !== '') { + if (email !== '' && this.state.instance !== '' && common.isEmailAddress(email)) { this.context.executeAction(checkEmail, {email: email, dispatch: 'SSO_MODAL_CHECKED_EMAIL', url: instances[this.state.instance].emailcheck}); } } diff --git a/stores/SSOStore.js b/stores/SSOStore.js index 0df120f30..a4caa0370 100644 --- a/stores/SSOStore.js +++ b/stores/SSOStore.js @@ -76,6 +76,7 @@ class SSOStore extends BaseStore { initiate(data) { this.instance = data.instance; this.email = data.email; + // console.log('SSOStore initiate', data); this.emitChange(); }