improvement: oauth "scopes" improvements (#6037)

* improvement: oauth "scopes" init parameter

* improvement: add "select all" and "select none" to oauth scopes popup

src/core/components/auth/oauth2.jsx

@@ -25,12 +25,16 @@ export default class Oauth2 extends React.Component {
     let clientId = auth && auth.get("clientId") || authConfigs.clientId || ""
     let clientSecret = auth && auth.get("clientSecret") || authConfigs.clientSecret || ""
     let passwordType = auth && auth.get("passwordType") || "basic"
+    let scopes = auth && auth.get("scopes") || authConfigs.scopes || []
+    if (typeof scopes === "string") {
+      scopes = scopes.split(authConfigs.scopeSeparator || " ")
+    }
 
     this.state = {
       appName: authConfigs.appName,
       name: name,
       schema: schema,
-      scopes: [],
+      scopes: scopes,
       clientId: clientId,
       clientSecret: clientSecret,
       username: username,
@@ -77,6 +81,16 @@ export default class Oauth2 extends React.Component {
     this.setState(state)
   }
 
+  selectScopes =(e) => {
+    if (e.target.dataset.all) {
+      this.setState({
+        scopes: Array.from((this.props.schema.get("allowedScopes") || this.props.schema.get("scopes")).keys())
+      })
+    } else {
+      this.setState({ scopes: [] })
+    }
+  }
+
   logout =(e) => {
     e.preventDefault()
     let { authActions, errActions, name } = this.props
@@ -201,7 +215,11 @@ export default class Oauth2 extends React.Component {
 
         {
           !isAuthorized && scopes && scopes.size ? <div className="scopes">
-            <h2>Scopes:</h2>
+            <h2>
+              Scopes:
+              <a onClick={this.selectScopes} data-all={true}>select all</a>
+              <a onClick={this.selectScopes}>select none</a>
+            </h2>
             { scopes.map((description, name) => {
               return (
                 <Row key={ name }>
@@ -209,6 +227,7 @@ export default class Oauth2 extends React.Component {
                     <Input data-value={ name }
                           id={`${name}-${flow}-checkbox-${this.state.name}`}
                            disabled={ isAuthorized }
+                           checked={ this.state.scopes.includes(name) }
                            type="checkbox"
                            onChange={ this.onScopeChange }/>
                          <label htmlFor={`${name}-${flow}-checkbox-${this.state.name}`}>

src/style/_authorize.scss

@@ -76,6 +76,15 @@
         font-size: 14px;
 
         @include text_headline();
+
+        a
+        {
+          font-size: 12px;
+          color: $auth-select-all-none-link-font-color;
+          cursor: pointer;
+          padding-left: 10px;
+          text-decoration: underline;
+        }
     }
 }
 

src/style/_variables.scss

@@ -54,7 +54,7 @@ $_color-options: #0d5aa7 !default;
 // Authorize
 
 $auth-container-border-color: $gray-50 !default;
-
+$auth-select-all-none-link-font-color: $color-info !default;
 // Buttons
 
 $btn-background-color: transparent !default;