Feature email password (supertokens#16)

* email/password feature

* DRY routing + react-test-app in test + fix clashing node_modules

* npmignore

* signIn API + feature events

* normalised form fields

* normaliseAppInfo + use enums in constants

* remove unnecessary promises

* remove useless usecallback and useeffect

* signin theme wip

* signin theme

* fix react hooks issue + add eslint to replace deprecated tslint

* signIn/signUp themes

* tweaks

* fix svg

* use focus-within for the writing state

* handleChange onFocus only

* normalise emailpassword correctly + restructure emailpassword recipe

* fix svg

* add default className for docs

* allow to override palette

* update default password validator

* FormBase

* fix recipe import/export

* reset password feature and theme

* add test skeleton for password reset

* enforce linter pre commit

* enforce linter precommit

* enforce linter precommit

* remove unnecessary console.log

* trim email + tests

* add WithRouter to redirect in app with or without react router dom

* fix getRoutingComponent returning component

* modify git hook to include linter + remove useless EmailPasswordFeature type

* server tests + fix API Calls

* quick fixes

* allow autocomplete + correct rubik fonts

* useShadoWDom option

* normaliseEmailPasswordConfig (no throw)

.babelrc

@@ -1,7 +1,17 @@
 {
  "presets": [
  [
- "@babel/preset-env"
+ "@babel/preset-env", {},
+ "@babel/preset-react"
+ ]
+ ],
+ "plugins": [
+ "inline-react-svg",
+ [
+ "@babel/plugin-transform-react-jsx",
+ {
+ "pragmaFrag": "React.Fragment"
+ }
  ]
  ]
  }

.mocharc.yml

@@ -1,5 +1,7 @@
 exit: true
-spec: test/**/*.test.js
+spec:
+ - test/unit/**/*.test.js
+ - test/end-to-end/**/*.test.js
 reporter: spec
 slow: 20000
 timeout: 30000

.npmignore

@@ -9,11 +9,12 @@ lib/tsconfig.json
 lib/babel.config.json
 .mocharc.yml
 lib/.prettierrc
+lib/.eslintrc.js
+lib/.eslintignore
 lib/tslint.json
 addDevTag
 addReleaseTag
 frontendDriverInterfaceSupported.json
 .github/
 .babelrc
-.gitattributes
-testApp.sh
+.gitattributes

CONTRIBUTING.md

@@ -19,7 +19,8 @@ We're so excited you're interested in helping with SuperTokens! We are happy to
 - IDE: [VSCode](https://code.visualstudio.com/download)(recommended) or equivalent IDE 
 
 ### Project Setup
-1. `git clone https://github.com/supertokens/supertokens-auth-react.git`
+1. Please setup supertokens-core by following this guide. If you are not contributing to supertokens-core, please skip steps 1 & 4 under "Project Setup" section.
+2. `git clone https://github.com/supertokens/supertokens-auth-react.git`, `supertokens-auth-react` and `supertokens-root` should exist side by side within the same parent directory.
 3. `cd supertokens-auth-react`
 4. Install the project dependencies
  ```
@@ -38,13 +39,39 @@ We're so excited you're interested in helping with SuperTokens! We are happy to
  ```
  npm run build-pretty
  ```
+4. Make sure the linter passes:
+ ```
+ npm run lint
+ ```
 
 ## Testing
-1. `npm run test`
 
+1. Navigate to the supertokens-root repository
+2. Start the testing environment
+ ```
+ ./startTestingEnv --wait
+ ```
+
+3. In a new terminal, navigate to the `supertokens-auth-react` repository.
+
+
+4. Start a node server required for testing
+
+ ```
+ cd ./test/server/
+ npm i -d
+ npm i git+https://github.com:supertokens/supertokens-node.git
+ TEST_MODE=testing INSTALL_PATH=../../../supertokens-root NODE_PORT=8082 node .
+ ```
+
+5. Open a new terminal in `supertokens-auth-react` and run all tests
+
+ ```
+ INSTALL_PATH=../supertokens-root npm run test
+ ```
 
 ## Run the test application.
-1. `./testApp.sh --start`
+1. `npm run testapp`
 
 
 ## Pull Request

hooks/pre-commit.sh

@@ -47,6 +47,21 @@ else
  echo ""
 fi
 
+
+npm run lint >/dev/null 2>/dev/null
+linted=$?
+
+echo "$(tput setaf 3)* Properly linted?$(tput sgr 0)"
+
+if [ $linted -eq 0 ]
+then
+ echo "$(tput setaf 2)* Yes$(tput sgr 0)"
+else
+ echo "$(tput setaf 1)* No$(tput sgr 0)"
+ echo "$(tput setaf 1)Please run 'npm run lint' to lint the code.$(tput sgr 0)"
+ echo ""
+fi
+
 if [ $no_of_files_to_stash -ne 0 ]
 then
  echo "$(tput setaf 3)* Undoing stashing$(tput sgr 0)"
@@ -58,16 +73,22 @@ then
  git stash drop >/dev/null 2>/dev/null
 fi
 
-if [ $compiles -eq 0 ] && [ $formatted -eq 0 ]
+if [ $compiles -eq 0 ] && [ $formatted -eq 0 ] && [ $linted -eq 0 ]
 then
  echo "$(tput setaf 2)... done. Proceeding with commit.$(tput sgr 0)"
  echo ""
-elif [ $compiles -eq 0 ]
+elif [ $compiles -eq 0 ] && [ $linted -eq 0 ]
 then
  echo "$(tput setaf 1)... done.$(tput sgr 0)"
  echo "$(tput setaf 1)CANCELLING commit due to NON-FORMATTED CODE.$(tput sgr 0)"
  echo ""
  exit 1
+elif [ $compiles -eq 0 ] && [ $formatted -eq 0 ]
+then
+ echo "$(tput setaf 1)... done.$(tput sgr 0)"
+ echo "$(tput setaf 1)CANCELLING commit due to NON-LINTED CODE.$(tput sgr 0)"
+ echo ""
+ exit 1
 else
  echo "$(tput setaf 1)... done.$(tput sgr 0)"
  echo "$(tput setaf 1)CANCELLING commit due to COMPILE ERROR.$(tput sgr 0)"

index.d.ts

@@ -13,4 +13,4 @@
  * under the License. 
 */
 
-export * from './lib/build/';
+export * from './lib/build/';

lib/.eslintignore

@@ -0,0 +1 @@
+build/

lib/.eslintrc.js

@@ -0,0 +1,127 @@
+/*
+👋 Hi! This file was autogenerated by tslint-to-eslint-config.
+https://github.com/typescript-eslint/tslint-to-eslint-config
+
+It represents the closest reasonable ESLint configuration to this
+project's original TSLint configuration.
+
+We recommend eventually switching this configuration to extend from
+the recommended rulesets in typescript-eslint.
+https://github.com/typescript-eslint/tslint-to-eslint-config/blob/master/docs/FAQs.md
+
+Happy linting! 💖
+*/
+module.exports = {
+ "env": {
+ "browser": true,
+ "es6": true,
+ "node": true
+ },
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "tsconfigRootDir": __dirname,
+ "project": "tsconfig.json",
+ "sourceType": "module",
+ "createDefaultProgram": true
+ },
+ "plugins": [
+ "@typescript-eslint",
+ "@typescript-eslint/tslint"
+ ],
+ "extends":[
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react-hooks/recommended"
+ ],
+ "globals":{
+ "React": "readable",
+ "jsx": "readable"
+ },
+ "rules": {
+ "typescript-eslint/indent": "off", // Prettier takes care of indentation.
+ "@typescript-eslint/no-var-requires": "off",
+ "@typescript-eslint/member-delimiter-style": [
+ "error",
+ {
+ "multiline": {
+ "delimiter": "semi",
+ "requireLast": true
+ },
+ "singleline": {
+ "delimiter": "semi",
+ "requireLast": false
+ }
+ }
+ ],
+ "@typescript-eslint/naming-convention": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-unused-vars": [
+ 2,
+ { "vars": "all", "args": "all", "varsIgnorePattern": "^React$|^jsx$" }
+ ],
+ "@typescript-eslint/prefer-namespace-keyword": "error",
+ "@typescript-eslint/quotes": [
+ "error",
+ "double"
+ ],
+ "@typescript-eslint/semi": [
+ "error",
+ "always"
+ ],
+ "@typescript-eslint/type-annotation-spacing": "error",
+ "brace-style": [
+ "error",
+ "1tbs"
+ ],
+ "no-implicit-coercion": [2, {
+ "boolean": true,
+ "number": true,
+ "string": true
+ }],
+ "curly": ["error"],
+ "eqeqeq": [
+ "error",
+ "smart"
+ ],
+ "id-blacklist": [
+ "error",
+ "any",
+ "Number",
+ "number",
+ "String",
+ "string",
+ "Boolean",
+ "boolean",
+ "Undefined"
+ ],
+ "id-match": "error",
+ "no-eval": "error",
+ "no-trailing-spaces": "error",
+ "no-unsafe-finally": "error",
+ "no-var": "error",
+ "spaced-comment": [
+ "error",
+ "always",
+ {
+ "markers": [
+ "/"
+ ]
+ }
+ ],
+ "@typescript-eslint/tslint/config": [
+ "error",
+ {
+ "rules": {
+ "whitespace": [
+ true,
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type"
+ ]
+ }
+ }
+ ]
+ }
+};

lib/.prettierrc

@@ -2,5 +2,6 @@
  "tabWidth": 4,
  "semi": true,
  "singleQuote": false,
- "printWidth": 120
+ "printWidth": 120,
+ jsxBracketSameLine: true
 }

lib/build/components/superTokensRoute.js

@@ -25,7 +25,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _superTokens = _interopRequireDefault(require("../superTokens"));
 
-var _superTokensUrl = _interopRequireDefault(require("../superTokensUrl"));
+var _utils = require("../utils");
 
 function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
@@ -90,63 +90,48 @@ function _interopRequireWildcard(obj) {
  */
 
 /*
- * SuperTokensRouteWithRecipeId
- * Using react-router-dom, we can only match based on the route and not on the combination of path and query params.
- * having one route per component would lead to clashes when two components have the same route but different recipeId,
- * the first one would always take precedence.
- * Hence, the component rendered in the Route is an abstraction that decides which Feature to render based
- * on the rId.
- * See SuperTokensRouteWithRecipeId below.
+ * Component.
  */
 function getSuperTokensRoutesForReactRouterDom() {
  try {
- var pathsToComponentWithRecipeIdMap = {};
-
- _superTokens["default"].getRecipeList().map(function(recipe) {
- var features = recipe.getFeatures();
- return Object.keys(features).map(function(featurePath) {
- // If no components yet for this route, initialize empty array.
- if (pathsToComponentWithRecipeIdMap[featurePath] === undefined) {
- pathsToComponentWithRecipeIdMap[featurePath] = [];
- }
-
- pathsToComponentWithRecipeIdMap[featurePath].push({
- rid: recipe.getRecipeId(),
- component: features[featurePath]
- });
- });
- });
-
- return Object.keys(pathsToComponentWithRecipeIdMap).map(function(path) {
- return SuperTokensRouteWithRecipeId(path, pathsToComponentWithRecipeIdMap[path]);
- });
+ var Route = require("react-router-dom").Route;
+
+ var pathsToComponentWithRecipeIdMap = _superTokens["default"].getPathsToComponentWithRecipeIdMap();
+
+ return (
+ Object.keys(pathsToComponentWithRecipeIdMap)
+ /*
+ * Sort by path length to make sure a shorter path doesn't take precedence
+ * i.e. /auth/reset-password comes before /auth/
+ */
+ .sort(function(path) {
+ return -path.length;
+ })
+ .map(function(path) {
+ return /*#__PURE__*/ React.createElement(SuperTokensRouteWithRecipeId, {
+ Route: Route,
+ key: "st-".concat(path),
+ path: path
+ });
+ })
+ );
  } catch (e) {
+ // If react-router-dom is absent from dependencies, return [];
  return [];
  }
 }
 
-function SuperTokensRouteWithRecipeId(path, routeComponents) {
- var Route = require("react-router-dom").Route;
+function SuperTokensRouteWithRecipeId(_ref) {
+ var path = _ref.path,
+ Route = _ref.Route;
+ var recipeId = (0, _utils.getRecipeIdFromSearch)(window.location.search);
 
- var recipeId = new _superTokensUrl["default"]().recipeId; // If recipeId provided, try to find a match.
-
- if (recipeId !== null) {
- for (var i = 0; i < routeComponents.length; i++) {
- if (recipeId === routeComponents[i].rid) {
- return /*#__PURE__*/ React.createElement(Route, {
- exact: true,
- key: "st-".concat(path),
- path: path,
- component: routeComponents[i].component
- });
- }
- }
- } // Otherwise, If no recipe Id provided, or if no recipe id matches, return the first matching component.
+ var component = _superTokens["default"].getMatchingComponentForRouteAndRecipeId(path, recipeId);
 
  return /*#__PURE__*/ React.createElement(Route, {
  exact: true,
  key: "st-".concat(path),
  path: path,
- component: routeComponents[0].component
+ component: component
  });
 }