[IMPROVE] Rewrite AddWebdavAccountModal to React Component (#24070)
Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>pull/24093/head
Douglas Fabris
3 years ago
committed by
GitHub
parent
7ee8c4bc9d
commit
0caf2f33b3
@ -1,43 +0,0 @@ |
||||
<template name="addWebdavAccount"> |
||||
<form id="add-webdav" class="content-background-color color-primary-font-color"> |
||||
<div class="fields"> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label" for="serverURL"> |
||||
<div class="rc-input__wrapper"> |
||||
<input name="name" id="serverName" type="text" class="rc-input__element" autocapitalize="off" autocorrect="off" placeholder="{{_ 'Name_optional' }}" |
||||
autofocus> |
||||
<div class="input-error"></div> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label" for="serverURL"> |
||||
<div class="rc-input__wrapper"> |
||||
<input name="serverURL" id="serverURL" type="text" class="rc-input__element" autocapitalize="off" autocorrect="off" placeholder="{{_ 'Webdav_Server_URL' }}" |
||||
autofocus> |
||||
<div class="input-error"></div> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label" for="username"> |
||||
<div class="rc-input__wrapper"> |
||||
<input name="username" id="username" type="text" class="rc-input__element" autocapitalize="off" autocorrect="off" placeholder="{{_ 'Username' }}" autofocus> |
||||
<div class="input-error"></div> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label" for="password"> |
||||
<div class="rc-input__wrapper"> |
||||
<input name="password" id="password" type="password" class="rc-input__element" autocapitalize="off" autocorrect="off" placeholder="{{_ 'Password' }}" autofocus> |
||||
<div class="input-error"></div> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
<div class="submit"> |
||||
<button class="rc-button rc-button--primary"><span>{{btnAddNewServer}}</span></button> |
||||
</div> |
||||
</form> |
||||
</template> |
||||
@ -1,77 +0,0 @@ |
||||
import { Meteor } from 'meteor/meteor'; |
||||
import { ReactiveVar } from 'meteor/reactive-var'; |
||||
import { Template } from 'meteor/templating'; |
||||
import _ from 'underscore'; |
||||
|
||||
import { modal } from '../../ui-utils'; |
||||
import { t } from '../../utils'; |
||||
import { dispatchToastMessage } from '../../../client/lib/toast'; |
||||
|
||||
Template.addWebdavAccount.helpers({ |
||||
btnAddNewServer() { |
||||
if (Template.instance().loading.get()) { |
||||
return `${t('Please_wait')}...`; |
||||
} |
||||
return t('Webdav_add_new_account'); |
||||
}, |
||||
}); |
||||
|
||||
Template.addWebdavAccount.events({ |
||||
async 'submit #add-webdav'(event, instance) { |
||||
event.preventDefault(); |
||||
const formData = instance.validate(); |
||||
if (!formData) { |
||||
return; |
||||
} |
||||
instance.loading.set(true); |
||||
Meteor.call('addWebdavAccount', formData, function (error, success) { |
||||
modal.close(); |
||||
instance.loading.set(false); |
||||
if (error) { |
||||
return dispatchToastMessage({ type: 'error', message: t(error.error) }); |
||||
} |
||||
if (!success) { |
||||
return dispatchToastMessage({ type: 'error', message: t('Error') }); |
||||
} |
||||
dispatchToastMessage({ type: 'success', message: t('webdav-account-saved') }); |
||||
}); |
||||
}, |
||||
}); |
||||
|
||||
const validate = function () { |
||||
const form = $(this.firstNode); |
||||
const formData = form.serializeArray(); |
||||
const validationObj = {}; |
||||
|
||||
const formObj = formData.reduce((ret, { value, name }) => { |
||||
ret[name] = value; |
||||
return ret; |
||||
}, {}); |
||||
|
||||
if (!formObj.serverURL) { |
||||
validationObj.serverURL = t('Field_required'); |
||||
} |
||||
if (!formObj.username) { |
||||
validationObj.username = t('Field_required'); |
||||
} |
||||
if (!formObj.password) { |
||||
validationObj.password = t('Field_required'); |
||||
} |
||||
|
||||
form.find('input.error, select.error').removeClass('error'); |
||||
form.find('.input-error').text(''); |
||||
if (_.isEmpty(validationObj)) { |
||||
return formObj; |
||||
} |
||||
Object.entries(validationObj).forEach(([key, value]) => { |
||||
form.find(`input[name=${key}], select[name=${key}]`).addClass('error'); |
||||
form.find(`input[name=${key}]~.input-error, select[name=${key}]~.input-error`).text(value); |
||||
}); |
||||
this.loading.set(false); |
||||
return false; |
||||
}; |
||||
|
||||
Template.addWebdavAccount.onCreated(function () { |
||||
this.loading = new ReactiveVar(false); |
||||
this.validate = validate.bind(this); |
||||
}); |
||||
@ -0,0 +1,3 @@ |
||||
import type { IWebdavAccountPayload } from '../../../../definition/IWebdavAccount'; |
||||
|
||||
export type AddWebdavAccountMethod = (data: IWebdavAccountPayload) => void; |
||||
@ -0,0 +1,94 @@ |
||||
import { Modal, Field, FieldGroup, TextInput, PasswordInput, ButtonGroup, Button } from '@rocket.chat/fuselage'; |
||||
import React, { useState, ReactElement } from 'react'; |
||||
import { useForm, SubmitHandler } from 'react-hook-form'; |
||||
|
||||
import { IWebdavAccountPayload } from '../../../../definition/IWebdavAccount'; |
||||
import { useMethod } from '../../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
|
||||
type AddWebdavAccountModalPayload = IWebdavAccountPayload; |
||||
|
||||
type AddWebdavAccountModalProps = { |
||||
onClose: () => void; |
||||
onConfirm: () => void; |
||||
}; |
||||
|
||||
const AddWebdavAccountModal = ({ onClose, onConfirm }: AddWebdavAccountModalProps): ReactElement => { |
||||
const handleAddWebdavAccount = useMethod('addWebdavAccount'); |
||||
const dispatchToastMessage = useToastMessageDispatch(); |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const { |
||||
register, |
||||
handleSubmit, |
||||
formState: { errors }, |
||||
} = useForm<AddWebdavAccountModalPayload>(); |
||||
const t = useTranslation(); |
||||
|
||||
const onSubmit: SubmitHandler<AddWebdavAccountModalPayload> = async (data) => { |
||||
setIsLoading(true); |
||||
|
||||
try { |
||||
await handleAddWebdavAccount(data); |
||||
return dispatchToastMessage({ type: 'success', message: t('webdav-account-saved') }); |
||||
} catch (error) { |
||||
console.error(error); |
||||
return dispatchToastMessage({ type: 'error', message: error }); |
||||
} finally { |
||||
onConfirm(); |
||||
setIsLoading(false); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<Modal is='form' onSubmit={handleSubmit(onSubmit)}> |
||||
<Modal.Header> |
||||
<Modal.Title>{t('Webdav_add_new_account')}</Modal.Title> |
||||
<Modal.Close onClick={onClose} /> |
||||
</Modal.Header> |
||||
<Modal.Content> |
||||
<FieldGroup> |
||||
<Field> |
||||
<Field.Label>{t('Name_optional')}</Field.Label> |
||||
<Field.Row> |
||||
<TextInput placeholder={t('Name_optional')} {...register('name')} /> |
||||
</Field.Row> |
||||
</Field> |
||||
<Field> |
||||
<Field.Label>{t('Webdav_Server_URL')}</Field.Label> |
||||
<Field.Row> |
||||
<TextInput placeholder={t('Webdav_Server_URL')} {...register('serverURL', { required: true })} /> |
||||
</Field.Row> |
||||
{errors.serverURL && <Field.Error>{t('error-the-field-is-required', { field: t('Webdav_Server_URL') })}</Field.Error>} |
||||
</Field> |
||||
<Field> |
||||
<Field.Label>{t('Username')}</Field.Label> |
||||
<Field.Row> |
||||
<TextInput placeholder={t('Username')} {...register('username', { required: true })} /> |
||||
</Field.Row> |
||||
{errors.username && <Field.Error>{t('error-the-field-is-required', { field: t('Username') })}</Field.Error>} |
||||
</Field> |
||||
<Field> |
||||
<Field.Label>{t('Password')}</Field.Label> |
||||
<Field.Row> |
||||
<PasswordInput placeholder={t('Password')} {...register('password', { required: true })} /> |
||||
</Field.Row> |
||||
{errors.password && <Field.Error>{t('error-the-field-is-required', { field: t('Password') })}</Field.Error>} |
||||
</Field> |
||||
</FieldGroup> |
||||
</Modal.Content> |
||||
<Modal.Footer> |
||||
<ButtonGroup align='end'> |
||||
<Button ghost onClick={onClose}> |
||||
{t('Cancel')} |
||||
</Button> |
||||
<Button primary type='submit' disabled={isLoading}> |
||||
{isLoading ? t('Please_wait') : t('Webdav_add_new_account')} |
||||
</Button> |
||||
</ButtonGroup> |
||||
</Modal.Footer> |
||||
</Modal> |
||||
); |
||||
}; |
||||
|
||||
export default AddWebdavAccountModal; |
||||
Loading…
Reference in new issue