[https://github.com/tracim/tracim/issues/792] added remember me feature

frontend/src/component/Header/MenuActionListItem/MenuProfil.jsx

@@ -8,31 +8,31 @@ const MenuProfil = props => {
   if (!props.user.logged) return null
 
   return (
-      <li className='header__menu__rightside__itemprofil'>
-        <div className='profilgroup dropdown'>
-          <button className='profilgroup__name btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            <img className='profilgroup__name__imgprofil' src={props.user.avatar_url} />
+    <li className='header__menu__rightside__itemprofil'>
+      <div className='profilgroup dropdown'>
+        <button className='profilgroup__name btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+          <img className='profilgroup__name__imgprofil' src={props.user.avatar_url} />
 
-            <div className='profilgroup__name__text'>
-              {props.user.public_name}
-            </div>
-          </button>
+          <div className='profilgroup__name__text'>
+            {props.user.public_name}
+          </div>
+        </button>
 
-          <div className='profilgroup__setting dropdown-menu' aria-labelledby='dropdownMenuButton'>
-            <Link className='setting__link dropdown-item' to={PAGE.ACCOUNT}>
-              <i className='fa fa-fw fa-user-o mr-2' />
-              {props.t('My Account')}
-            </Link>
+        <div className='profilgroup__setting dropdown-menu' aria-labelledby='dropdownMenuButton'>
+          <Link className='setting__link dropdown-item' to={PAGE.ACCOUNT}>
+            <i className='fa fa-fw fa-user-o mr-2' />
+            {props.t('My Account')}
+          </Link>
 
-            {/* <div className='setting__link dropdown-item'>Mot de passe</div> */}
-            <div className='setting__link dropdown-item' onClick={props.onClickLogout}>
-              <i className='fa fa-fw fa-sign-out mr-2' />
-              {props.t('Logout')}
-            </div>
+          {/* <div className='setting__link dropdown-item'>Mot de passe</div> */}
+          <div className='setting__link dropdown-item' onClick={props.onClickLogout}>
+            <i className='fa fa-fw fa-sign-out mr-2' />
+            {props.t('Logout')}
           </div>
         </div>
-      </li>
-    )
+      </div>
+    </li>
+  )
 }
 export default translate()(MenuProfil)
 

frontend/src/container/Login.jsx

@@ -17,6 +17,7 @@ import {
   setUserConnected
 } from '../action-creator.sync.js'
 import { COOKIE, PAGE } from '../helper.js'
+import { Checkbox } from 'tracim_frontend_lib'
 
 class Login extends React.Component {
   constructor (props) {
@@ -36,7 +37,11 @@ class Login extends React.Component {
 
   handleChangeLogin = e => this.setState({inputLogin: {...this.state.inputLogin, value: e.target.value}})
   handleChangePassword = e => this.setState({inputPassword: {...this.state.inputPassword, value: e.target.value}})
-  handleChangeRememberMe = () => this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
+  handleChangeRememberMe = e => {
+    e.preventDefault()
+    e.stopPropagation()
+    this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
+  }
 
   handleClickSubmit = async () => {
     const { history, dispatch, t } = this.props
@@ -52,8 +57,13 @@ class Login extends React.Component {
         logged: true
       }))
 
-      Cookies.set(COOKIE.USER_LOGIN, inputLogin.value)
-      Cookies.set(COOKIE.USER_AUTH, userAuth)
+      if (inputRememberMe) {
+        Cookies.set(COOKIE.USER_LOGIN, inputLogin.value, {expires: 365})
+        Cookies.set(COOKIE.USER_AUTH, userAuth, {expires: 365})
+      } else {
+        Cookies.set(COOKIE.USER_LOGIN, inputLogin.value)
+        Cookies.set(COOKIE.USER_AUTH, userAuth)
+      }
 
       history.push(PAGE.WORKSPACE.ROOT)
     } else if (fetchPostUserLogin.status === 403) {
@@ -103,32 +113,30 @@ class Login extends React.Component {
                       />
 
                       <div className='row align-items-center mt-4 mb-4'>
-
-                        {/*
-                          <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
-                            <InputCheckbox
-                              parentClassName='connection__form__rememberme'
-                              customClass=''
-                              label='Se souvenir de moi'
+                        <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+                          <div className='connection__form__rememberme' onClick={this.handleChangeRememberMe}>
+                            <Checkbox
+                              name='inputRememberMe'
                               checked={this.state.inputRememberMe}
-                              onChange={this.handleChangeRememberMe}
                             />
+                            Se souvenir de moi
                           </div>
-                        */}
 
-                        <div className='col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
                           <LoginBtnForgotPw
                             customClass='connection__form__pwforgot'
                             label={this.props.t('Forgotten password ?')}
                           />
                         </div>
-                        <Button
-                          htmlType='button'
-                          bootstrapType='primary'
-                          customClass='connection__form__btnsubmit ml-auto'
-                          label={this.props.t('Connection')}
-                          onClick={this.handleClickSubmit}
-                        />
+
+                        <div className='col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+                          <Button
+                            htmlType='button'
+                            bootstrapType='primary'
+                            customClass='connection__form__btnsubmit ml-auto'
+                            label={this.props.t('Connection')}
+                            onClick={this.handleClickSubmit}
+                          />
+                        </div>
                       </div>
                     </div>
 

frontend/src/css/Login.styl

@@ -20,8 +20,13 @@
       font-size 25px
   .connection__form
     &__rememberme
-      &__label
-        font-size 13px
+      margin-bottom 10px
+      font-size 14px
+      line-height 23px
+      cursor pointer
+      label
+        margin-right 8px
+        top 4px
     &__groupemail
       position relative
       &__icon
@@ -55,14 +60,6 @@
     &__pwforgot
       cursor pointer
       font-size 13px
-      &:hover::after
-        position absolute
-        top 20px
-        left 15px
-        border-bottom 1px solid darkGrey
-        padding-bottom 2px
-        content ' '
-        width 130px
   &__footer
     position fixed
     bottom 2%

frontend_lib/src/component/Input/Checkbox.jsx

@@ -59,8 +59,6 @@ Checkbox.propTypes = {
 }
 
 Checkbox.defaultProps = {
-  name: '',
-  onClickCheckbox: () => {},
   checked: false,
   disabled: false
 }

frontend_lib/src/component/Timeline/Timeline.jsx

@@ -189,7 +189,7 @@ Timeline.propTypes = {
   isArchived: PropTypes.bool,
   onClickRestoreArchived: PropTypes.func,
   isDeleted: PropTypes.bool,
-  onClickRestoreDeleted: PropTypes.func,
+  onClickRestoreDeleted: PropTypes.func
 }
 
 Timeline.defaultProps = {