1 files changed, 24 insertions, 12 deletions
diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js
index e6ac3192..07099c60 100644
--- a/web-ui/src/login/app.js
+++ b/web-ui/src/login/app.js
@@ -17,19 +17,31 @@
 
 import React from 'react';
 import { translate } from 'react-i18next';
+import InputField from 'src/common/input_field/input_field';
+import SubmitButton from 'src/common/submit_button/submit_button';
 
-const App = () => (
-  <form className='standard' id='login_form' action='/login' method='post'>
-    <input
-      type='text' name='username' id='email' className='text-field'
-      placeholder='username' autoFocus=''
-    />
-    <input
-      type='password' name='password' id='password' className='text-field'
-      placeholder='password' autoComplete='off'
-    />
-    <input type='submit' name='login' value='Login' className='button' />
-  </form>
+import './app.scss';
+
+const errorMessage = (t, authError) => {
+  if (authError) return <p className='error'>{t('error.auth')}</p>;
+  return <div />;
+};
+
+export const App = ({ t, authError }) => (
+  <div className='login'>
+    <img className='logo' src='/public/images/logo-orange.svg' alt='Pixelated logo' />
+    {errorMessage(t, authError)}
+    <form className='standard' id='login_form' action='/login' method='post'>
+      <InputField name='username' label={t('login.email')} />
+      <InputField type='password' name='password' label={t('login.password')} />
+      <SubmitButton buttonText={t('login.submit')} />
+    </form>
+  </div>
 );
 
+App.propTypes = {
+  t: React.PropTypes.func.isRequired,
+  authError: React.PropTypes.bool
+};
+
 export default translate('', { wait: true })(App);