From 820094bea7f19f987c545515243337a83c6cbb86 Mon Sep 17 00:00:00 2001 From: sara hammouzou <41330038+saruwman@users.noreply.github.com> Date: Sun, 17 May 2020 08:51:58 +0000 Subject: Replace change server input with a dropdown menu (#717) --- src/components/auth/ChangeServer.js | 66 ++++++++++++++++++++++++++++++++----- 1 file changed, 57 insertions(+), 9 deletions(-) (limited to 'src/components/auth') diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js index 433334b6c..68c2303a4 100644 --- a/src/components/auth/ChangeServer.js +++ b/src/components/auth/ChangeServer.js @@ -2,10 +2,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; - import Form from '../../lib/Form'; import Input from '../ui/Input'; +import Select from '../ui/Select'; import Button from '../ui/Button'; +import Infobox from '../ui/Infobox'; +import { url, required } from '../../helpers/validation-helpers'; const messages = defineMessages({ headline: { @@ -16,10 +18,23 @@ const messages = defineMessages({ id: 'changeserver.label', defaultMessage: '!!!Server', }, + warning: { + id: 'changeserver.warning', + defaultMessage: '!!!Extra settings offered by Ferdi will not be saved', + }, + customServerLabel: { + id: 'changeserver.customServerLabel', + defaultMessage: '!!!Custom server', + }, + urlError: { + id: 'changeserver.urlError', + defaultMessage: '!!!Enter a valid URL', + }, submit: { id: 'changeserver.submit', defaultMessage: '!!!Submit', }, + }); export default @observer class ChangeServer extends Component { @@ -32,42 +47,75 @@ export default @observer class ChangeServer extends Component { intl: intlShape, }; + ferdiServer='https://api.getferdi.com'; + + franzServer='https://api.franzinfra.com'; + + defaultServers=[this.franzServer, this.ferdiServer]; + form = new Form({ fields: { server: { label: this.context.intl.formatMessage(messages.label), + value: this.props.server, + options: [{ value: this.ferdiServer, label: 'Ferdi' }, { value: this.franzServer, label: 'Franz' }, { value: this.defaultServers.includes(this.props.server) ? '' : this.props.server, label: 'Custom' }], + }, + customServer: { + label: this.context.intl.formatMessage(messages.customServerLabel), value: '', + validators: [url, required], }, }, }, this.context.intl); componentDidMount() { - this.form.$('server').value = this.props.server; + if (this.defaultServers.includes(this.props.server)) { + this.form.$('server').value = this.props.server; + } else { + this.form.$('server').value = ''; + this.form.$('customServer').value = this.props.server; + } } submit(e) { e.preventDefault(); this.form.submit({ onSuccess: (form) => { + if (!this.defaultServers.includes(form.values().server)) { + form.$('server').onChange(form.values().customServer); + } this.props.onSubmit(form.values()); }, - onError: () => { }, + onError: (form) => { + if (this.defaultServers.includes(form.values().server)) { + this.props.onSubmit(form.values()); + } + }, }); } render() { const { form } = this; const { intl } = this.context; - return (