Merge pull request #73 from edx/aehsan/van-140/added_skeleton_for_buttons
Skeleton added for the third party auth buttons
This commit is contained in:
Adeel Ehsan
179
package-lock.json
generated
179
package-lock.json
generated
@@ -45,7 +45,6 @@
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
||||
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/highlight": "^7.10.4"
|
||||
}
|
||||
@@ -489,7 +488,6 @@
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
|
||||
"integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.5"
|
||||
},
|
||||
@@ -498,7 +496,6 @@
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
|
||||
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"lodash": "^4.17.19",
|
||||
@@ -508,8 +505,7 @@
|
||||
"lodash": {
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -804,7 +800,6 @@
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
|
||||
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"chalk": "^2.0.0",
|
||||
@@ -2041,6 +2036,94 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@emotion/cache": {
|
||||
"version": "10.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
|
||||
"integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
|
||||
"requires": {
|
||||
"@emotion/sheet": "0.9.4",
|
||||
"@emotion/stylis": "0.8.5",
|
||||
"@emotion/utils": "0.11.3",
|
||||
"@emotion/weak-memoize": "0.2.5"
|
||||
}
|
||||
},
|
||||
"@emotion/core": {
|
||||
"version": "10.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
|
||||
"integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@emotion/cache": "^10.0.27",
|
||||
"@emotion/css": "^10.0.27",
|
||||
"@emotion/serialize": "^0.11.15",
|
||||
"@emotion/sheet": "0.9.4",
|
||||
"@emotion/utils": "0.11.3"
|
||||
}
|
||||
},
|
||||
"@emotion/css": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
|
||||
"integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
|
||||
"requires": {
|
||||
"@emotion/serialize": "^0.11.15",
|
||||
"@emotion/utils": "0.11.3",
|
||||
"babel-plugin-emotion": "^10.0.27"
|
||||
}
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
|
||||
},
|
||||
"@emotion/memoize": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
|
||||
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
|
||||
},
|
||||
"@emotion/serialize": {
|
||||
"version": "0.11.16",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
|
||||
"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
|
||||
"requires": {
|
||||
"@emotion/hash": "0.8.0",
|
||||
"@emotion/memoize": "0.7.4",
|
||||
"@emotion/unitless": "0.7.5",
|
||||
"@emotion/utils": "0.11.3",
|
||||
"csstype": "^2.5.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
|
||||
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@emotion/sheet": {
|
||||
"version": "0.9.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
|
||||
"integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
|
||||
},
|
||||
"@emotion/stylis": {
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
|
||||
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
|
||||
},
|
||||
"@emotion/unitless": {
|
||||
"version": "0.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
|
||||
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
|
||||
},
|
||||
"@emotion/utils": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
|
||||
"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
|
||||
},
|
||||
"@emotion/weak-memoize": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
|
||||
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
|
||||
},
|
||||
"@formatjs/ecma402-abstract": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.3.tgz",
|
||||
@@ -3376,8 +3459,7 @@
|
||||
"@types/parse-json": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
|
||||
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
|
||||
},
|
||||
"@types/prettier": {
|
||||
"version": "2.1.5",
|
||||
@@ -4754,6 +4836,30 @@
|
||||
"object.assign": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"babel-plugin-emotion": {
|
||||
"version": "10.0.33",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
|
||||
"integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@emotion/hash": "0.8.0",
|
||||
"@emotion/memoize": "0.7.4",
|
||||
"@emotion/serialize": "^0.11.16",
|
||||
"babel-plugin-macros": "^2.0.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"convert-source-map": "^1.5.0",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"find-root": "^1.1.0",
|
||||
"source-map": "^0.5.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-plugin-istanbul": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
|
||||
@@ -4779,6 +4885,30 @@
|
||||
"@types/babel__traverse": "^7.0.6"
|
||||
}
|
||||
},
|
||||
"babel-plugin-macros": {
|
||||
"version": "2.8.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
|
||||
"integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.7.2",
|
||||
"cosmiconfig": "^6.0.0",
|
||||
"resolve": "^1.12.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cosmiconfig": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
|
||||
"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
|
||||
"requires": {
|
||||
"@types/parse-json": "^4.0.0",
|
||||
"import-fresh": "^3.1.0",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0",
|
||||
"yaml": "^1.7.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-plugin-react-intl": {
|
||||
"version": "8.2.21",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-8.2.21.tgz",
|
||||
@@ -4886,6 +5016,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-plugin-syntax-jsx": {
|
||||
"version": "6.18.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
|
||||
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
|
||||
},
|
||||
"babel-plugin-transform-imports": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-transform-imports/-/babel-plugin-transform-imports-2.0.0.tgz",
|
||||
@@ -5902,8 +6037,7 @@
|
||||
"callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
|
||||
},
|
||||
"camel-case": {
|
||||
"version": "4.1.2",
|
||||
@@ -10308,6 +10442,11 @@
|
||||
"pkg-dir": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"find-root": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
|
||||
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
|
||||
},
|
||||
"find-up": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
|
||||
@@ -11986,7 +12125,6 @@
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.2.tgz",
|
||||
"integrity": "sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"parent-module": "^1.0.0",
|
||||
"resolve-from": "^4.0.0"
|
||||
@@ -16727,7 +16865,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||
"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"callsites": "^3.0.0"
|
||||
}
|
||||
@@ -16749,7 +16886,6 @@
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
|
||||
"integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"error-ex": "^1.3.1",
|
||||
@@ -16858,8 +16994,7 @@
|
||||
"path-type": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
|
||||
},
|
||||
"pbkdf2": {
|
||||
"version": "3.1.1",
|
||||
@@ -18546,6 +18681,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-loading-skeleton": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-2.1.1.tgz",
|
||||
"integrity": "sha512-+fGvgG9ieUw4D5QVgpqJkJ75jhzUdz96GRsA0HjTlR0Mpj9DJUEFc0AKELs7ZkqWVH8/DiroaaufSrOPld1kGA==",
|
||||
"requires": {
|
||||
"@emotion/core": "^10.0.22"
|
||||
}
|
||||
},
|
||||
"react-overlays": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
|
||||
@@ -19436,8 +19579,7 @@
|
||||
"resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
|
||||
"dev": true
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "3.0.0",
|
||||
@@ -23801,8 +23943,7 @@
|
||||
"yaml": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
|
||||
"integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
|
||||
},
|
||||
"yargs": {
|
||||
"version": "15.4.1",
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
"prop-types": "15.7.2",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
"react-loading-skeleton": "^2.1.1",
|
||||
"react-redux": "7.2.2",
|
||||
"react-router": "5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
|
||||
@@ -10,9 +10,10 @@ export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
|
||||
// Constants
|
||||
export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft'];
|
||||
|
||||
// Stateful Submit Button States
|
||||
// States
|
||||
export const DEFAULT_STATE = 'default';
|
||||
export const PENDING_STATE = 'pending';
|
||||
export const COMPLETE_STATE = 'complete';
|
||||
|
||||
export const REGISTRATION_VALIDITY_MAP = {};
|
||||
export const REGISTRATION_OPTIONAL_MAP = {};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import Skeleton from 'react-loading-skeleton';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
@@ -20,7 +21,7 @@ import SocialAuthProviders from './SocialAuthProviders';
|
||||
import ThirdPartyAuthAlert from './ThirdPartyAuthAlert';
|
||||
|
||||
import {
|
||||
DEFAULT_REDIRECT_URL, DEFAULT_STATE, LOGIN_PAGE, REGISTER_PAGE, ENTERPRISE_LOGIN_URL,
|
||||
DEFAULT_REDIRECT_URL, DEFAULT_STATE, LOGIN_PAGE, REGISTER_PAGE, ENTERPRISE_LOGIN_URL, PENDING_STATE,
|
||||
} from '../data/constants';
|
||||
import { forgotPasswordResultSelector } from '../forgot-password';
|
||||
|
||||
@@ -120,8 +121,31 @@ class LoginPage extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl) {
|
||||
let thirdPartyComponent = null;
|
||||
if ((providers.length || secondaryProviders.length) && !currentProvider) {
|
||||
thirdPartyComponent = (
|
||||
<>
|
||||
<RenderInstitutionButton
|
||||
onSubmitHandler={this.handleInstitutionLogin}
|
||||
secondaryProviders={secondaryProviders}
|
||||
buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
|
||||
/>
|
||||
<div className="row tpa-container">
|
||||
<SocialAuthProviders socialAuthProviders={providers} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
} else if (thirdPartyAuthApiStatus === PENDING_STATE) {
|
||||
thirdPartyComponent = <Skeleton height={36} />;
|
||||
} return thirdPartyComponent;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, submitState, thirdPartyAuthContext } = this.props;
|
||||
const {
|
||||
intl, submitState, thirdPartyAuthContext, thirdPartyAuthApiStatus,
|
||||
} = this.props;
|
||||
const { currentProvider, providers, secondaryProviders } = this.props.thirdPartyAuthContext;
|
||||
|
||||
if (this.state.institutionLogin) {
|
||||
return (
|
||||
@@ -163,18 +187,6 @@ class LoginPage extends React.Component {
|
||||
<h2 className="text-left mt-2 mb-3">
|
||||
{intl.formatMessage(messages['logistration.login.institution.login.sign.in'])}
|
||||
</h2>
|
||||
{thirdPartyAuthContext.secondaryProviders.length ? (
|
||||
<>
|
||||
<RenderInstitutionButton
|
||||
onSubmitHandler={this.handleInstitutionLogin}
|
||||
secondaryProviders={thirdPartyAuthContext.secondaryProviders}
|
||||
buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
|
||||
/>
|
||||
<div className="mb-4 mt-20">
|
||||
<h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
|
||||
</div>
|
||||
</>
|
||||
) : null }
|
||||
<Form className="m-0">
|
||||
<ValidationFormGroup
|
||||
for="email"
|
||||
@@ -226,16 +238,13 @@ class LoginPage extends React.Component {
|
||||
onClick={this.handleSubmit}
|
||||
/>
|
||||
</Form>
|
||||
{thirdPartyAuthContext.providers.length && !thirdPartyAuthContext.currentProvider ? (
|
||||
<>
|
||||
<div className="mb-4 mt-20">
|
||||
{(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
|
||||
&& !currentProvider ? (
|
||||
<div className="section-heading-line mb-4">
|
||||
<h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
|
||||
</div>
|
||||
<div className="row tpa-container">
|
||||
<SocialAuthProviders socialAuthProviders={thirdPartyAuthContext.providers} />
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
) : null}
|
||||
{this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -249,6 +258,7 @@ LoginPage.defaultProps = {
|
||||
loginResult: null,
|
||||
loginError: null,
|
||||
submitState: DEFAULT_STATE,
|
||||
thirdPartyAuthApiStatus: 'pending',
|
||||
thirdPartyAuthContext: {
|
||||
currentProvider: null,
|
||||
finishAuthUrl: null,
|
||||
@@ -271,6 +281,7 @@ LoginPage.propTypes = {
|
||||
success: PropTypes.bool,
|
||||
}),
|
||||
submitState: PropTypes.string,
|
||||
thirdPartyAuthApiStatus: PropTypes.string,
|
||||
thirdPartyAuthContext: PropTypes.shape({
|
||||
currentProvider: PropTypes.string,
|
||||
platformName: PropTypes.string,
|
||||
@@ -287,6 +298,7 @@ const mapStateToProps = state => {
|
||||
const loginError = loginErrorSelector(state);
|
||||
return {
|
||||
submitState: state.logistration.submitState,
|
||||
thirdPartyAuthApiStatus: state.logistration.thirdPartyAuthApiStatus,
|
||||
forgotPassword,
|
||||
loginError,
|
||||
loginResult,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Skeleton from 'react-loading-skeleton';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Input,
|
||||
@@ -26,6 +27,7 @@ import RegistrationFailure from './RegistrationFailure';
|
||||
import {
|
||||
DEFAULT_REDIRECT_URL,
|
||||
DEFAULT_STATE,
|
||||
PENDING_STATE,
|
||||
LOGIN_PAGE,
|
||||
REGISTER_PAGE,
|
||||
REGISTRATION_VALIDITY_MAP,
|
||||
@@ -479,6 +481,30 @@ class RegistrationPage extends React.Component {
|
||||
return [{ user_message: isFieldInValid ? this.intl.formatMessage(messages[messageID]) : '' }];
|
||||
}
|
||||
|
||||
renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl) {
|
||||
let thirdPartyComponent = null;
|
||||
if ((providers.length || secondaryProviders.length) && !currentProvider) {
|
||||
thirdPartyComponent = (
|
||||
<>
|
||||
<RenderInstitutionButton
|
||||
onSubmitHandler={this.handleInstitutionLogin}
|
||||
secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders}
|
||||
buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.button'])}
|
||||
/>
|
||||
<div className="row tpa-container">
|
||||
<SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
|
||||
</div>
|
||||
<span className="d-block mx-auto text-center mt-4 section-heading-line">
|
||||
{intl.formatMessage(messages['logistration.create.a.new.one.here'])}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
} else if (thirdPartyAuthApiStatus === PENDING_STATE) {
|
||||
thirdPartyComponent = <Skeleton height={36} count={2} />;
|
||||
}
|
||||
return thirdPartyComponent;
|
||||
}
|
||||
|
||||
renderErrors() {
|
||||
let errorsObject = null;
|
||||
if (!this.checkNoValidationsErrors(this.state.validationErrorsAlertMessages)) {
|
||||
@@ -492,7 +518,7 @@ class RegistrationPage extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, submitState } = this.props;
|
||||
const { intl, submitState, thirdPartyAuthApiStatus } = this.props;
|
||||
const {
|
||||
currentProvider, finishAuthUrl, providers, secondaryProviders,
|
||||
} = this.props.thirdPartyAuthContext;
|
||||
@@ -534,24 +560,15 @@ class RegistrationPage extends React.Component {
|
||||
<span>{intl.formatMessage(messages['logistration.already.have.an.edx.account'])}</span>
|
||||
<a href={LOGIN_PAGE}>{intl.formatMessage(messages['logistration.sign.in.hyperlink'])}</a>
|
||||
</div>
|
||||
{(providers.length || secondaryProviders.length) && !currentProvider ? (
|
||||
<div className="d-block mb-4 mt-4">
|
||||
<h4 className="d-block mx-auto mb-4">
|
||||
{intl.formatMessage(messages['logistration.create.an.account.using'])}
|
||||
</h4>
|
||||
<div className="row tpa-container mb-3">
|
||||
<SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
|
||||
{(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
|
||||
&& !currentProvider ? (
|
||||
<div className="d-block mb-4 mt-4">
|
||||
<h4 className="d-block mx-auto mb-4">
|
||||
{intl.formatMessage(messages['logistration.create.an.account.using'])}
|
||||
</h4>
|
||||
</div>
|
||||
<RenderInstitutionButton
|
||||
onSubmitHandler={this.handleInstitutionLogin}
|
||||
secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders}
|
||||
buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.button'])}
|
||||
/>
|
||||
<h4 className="d-block mx-auto mt-4">
|
||||
{intl.formatMessage(messages['logistration.create.a.new.one.here'])}
|
||||
</h4>
|
||||
</div>
|
||||
) : null}
|
||||
) : null}
|
||||
{this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
|
||||
<Form className="mb-4 form-group">
|
||||
<ValidationFormGroup
|
||||
for="name"
|
||||
@@ -686,6 +703,7 @@ RegistrationPage.defaultProps = {
|
||||
registerNewUser: null,
|
||||
registrationError: null,
|
||||
submitState: DEFAULT_STATE,
|
||||
thirdPartyAuthApiStatus: 'pending',
|
||||
thirdPartyAuthContext: {
|
||||
currentProvider: null,
|
||||
finishAuthUrl: null,
|
||||
@@ -711,6 +729,7 @@ RegistrationPage.propTypes = {
|
||||
username: PropTypes.array,
|
||||
}),
|
||||
submitState: PropTypes.string,
|
||||
thirdPartyAuthApiStatus: PropTypes.string,
|
||||
thirdPartyAuthContext: PropTypes.shape({
|
||||
currentProvider: PropTypes.string,
|
||||
platformName: PropTypes.string,
|
||||
@@ -749,6 +768,7 @@ const mapStateToProps = state => {
|
||||
return {
|
||||
registrationError: state.logistration.registrationError,
|
||||
submitState: state.logistration.submitState,
|
||||
thirdPartyAuthApiStatus: state.logistration.thirdPartyAuthApiStatus,
|
||||
registrationResult,
|
||||
thirdPartyAuthContext,
|
||||
formData: state.logistration.formData,
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
REGISTER_FORM_VALIDATIONS,
|
||||
} from './actions';
|
||||
|
||||
import { DEFAULT_STATE, PENDING_STATE } from '../../data/constants';
|
||||
import { DEFAULT_STATE, PENDING_STATE, COMPLETE_STATE } from '../../data/constants';
|
||||
|
||||
export const defaultState = {
|
||||
loginError: null,
|
||||
@@ -55,15 +55,18 @@ const reducer = (state = defaultState, action) => {
|
||||
case THIRD_PARTY_AUTH_CONTEXT.BEGIN:
|
||||
return {
|
||||
...state,
|
||||
thirdPartyAuthApiStatus: PENDING_STATE,
|
||||
};
|
||||
case THIRD_PARTY_AUTH_CONTEXT.SUCCESS:
|
||||
return {
|
||||
...state,
|
||||
thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
|
||||
thirdPartyAuthApiStatus: COMPLETE_STATE,
|
||||
};
|
||||
case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
|
||||
return {
|
||||
...state,
|
||||
thirdPartyAuthApiStatus: COMPLETE_STATE,
|
||||
};
|
||||
case REGISTER_FORM.BEGIN:
|
||||
return {
|
||||
|
||||
@@ -154,7 +154,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
className="mb-4 mt-20"
|
||||
className="section-heading-line mb-4"
|
||||
>
|
||||
<h4>
|
||||
or sign in with
|
||||
@@ -345,6 +345,25 @@ exports[`LoginPage should match default section snapshot 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
className="section-heading-line mb-4"
|
||||
>
|
||||
<h4>
|
||||
or sign in with
|
||||
</h4>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -503,6 +522,25 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
className="section-heading-line mb-4"
|
||||
>
|
||||
<h4>
|
||||
or sign in with
|
||||
</h4>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -670,6 +708,25 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
className="section-heading-line mb-4"
|
||||
>
|
||||
<h4>
|
||||
or sign in with
|
||||
</h4>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -845,6 +902,25 @@ exports[`LoginPage should show error message 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
className="section-heading-line mb-4"
|
||||
>
|
||||
<h4>
|
||||
or sign in with
|
||||
</h4>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,6 +31,28 @@ exports[`./RegistrationPage.js should display no password field when current pro
|
||||
Sign in.
|
||||
</a>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<form
|
||||
className="mb-4 form-group"
|
||||
>
|
||||
@@ -225,38 +247,38 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
|
||||
>
|
||||
Create an account using
|
||||
</h4>
|
||||
<div
|
||||
className="row tpa-container mb-3"
|
||||
>
|
||||
<button
|
||||
className="btn-social btn-oa2-apple-id"
|
||||
id="oa2-apple-id"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
alt="icon Apple"
|
||||
className="icon-image"
|
||||
src="https://edx.devstack.lms/logo.png"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pl-2"
|
||||
>
|
||||
Apple
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<h4
|
||||
className="d-block mx-auto mt-4"
|
||||
>
|
||||
or create a new one here
|
||||
</h4>
|
||||
</div>
|
||||
<div
|
||||
className="row tpa-container"
|
||||
>
|
||||
<button
|
||||
className="btn-social btn-oa2-apple-id"
|
||||
id="oa2-apple-id"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
alt="icon Apple"
|
||||
className="icon-image"
|
||||
src="https://edx.devstack.lms/logo.png"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pl-2"
|
||||
>
|
||||
Apple
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
className="d-block mx-auto text-center mt-4 section-heading-line"
|
||||
>
|
||||
or create a new one here
|
||||
</span>
|
||||
<form
|
||||
className="mb-4 form-group"
|
||||
>
|
||||
@@ -472,6 +494,37 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
|
||||
Sign in.
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="d-block mb-4 mt-4"
|
||||
>
|
||||
<h4
|
||||
className="d-block mx-auto mb-4"
|
||||
>
|
||||
Create an account using
|
||||
</h4>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<form
|
||||
className="mb-4 form-group"
|
||||
>
|
||||
@@ -687,6 +740,37 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
|
||||
Sign in.
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="d-block mb-4 mt-4"
|
||||
>
|
||||
<h4
|
||||
className="d-block mx-auto mb-4"
|
||||
>
|
||||
Create an account using
|
||||
</h4>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<form
|
||||
className="mb-4 form-group"
|
||||
>
|
||||
@@ -937,6 +1021,37 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
|
||||
Sign in.
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="d-block mb-4 mt-4"
|
||||
>
|
||||
<h4
|
||||
className="d-block mx-auto mb-4"
|
||||
>
|
||||
Create an account using
|
||||
</h4>
|
||||
</div>
|
||||
<span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
<span
|
||||
className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
|
||||
style={
|
||||
Object {
|
||||
"height": 36,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<form
|
||||
className="mb-4 form-group"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user