Skip to content

Commit

Permalink
[change] Reusable fuction for errors #357
Browse files Browse the repository at this point in the history 
Added get-error-field to remove repeated code.

Closes #357
  • Loading branch information
@codesankalp
codesankalp committed Aug 24, 2021
1 parent a7bf82f commit 8a8db0d
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 208 deletions.
29 changes: 5 additions & 24 deletions client/components/login/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import handleChange from "../../utils/handle-change";
import Contact from "../contact-box";
import Modal from "../modal";
import {Status} from "../organization-wrapper/lazy-import";
import getErrorField from "../../utils/get-error-field";

const PhoneInput = React.lazy(() => import("react-phone-input-2"));

Expand Down Expand Up @@ -111,12 +112,7 @@ export default class Login extends React.Component {
return (
<div className="row username">
<label htmlFor="username">{label}</label>
{errors.username && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.username}</span>
</div>
)}
{getErrorField(errors, "username")}
<input
className={`input ${errors.username ? "error" : ""}`}
type={input_fields.username.type}
Expand All @@ -139,12 +135,7 @@ export default class Login extends React.Component {
return (
<div className="row phone-number">
<label htmlFor="phone-number">{t`PHONE_LBL`}</label>
{errors.username && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.username}</span>
</div>
)}
{getErrorField(errors, "username")}
<Suspense
fallback={
<input
Expand Down Expand Up @@ -340,23 +331,13 @@ export default class Login extends React.Component {
{getHtml(help_html, language, "help-container")}

<div className="fieldset">
{errors.nonField && (
<div className="error non-field">
<span className="icon">!</span>
<span className="text">{errors.nonField}</span>
</div>
)}
{getErrorField(errors, "nonField", true)}

{this.getUsernameField(input_fields)}

<div className="row password">
<label htmlFor="password">{t`PWD_LBL`}</label>
{errors.password && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.password}</span>
</div>
)}
{getErrorField(errors, "password")}
<input
className={`input ${errors.password ? "error" : ""}`}
type="password"
Expand Down
16 changes: 3 additions & 13 deletions client/components/mobile-phone-change/mobile-phone-change.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import submitOnEnter from "../../utils/submit-on-enter";
import Contact from "../contact-box";
import handleSession from "../../utils/session";
import validateToken from "../../utils/validate-token";
import getErrorField from "../../utils/get-error-field";

const PhoneInput = React.lazy(() => import("react-phone-input-2"));

Expand Down Expand Up @@ -127,21 +128,10 @@ class MobilePhoneChange extends React.Component {
>
<div className="inner">
<div className="fieldset row">
{errors.nonField && (
<div className="error non-field">
<span className="icon">!</span>
<span className="text">{errors.nonField}</span>
</div>
)}

{getErrorField(errors, "nonField", true)}
<div className="row phone-number">
<label htmlFor="phone-number">{t`PHONE_LBL`}</label>
{errors.phone_number && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.phone_number}</span>
</div>
)}
{getErrorField(errors, "phone_number")}
<Suspense
fallback={
<input
Expand Down
16 changes: 3 additions & 13 deletions client/components/mobile-phone-verification/mobile-phone-verification.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import Contact from "../contact-box";
import handleSession from "../../utils/session";
import validateToken from "../../utils/validate-token";
import handleLogout from "../../utils/handle-logout";
import getErrorField from "../../utils/get-error-field";

export default class MobilePhoneVerification extends React.Component {
phoneTokenSentKey = "owPhoneTokenSent";
Expand Down Expand Up @@ -189,21 +190,10 @@ export default class MobilePhoneVerification extends React.Component {
>
<div className="row fieldset code">
<p className="label">{t`PHONE_VERIFY (${phone_number})`}</p>

{errors.nonField && (
<div className="error non-field">
<span className="icon">!</span>
<span className="text">{errors.nonField}</span>
</div>
)}
{getErrorField(errors, "nonField", true)}

<div className="row">
{errors.code && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.code}</span>
</div>
)}
{getErrorField(errors, "code")}
<input
className={`input ${
errors.code || errors.nonField ? "error" : ""
Expand Down
25 changes: 4 additions & 21 deletions client/components/password-change/password-change.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import logError from "../../utils/log-error";
import handleChange from "../../utils/handle-change";
import handleSession from "../../utils/session";
import validateToken from "../../utils/validate-token";
import getErrorField from "../../utils/get-error-field";

export default class PasswordChange extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -102,23 +103,11 @@ export default class PasswordChange extends React.Component {
<form className="main-column" onSubmit={this.handleSubmit}>
<div className="inner">
<h1>{t`PWD_CHANGE_TITL`}</h1>

{errors.nonField && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.nonField}</span>
</div>
)}
{getErrorField(errors, "nonField", true)}

<div className="row password">
<label htmlFor="password">{t`PWD1_LBL`}</label>

{errors.newPassword1 && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.newPassword1}</span>
</div>
)}
{getErrorField(errors, "newPassword1")}

<input
className="input"
Expand All @@ -144,13 +133,7 @@ export default class PasswordChange extends React.Component {

<div className="row password-confirm">
<label htmlFor="password-confirm">{t`CONFIRM_PWD_LBL`}</label>

{errors.newPassword2 && (
<div className="error">
<span className="icon">!</span>
<span className="text">{errors.newPassword2}</span>
</div>
)}
{getErrorField(errors, "newPassword2")}

<input
className="input"
Expand Down
24 changes: 4 additions & 20 deletions client/components/password-confirm/password-confirm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {confirmApiUrl} from "../../constants";
import getErrorText from "../../utils/get-error-text";
import logError from "../../utils/log-error";
import handleChange from "../../utils/handle-change";
import getErrorField from "../../utils/get-error-field";

export default class PasswordConfirm extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -136,22 +137,11 @@ export default class PasswordConfirm extends React.Component {
)}

<div className="fieldset">
{errors.nonField && (
<div className="error non-field">
<span className="icon">!</span>
<span className="text">{errors.nonField}</span>
</div>
)}
{getErrorField(errors, "nonField", true)}

<div className="row password">
<label htmlFor="password">{t`PWD_LBL`}</label>

{errors.newPassword1 && (
<div className="error">
<span className="icon">!</span>
<span className="text ">{errors.newPassword1}</span>
</div>
)}
{getErrorField(errors, "newPassword1")}

<input
className={`input ${errors.newPassword1 ? "error" : ""}`}
Expand Down Expand Up @@ -179,13 +169,7 @@ export default class PasswordConfirm extends React.Component {

<div className="row password-confirm">
<label htmlFor="password-confirm">{t`CONFIRM_PWD_LBL`}</label>

{errors.newPassword2 && (
<div className="error">
<span className="icon">!</span>
<span className="text ">{errors.newPassword2}</span>
</div>
)}
{getErrorField(errors, "newPassword2")}

<input
className={`input ${errors.newPassword2 ? "error" : ""}`}
Expand Down
8 changes: 2 additions & 6 deletions client/components/password-reset/password-reset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import getErrorText from "../../utils/get-error-text";
import logError from "../../utils/log-error";
import handleChange from "../../utils/handle-change";
import Contact from "../contact-box";
import getErrorField from "../../utils/get-error-field";

export default class PasswordReset extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -101,12 +102,7 @@ export default class PasswordReset extends React.Component {
<div className="fieldset">
<div className="row email">
<label htmlFor="email">{t`EMAIL`}</label>
{errors.email && (
<div className="error">
<span className="icon">!</span>
<span className="text email">{errors.email}</span>
</div>
)}
{getErrorField(errors, "email")}
<input
className={`input ${errors.email ? "error" : ""}`}
type="email"
Expand Down
Loading

0 comments on commit 8a8db0d

Please sign in to comment.