#180

app/components/login/Login.jsx

@@ -33,6 +33,16 @@ const PasswordField = styled.div`
   position: relative;
   max-width: 500px;
 `
+
+const Container = styled(CenteredColumn)`
+  margin: 0 0;
+  max-width: 350px;
+  .login-error {
+    font-size: 18px;
+    margin: 10px 0 10px 0;
+    width: inherit;
+  }
+`
 const EmailInput = props => <TextField label="Email address" {...props.field} />
 const PasswordInput = props => (
   <TextField label="Password" {...props.field} type="password" />
@@ -66,8 +76,10 @@ class Login extends React.Component {
     return (
       <Page>
         <H1>Sign in with your Europe PMC plus account</H1>
-        <CenteredColumn small style={{ margin: '0 0' }}>
-          {!isEmpty(errors) && <ErrorText>{errors}</ErrorText>}
+        <Container medium>
+          {!isEmpty(errors) && (
+            <ErrorText className="login-error">{errors}</ErrorText>
+          )}
           <form onSubmit={handleSubmit}>
             <Field component={EmailInput} name="email" />
             <PasswordField>
@@ -88,7 +100,7 @@ class Login extends React.Component {
               Login
             </Button>
           </form>
-        </CenteredColumn>
+        </Container>
         {signup && (
           <Signup>
             <span> I don’t have a Europe PMC Plus account. </span>

server/xpub-server/entities/user/resolvers.js

@@ -92,7 +92,7 @@ const resolvers = {
         user = await User.validateUser(input.email, input.password)
       } catch (error) {
         logger.error(error)
-        throw new Error('Incorrect email or password')
+        throw new Error('You’ve entered an incorrect email address or password')
       }
 
       logger.debug('user: ', user)