feat: add sign in method selector

src/components/SignIn.js

@@ -10,10 +10,16 @@ import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
 import { Link } from 'react-router-dom';
 import FormControl from '@material-ui/core/FormControl';
+import { Box } from '@material-ui/core';
 import { SIGN_UP_PATH } from '../config/paths';
 import { getCurrentMember, signIn } from '../actions/authentication';
-import { emailValidator } from '../utils/validation';
-import { EMAIL_SIGN_IN_FIELD_ID, SIGN_IN_BUTTON_ID } from '../config/selectors';
+import { emailValidator, passwordValidator } from '../utils/validation';
+import {
+  EMAIL_SIGN_IN_FIELD_ID,
+  PASSWORD_SIGN_IN_BUTTON_ID,
+  PASSWORD_SIGN_IN_FIELD_ID,
+  SIGN_IN_BUTTON_ID,
+} from '../config/selectors';
 import { FORM_INPUT_MIN_WIDTH, GRAASP_COMPOSE_HOST } from '../config/constants';
 import { SIGN_IN_ERROR } from '../types/member';
 import notifier from '../utils/notifier';
@@ -59,9 +65,12 @@ class SignIn extends Component {
 
   state = {
     email: '',
+    password: '',
     isAuthenticated: false,
     emailError: '',
+    passwordError: '',
     error: false,
+    signInMethod: true,
   };
 
   async componentDidMount() {
@@ -107,6 +116,31 @@ class SignIn extends Component {
     }
   };
 
+  handlePasswordSignIn = async () => {
+    const { email } = this.state;
+    const { password } = this.state;
+    const lowercaseEmail = email.toLowerCase();
+
+    const checkingEmail = emailValidator(lowercaseEmail);
+    const checkingPassword = passwordValidator(password);
+    if (checkingEmail || checkingPassword) {
+      if (checkingEmail) {
+        this.setState({ emailError: checkingEmail, error: true });
+      }
+      if (checkingPassword) {
+        this.setState({ passwordError: checkingPassword, error: true });
+      }
+    } else {
+      // await signIn({ email: lowercaseEmail });
+      this.doSomething();
+    }
+  };
+
+  doSomething = () => {
+    /* eslint-disable no-console */
+    console.log('login with password');
+  };
+
   handleOnChange = (e) => {
     const { error } = this.state;
     const email = e.target.value;
@@ -116,15 +150,35 @@ class SignIn extends Component {
     }
   };
 
+  handleOnChangePassword = (e) => {
+    const { error } = this.state;
+    const password = e.target.value;
+    this.setState({ password });
+    if (error) {
+      this.setState({ passwordError: passwordValidator(password) });
+    }
+  };
+
   handleKeypress = (e) => {
     // sign in by pressing the enter key
     if (e.key === 'Enter') {
       this.handleSignIn();
     }
   };
 
+  handleSignInMethod = () => {
+    const { signInMethod } = this.state;
+    if (signInMethod) {
+      this.setState({ signInMethod: false });
+    } else {
+      this.setState({ signInMethod: true });
+    }
+  };
+
   renderSignInForm = () => {
     const { email, emailError } = this.state;
+    const { password, passwordError } = this.state;
+    const { signInMethod } = this.state;
     const { classes, t } = this.props;
 
     return (
@@ -143,16 +197,42 @@ class SignIn extends Component {
             type="email"
             onKeyPress={this.handleKeypress}
           />
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={this.handleSignIn}
-            id={SIGN_IN_BUTTON_ID}
-          >
-            {t('Sign In')}
-          </Button>
+          {signInMethod === false && (
+            <>
+              <TextField
+                className={classes.input}
+                required
+                label={t('Password')}
+                variant="outlined"
+                value={password}
+                error={passwordError}
+                helperText={passwordError}
+                onChange={this.handleOnChangePassword}
+                id={PASSWORD_SIGN_IN_FIELD_ID}
+                type="password"
+                onKeyPress={this.handleKeypress}
+              />
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={this.handlePasswordSignIn}
+                id={PASSWORD_SIGN_IN_BUTTON_ID}
+              >
+                {t('Sign In')}
+              </Button>
+            </>
+          )}
+          {signInMethod === true && (
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={this.handleSignIn}
+              id={SIGN_IN_BUTTON_ID}
+            >
+              {t('Sign In')}
+            </Button>
+          )}
         </FormControl>
-
         <Divider variant="middle" className={classes.divider} />
         <Link to={SIGN_UP_PATH}>
           {t('Not registered? Click here to register')}
@@ -163,13 +243,33 @@ class SignIn extends Component {
 
   render() {
     const { classes, t } = this.props;
+    const { signInMethod } = this.state;
 
     return (
       <div className={classes.fullScreen}>
         <Typography variant="h2" component="h2">
           {t('Sign In')}
         </Typography>
         {this.renderSignInForm()}
+        <Divider variant="middle" className={classes.divider} />
+        <Box sx={{ justifyContent: 'center' }}>
+          <Button
+            // variant="contained"
+            color="primary"
+            disabled={signInMethod}
+            onClick={this.handleSignInMethod}
+          >
+            {t('Email Sign In')}
+          </Button>
+          <Button
+            // variant="contained"
+            color="primary"
+            disabled={!signInMethod}
+            onClick={this.handleSignInMethod}
+          >
+            {t('Password Sign In')}
+          </Button>
+        </Box>
       </div>
     );
   }

src/config/messages.js

@@ -10,6 +10,7 @@ export const SIGN_UP_DUPLICATE_MESSAGE =
 export const SIGN_UP_SUCCESS_MESSAGE =
   'You successfully signed up. You will receive an email.';
 export const EMAIL_ERROR = 'Please enter a valid email address';
+export const PASSWORD_ERROR = 'Please enter a valid password';
 export const USERNAME_ERROR_MAXIMUM_MESSAGE =
   'Please enter a username under 300 characters';
 export const USERNAME_ERROR_MINIMUM_MESSAGE =

src/config/selectors.js

@@ -1,5 +1,7 @@
 export const NAME_SIGN_UP_FIELD_ID = 'nameSignUpFieldId';
 export const EMAIL_SIGN_UP_FIELD_ID = 'emailSignUpFieldId';
 export const EMAIL_SIGN_IN_FIELD_ID = 'emailSignInFieldId';
+export const PASSWORD_SIGN_IN_FIELD_ID = 'passwordSignInFieldId';
+export const PASSWORD_SIGN_IN_BUTTON_ID = 'passwordSignInButtonId';
 export const SIGN_IN_BUTTON_ID = 'signInButtonId';
 export const SIGN_UP_BUTTON_ID = 'signUpButtonId';

src/utils/validation.js

@@ -1,6 +1,7 @@
 import validator from 'validator';
 import {
   EMAIL_ERROR,
+  PASSWORD_ERROR,
   USERNAME_ERROR_MAXIMUM_MESSAGE,
   USERNAME_ERROR_MINIMUM_MESSAGE,
 } from '../config/messages';
@@ -18,3 +19,5 @@ export const nameValidator = (name) => {
 
 export const emailValidator = (email) =>
   validator.isEmail(email) ? null : EMAIL_ERROR;
+export const passwordValidator = (password) =>
+  validator.isAlpha(password) ? null : PASSWORD_ERROR;