improve tip message (#2933)

* improve tip message

* restore model data

frontend/src/components/dialog/change-repo-password-dialog.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap'; 
 import { gettext, repoPasswordMinLength } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -117,7 +117,7 @@ class ChangeRepoPasswordDialog extends React.Component {
             <input type="password" name="new_passwd" className="form-control" id="new-passwd" value={this.state.newPassword} onChange={this.handleNewPasswordInputChange} /><br />
             <label htmlFor="new-passwd-again">{gettext('New Password Again')}</label><br />
             <input type="password" name="new_passwd_again" className="form-control" id="new-passwd-again" value={this.state.newPasswordAgain} onChange={this.handleNewPasswordAgainInputChange} /><br />
-            {this.state.errorMsg && <p className="alert alert-danger" role="alert">{this.state.errorMsg}</p>}
+            {this.state.errorMsg && <Alert color="danger">{this.state.errorMsg}</Alert>}
           </form>
         </ModalBody>
         <ModalFooter>

frontend/src/components/dialog/create-department-repo-dialog.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext, maxFileName } from '../../utils/constants';
 
 const propTypes = {
@@ -87,7 +87,7 @@ class CreateDepartmentRepoDialog extends React.Component {
               />
             </FormGroup>
           </Form>
-          <Label className="err-message">{this.state.errMessage}</Label>
+          {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>

frontend/src/components/dialog/create-repo-dialog.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext, enableEncryptedLibrary } from '../../utils/constants';
 
 const propTypes = {
@@ -201,7 +201,7 @@ class CreateRepoDialog extends React.Component {
               </div>
             }
           </Form>
-          <Label className="err-message">{this.state.errMessage}</Label>
+          {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>

frontend/src/components/dialog/generate-share-link.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import copy from 'copy-to-clipboard';
-import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
 import { gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import SharedLinkInfo from '../../models/shared-link-info';
@@ -345,7 +345,7 @@ class GenerateShareLink extends React.Component {
               <Input type="radio" name="radio1" onChange={() => this.setPermission('preview')} />{'  '}{gettext('Preview only')}
             </Label>
           </FormGroup>
-          <Label className="err-message">{gettext(this.state.errorInfo)}</Label><br />
+          {this.state.errorInfo && <Alert color="danger" className="mt-2">{gettext(this.state.errorInfo)}</Alert>}
           <Button onClick={this.generateShareLink}>{gettext('Generate')}</Button>
         </Form>
       );

frontend/src/components/dialog/generate-upload-link.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import copy from 'copy-to-clipboard';
-import { Button, Form, FormGroup, FormText, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { Button, Form, FormGroup, FormText, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import SharedUploadInfo from '../../models/shared-upload-info';
@@ -163,7 +163,7 @@ class GenerateUploadLink extends React.Component {
             <Input className="passwd" type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.passwordnew || ''} onChange={this.inputPasswordNew} />
           </FormGroup>
         }
-        <Label className="err-message">{this.state.errorInfo}</Label><br/>
+        {this.state.errorInfo && <Alert color="danger" className="mt-2">{this.state.errorInfo}</Alert>}
         <Button className="generate-link-btn" onClick={this.generateUploadLink}>{gettext('Generate')}</Button>
       </Form>
     );

frontend/src/components/dialog/lib-history-setting-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext, enableRepoHistorySetting } from '../../utils/constants';
 import toaster from '../toast';
-import { Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Label, Input } from 'reactstrap';
+import { Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
 
 const propTypes = {
@@ -126,7 +126,7 @@ class LibHistorySetting extends React.Component {
               />{' '}
               <Label><span>{gettext('days')}</span></Label>
             </FormGroup>
-            <Label className="err-message">{this.state.errorInfo}</Label><br />
+            {this.state.errorInfo && <Alert color="danger">{this.state.errorInfo}</Alert>}
             <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
           </Form>
         </ModalBody>

media/css/seahub_react.css

@@ -974,6 +974,7 @@ a.table-sort-op:focus {
 }
 
 .err-message {
+    margin-left: 0.5rem;
     color: red;
 }