Skip to content

Commit 74b61ce

Browse files
kevinansfieldkevinansfield
authored
Revert "Improved OTP input styles in Portal (#25040)" (#25050)
This reverts commit 64b03cb. - holding off on merge until after scheduled release
1 parent 64b03cb commit 74b61ce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+95
-168
lines changed

‎apps/portal/src/components/Frame.styles.js‎

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -764,75 +764,6 @@ html[dir="rtl"] .gh-portal-list-toggle-wrapper .gh-portal-list-detail {
764764
margin-top: 6px;
765765
}
766766
767-
.gh-portal-otp {
768-
display: flex;
769-
flex-direction: column;
770-
align-items: center;
771-
margin-bottom: 16px;
772-
}
773-
774-
.gh-portal-otp-field-container {
775-
font-size: 2rem !important;
776-
font-weight: 400;
777-
letter-spacing: 2ch;
778-
border: 1px solid var(--grey12);
779-
border-radius: 8px;
780-
font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
781-
width: 18.25ch;
782-
overflow-hidden;
783-
background: linear-gradient(to right,
784-
transparent 0%,
785-
transparent calc(16.666%),
786-
var(--grey12) calc(16.666% - 1px),
787-
var(--grey12) calc(16.666% + 1px),
788-
transparent calc(16.666% + 1px),
789-
transparent calc(33.333%),
790-
var(--grey12) calc(33.333% - 1px),
791-
var(--grey12) calc(33.333% + 1px),
792-
transparent calc(33.333% + 1px),
793-
transparent calc(50%),
794-
var(--grey12) calc(50% - 1px),
795-
var(--grey12) calc(50% + 1px),
796-
transparent calc(50% + 1px),
797-
transparent calc(66.666%),
798-
var(--grey12) calc(66.666% - 1px),
799-
var(--grey12) calc(66.666% + 1px),
800-
transparent calc(66.666% + 1px),
801-
transparent calc(83.333%),
802-
var(--grey12) calc(83.333% - 1px),
803-
var(--grey12) calc(83.333% + 1px),
804-
transparent calc(83.333% + 1px),
805-
transparent 100%
806-
);
807-
}
808-
809-
.gh-portal-otp-field-container.error {
810-
border-color: var(--red);
811-
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
812-
}
813-
814-
.gh-portal-otp .gh-portal-input {
815-
font-size: 2rem !important;
816-
font-weight: 400;
817-
letter-spacing: 2ch;
818-
padding: 0;
819-
font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
820-
width: 21ch;
821-
padding-left: 1ch;
822-
clip-path: inset(0 3ch 0 0);
823-
border: none;
824-
margin-bottom: 0;
825-
}
826-
827-
.gh-portal-otp-error {
828-
margin-top: 8px;
829-
color: var(--red);
830-
font-size: 1.3rem;
831-
letter-spacing: 0.35px;
832-
line-height: 1.6em;
833-
margin-bottom: 0;
834-
}
835-
836767
/* Icons
837768
/* ----------------------------------------------------- */
838769
.gh-portal-icon {

‎apps/portal/src/components/common/InputField.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,15 @@ function InputField({
127127
case 'input-name':
128128
autoComplete = 'off';
129129
autoCorrect = 'off';
130+
break;
131+
case 'input-otc':
132+
autoComplete = 'one-time-code';
133+
autoCorrect = 'off';
134+
autoCapitalize = 'off';
135+
inputMode = 'numeric';
136+
pattern = '[0-9]*';
137+
placeholder ??= '• • • • • •';
138+
130139
break;
131140
default:
132141
break;

‎apps/portal/src/components/pages/MagicLinkPage.js‎

Lines changed: 20 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import CloseButton from '../common/CloseButton';
44
import AppContext from '../../AppContext';
55
import {ReactComponent as EnvelopeIcon} from '../../images/icons/envelope.svg';
66

7+
import InputField from '../common/InputField';
8+
79
export const MagicLinkStyles = `
810
.gh-portal-icon-envelope {
911
width: 44px;
@@ -142,7 +144,7 @@ export default class MagicLinkPage extends React.Component {
142144
const code = (state.otc || '').trim();
143145
return {
144146
errors: {
145-
[OTC_FIELD_NAME]: code ? '' : t('Enter code above')
147+
[OTC_FIELD_NAME]: code ? '' : t('Enter code below')
146148
}
147149
};
148150
}, () => {
@@ -159,19 +161,9 @@ export default class MagicLinkPage extends React.Component {
159161

160162
handleInputChange(e, field) {
161163
const fieldName = field.name;
162-
const value = e.target.value;
163-
164-
// For OTC field, only allow numeric input
165-
if (fieldName === OTC_FIELD_NAME) {
166-
const numericValue = value.replace(/[^0-9]/g, '');
167-
this.setState({
168-
[fieldName]: numericValue
169-
});
170-
} else {
171-
this.setState({
172-
[fieldName]: value
173-
});
174-
}
164+
this.setState({
165+
[fieldName]: e.target.value
166+
});
175167
}
176168

177169
renderOTCForm() {
@@ -188,26 +180,20 @@ export default class MagicLinkPage extends React.Component {
188180

189181
return (
190182
<form onSubmit={e => this.handleSubmit(e)}>
191-
<section className='gh-portal-section gh-portal-otp'>
192-
<div className={`gh-portal-otp-field-container ${errors.otc ? 'error' : ''}`}>
193-
<input
194-
id={`input-${OTC_FIELD_NAME}`}
195-
className={`gh-portal-input ${errors.otc ? 'error' : ''}`}
196-
name={OTC_FIELD_NAME}
197-
type="text"
198-
value={this.state.otc}
199-
inputMode="numeric"
200-
pattern="[0-9]*"
201-
aria-label={t('Code')}
202-
autoFocus={false}
203-
maxLength={6}
204-
onChange={e => this.handleInputChange(e, {name: OTC_FIELD_NAME})}
205-
/>
206-
</div>
207-
{errors.otc &&
208-
<div className="gh-portal-otp-error">
209-
{errors.otc}
210-
</div>}
183+
<section className='gh-portal-section'>
184+
{/* @TODO: create different input component with updated design */}
185+
<InputField
186+
id={`input-${OTC_FIELD_NAME}`}
187+
name={OTC_FIELD_NAME}
188+
type="text"
189+
value={this.state.otc}
190+
placeholder="• • • • • •"
191+
label={t('Code')}
192+
errorMessage={errors.otc || ''}
193+
autoFocus={false}
194+
maxLength={6}
195+
onChange={e => this.handleInputChange(e, {name: OTC_FIELD_NAME})}
196+
/>
211197
</section>
212198
<footer className='gh-portal-signin-footer'>
213199
<ActionButton

‎apps/portal/src/components/pages/MagicLinkPage.test.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {render, fireEvent} from '../../utils/test-utils';
22
import MagicLinkPage from './MagicLinkPage';
33

44
const OTC_LABEL_REGEX = /Code/i;
5-
const OTC_ERROR_REGEX = /Enter code/i;
5+
const OTC_ERROR_REGEX = /Enter code below/i;
66

77
const setupTest = (options = {}) => {
88
const {
@@ -106,6 +106,7 @@ describe('MagicLinkPage', () => {
106106
const otcInput = utils.getByLabelText(OTC_LABEL_REGEX);
107107

108108
expect(otcInput).toHaveAttribute('type', 'text');
109+
expect(otcInput).toHaveAttribute('placeholder', '• • • • • •');
109110
expect(otcInput).toHaveAttribute('name', 'otc');
110111
expect(otcInput).toHaveAttribute('id', 'input-otc');
111112
expect(otcInput).toHaveAccessibleName(OTC_LABEL_REGEX);

‎ghost/i18n/locales/af/portal.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"Emails": "E-posse",
6767
"Emails disabled": "E-posse afgeskakel",
6868
"Ends {offerEndDate}": "Eindig {offerEndDate}",
69-
"Enter code above": "",
69+
"Enter code below": "",
7070
"Enter your email address": "",
7171
"Enter your name": "",
7272
"Error": "Fout",

‎ghost/i18n/locales/ar/portal.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"Emails": "رسائل البريد الإلكتروني",
6767
"Emails disabled": "تم تعطيل جميع رسائل البريد الإلكتروني",
6868
"Ends {offerEndDate}": "{offerEndDate} ينتهي في ",
69-
"Enter code above": "",
69+
"Enter code below": "",
7070
"Enter your email address": "أدخل عنوان بريدك الإلكتروني",
7171
"Enter your name": "أدخل اسمك",
7272
"Error": "خطأ",

‎ghost/i18n/locales/bg/portal.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"Emails": "Имейли",
6767
"Emails disabled": "Имейлите са спрени",
6868
"Ends {offerEndDate}": "До {offerEndDate}",
69-
"Enter code above": "",
69+
"Enter code below": "Въведете кода по-долу",
7070
"Enter your email address": "Попълнете своя имейл адрес",
7171
"Enter your name": "Попълнете вашето име",
7272
"Error": "Грешка",

‎ghost/i18n/locales/bn/portal.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"Emails": "ইমেল",
6767
"Emails disabled": "ইমেল নিষ্ক্রিয়",
6868
"Ends {offerEndDate}": "{offerEndDate} এ শেষ হবে",
69-
"Enter code above": "",
69+
"Enter code below": "",
7070
"Enter your email address": "",
7171
"Enter your name": "",
7272
"Error": "ত্রুটি",

‎ghost/i18n/locales/bs/portal.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"Emails": "Email adrese",
6767
"Emails disabled": "Onemogućene Email adrese",
6868
"Ends {offerEndDate}": "Završava {offerEndDate}",
69-
"Enter code above": "",
69+
"Enter code below": "",
7070
"Enter your email address": "",
7171
"Enter your name": "",
7272
"Error": "Greška",

‎ghost/i18n/locales/ca/portal.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"Emails": "Correus electrònics",
6767
"Emails disabled": "Correus electrònics desactivats",
6868
"Ends {offerEndDate}": "Finalitza el {offerEndDate}",
69-
"Enter code above": "",
69+
"Enter code below": "",
7070
"Enter your email address": "Escriu la teva adreça d'email",
7171
"Enter your name": "Escriu el teu nom",
7272
"Error": "Error",

0 commit comments

Comments
 (0)