Full UIAA implement (#93), #32, #146, #64, #102

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-11-06 15:15:35 +05:30
parent 3d885ec262
commit a83aecaa69
13 changed files with 850 additions and 708 deletions

14
config.json Normal file
View file

@ -0,0 +1,14 @@
{
"defaultHomeserver": 5,
"homeserverList": [
"boba.best",
"converser.eu",
"envs.net",
"halogen.city",
"kde.org",
"matrix.org",
"mozilla.modular.im",
"perthchat.org",
"ru-matrix.org"
]
}

89
package-lock.json generated
View file

@ -16,6 +16,7 @@
"dateformat": "^4.5.1", "dateformat": "^4.5.1",
"emojibase-data": "^6.2.0", "emojibase-data": "^6.2.0",
"flux": "^4.0.1", "flux": "^4.0.1",
"formik": "^2.2.9",
"html-react-parser": "^1.2.7", "html-react-parser": "^1.2.7",
"linkify-react": "^3.0.3", "linkify-react": "^3.0.3",
"matrix-js-sdk": "^12.4.1", "matrix-js-sdk": "^12.4.1",
@ -5558,6 +5559,14 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true "dev": true
}, },
"node_modules/deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/default-gateway": { "node_modules/default-gateway": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz", "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@ -7738,6 +7747,34 @@
"node": ">=0.4.x" "node": ">=0.4.x"
} }
}, },
"node_modules/formik": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
"funding": [
{
"type": "individual",
"url": "https://opencollective.com/formik"
}
],
"dependencies": {
"deepmerge": "^2.1.1",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-fast-compare": "^2.0.1",
"tiny-warning": "^1.0.2",
"tslib": "^1.10.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/formik/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/forwarded": { "node_modules/forwarded": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -10297,8 +10334,12 @@
"node_modules/lodash": { "node_modules/lodash": {
"version": "4.17.21", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
"dev": true },
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
}, },
"node_modules/lodash.clonedeep": { "node_modules/lodash.clonedeep": {
"version": "4.5.0", "version": "4.5.0",
@ -14723,6 +14764,11 @@
"react": "17.0.2" "react": "17.0.2"
} }
}, },
"node_modules/react-fast-compare": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"node_modules/react-google-recaptcha": { "node_modules/react-google-recaptcha": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz", "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz",
@ -23806,6 +23852,11 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true "dev": true
}, },
"deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
},
"default-gateway": { "default-gateway": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz", "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@ -25526,6 +25577,27 @@
"resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
"integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=" "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
}, },
"formik": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
"requires": {
"deepmerge": "^2.1.1",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-fast-compare": "^2.0.1",
"tiny-warning": "^1.0.2",
"tslib": "^1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"forwarded": { "forwarded": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -27531,8 +27603,12 @@
"lodash": { "lodash": {
"version": "4.17.21", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
"dev": true },
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
}, },
"lodash.clonedeep": { "lodash.clonedeep": {
"version": "4.5.0", "version": "4.5.0",
@ -30822,6 +30898,11 @@
"scheduler": "^0.20.2" "scheduler": "^0.20.2"
} }
}, },
"react-fast-compare": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"react-google-recaptcha": { "react-google-recaptcha": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz", "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz",

View file

@ -22,6 +22,7 @@
"dateformat": "^4.5.1", "dateformat": "^4.5.1",
"emojibase-data": "^6.2.0", "emojibase-data": "^6.2.0",
"flux": "^4.0.1", "flux": "^4.0.1",
"formik": "^2.2.9",
"html-react-parser": "^1.2.7", "html-react-parser": "^1.2.7",
"linkify-react": "^3.0.3", "linkify-react": "^3.0.3",
"matrix-js-sdk": "^12.4.1", "matrix-js-sdk": "^12.4.1",

View file

@ -6,13 +6,14 @@ import Text from '../text/Text';
import RawIcon from '../system-icons/RawIcon'; import RawIcon from '../system-icons/RawIcon';
import { blurOnBubbling } from './script'; import { blurOnBubbling } from './script';
function Button({ const Button = React.forwardRef(({
id, className, variant, iconSrc, id, className, variant, iconSrc,
type, onClick, children, disabled, type, onClick, children, disabled,
}) { }, ref) => {
const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`; const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
return ( return (
<button <button
ref={ref}
id={id === '' ? undefined : id} id={id === '' ? undefined : id}
className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`} className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)} onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
@ -26,7 +27,7 @@ function Button({
{typeof children !== 'string' && children } {typeof children !== 'string' && children }
</button> </button>
); );
} });
Button.defaultProps = { Button.defaultProps = {
id: '', id: '',

View file

@ -5,7 +5,7 @@ import './Input.scss';
import TextareaAutosize from 'react-autosize-textarea'; import TextareaAutosize from 'react-autosize-textarea';
function Input({ function Input({
id, label, value, placeholder, id, label, name, value, placeholder,
required, type, onChange, forwardRef, required, type, onChange, forwardRef,
resizable, minHeight, onResize, state, resizable, minHeight, onResize, state,
onKeyDown, onKeyDown,
@ -17,6 +17,7 @@ function Input({
? ( ? (
<TextareaAutosize <TextareaAutosize
style={{ minHeight: `${minHeight}px` }} style={{ minHeight: `${minHeight}px` }}
name={name}
id={id} id={id}
className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`} className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
ref={forwardRef} ref={forwardRef}
@ -33,6 +34,7 @@ function Input({
<input <input
ref={forwardRef} ref={forwardRef}
id={id} id={id}
name={name}
className={`input ${state !== 'normal' ? ` input--${state}` : ''}`} className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
type={type} type={type}
placeholder={placeholder} placeholder={placeholder}
@ -49,6 +51,7 @@ function Input({
Input.defaultProps = { Input.defaultProps = {
id: null, id: null,
name: '',
label: '', label: '',
value: '', value: '',
placeholder: '', placeholder: '',
@ -65,6 +68,7 @@ Input.defaultProps = {
Input.propTypes = { Input.propTypes = {
id: PropTypes.string, id: PropTypes.string,
name: PropTypes.string,
label: PropTypes.string, label: PropTypes.string,
value: PropTypes.string, value: PropTypes.string,
placeholder: PropTypes.string, placeholder: PropTypes.string,

View file

@ -1,107 +1,41 @@
import React, { useEffect, useState } from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './SSOButtons.scss'; import './SSOButtons.scss';
import { createTemporaryClient, getLoginFlows, startSsoLogin } from '../../../client/action/auth'; import { createTemporaryClient, startSsoLogin } from '../../../client/action/auth';
import Text from '../../atoms/text/Text'; import Button from '../../atoms/button/Button';
function SSOButtons({ homeserver }) { function SSOButtons({ type, identityProviders, baseUrl }) {
const [identityProviders, setIdentityProviders] = useState([]); const tempClient = createTemporaryClient(baseUrl);
function handleClick(id) {
useEffect(() => { startSsoLogin(baseUrl, type, id);
// Reset sso proviers to avoid displaying sso icons if the homeserver is not valid
setIdentityProviders([]);
// If the homeserver passed in is not a fully-qualified domain name, do not update.
if (!homeserver.match('^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\\.[a-zA-Z]{2,})+$')) {
return;
} }
// TODO Check that there is a Matrix server at homename before making requests.
// This will prevent the CORS errors that happen when a user changes their homeserver.
createTemporaryClient(homeserver).then((client) => {
const providers = [];
getLoginFlows(client).then((flows) => {
if (flows.flows !== undefined) {
const ssoFlows = flows.flows.filter((flow) => flow.type === 'm.login.sso' || flow.type === 'm.login.cas');
ssoFlows.forEach((flow) => {
if (flow.identity_providers !== undefined) {
const type = flow.type.substring(8);
flow.identity_providers.forEach((idp) => {
const imageSrc = client.mxcUrlToHttp(idp.icon);
providers.push({
homeserver, id: idp.id, name: idp.name, type, imageSrc,
});
});
}
});
}
setIdentityProviders(providers);
}).catch(() => {});
}).catch(() => {
setIdentityProviders([]);
});
}, [homeserver]);
if (identityProviders.length === 0) return <></>;
return ( return (
<div className="sso-buttons"> <div className="sso-buttons">
<div className="sso-buttons__divider">
<Text>OR</Text>
</div>
<div className="sso-buttons__container">
{identityProviders {identityProviders
// Sort by alphabetical order
.sort((idp, idp2) => { .sort((idp, idp2) => {
if (typeof idp.imageSrc !== 'string') return -1; if (typeof idp.icon !== 'string') return -1;
return idp.name.toLowerCase() > idp2.name.toLowerCase() ? 1 : -1; return idp.name.toLowerCase() > idp2.name.toLowerCase() ? 1 : -1;
}) })
.map((idp) => ( .map((idp) => (
<SSOButton idp.icon
key={idp.id} ? (
homeserver={idp.homeserver} <button key={idp.id} type="button" className="sso-btn" onClick={() => handleClick(idp.id)}>
id={idp.id} <img className="sso-btn__img" src={tempClient.mxcUrlToHttp(idp.icon, 36, 36, 'crop')} alt={idp.name} />
name={idp.name} </button>
type={idp.type} ) : <Button key={idp.id} className="sso-btn__text-only" onClick={() => handleClick(idp.id)}>{`Login with ${idp.name}`}</Button>
imageSrc={idp.imageSrc}
/>
))} ))}
</div> </div>
</div>
);
}
function SSOButton({
homeserver, id, name, type, imageSrc,
}) {
const isImageAvail = !!imageSrc;
function handleClick() {
startSsoLogin(homeserver, type, id);
}
return (
<button
type="button"
className={`sso-btn${!isImageAvail ? ' sso-btn__text-only' : ''}`}
onClick={handleClick}
>
{isImageAvail && <img className="sso-btn__img" src={imageSrc} alt={name} />}
{!isImageAvail && <Text>{`Login with ${name}`}</Text>}
</button>
); );
} }
SSOButtons.propTypes = { SSOButtons.propTypes = {
homeserver: PropTypes.string.isRequired, identityProviders: PropTypes.arrayOf(
}; PropTypes.shape({}),
).isRequired,
SSOButton.propTypes = { baseUrl: PropTypes.string.isRequired,
homeserver: PropTypes.string.isRequired, type: PropTypes.oneOf(['sso', 'cas']).isRequired,
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
imageSrc: PropTypes.string.isRequired,
}; };
export default SSOButtons; export default SSOButtons;

View file

@ -1,22 +1,7 @@
.sso-buttons { .sso-buttons {
&__divider {
display: flex;
align-items: center;
&::before,
&::after {
flex: 1;
content: '';
margin: var(--sp-tight);
border-bottom: 1px solid var(--bg-surface-border);
}
}
&__container {
margin-bottom: var(--sp-extra-loose);
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
}
} }
.sso-btn { .sso-btn {
@ -31,11 +16,8 @@
width: var(--av-small); width: var(--av-small);
} }
&__text-only { &__text-only {
margin-top: var(--sp-normal);
flex-basis: 100%; flex-basis: 100%;
text-align: center;
margin: var(--sp-tight) 0px;
cursor: pointer;
& .text { & .text {
color: var(--tc-link); color: var(--tc-link);
} }

View file

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import './Settings.scss'; import './Settings.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import settings from '../../../client/state/settings'; import settings from '../../../client/state/settings';
import { toggleMarkdown } from '../../../client/action/settings'; import { toggleMarkdown } from '../../../client/action/settings';
@ -104,7 +105,7 @@ function AboutSection() {
<div> <div>
<Text variant="h2"> <Text variant="h2">
Cinny Cinny
<span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.4.0</span> <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
</Text> </Text>
<Text>Yet another matrix client</Text> <Text>Yet another matrix client</Text>

View file

@ -1,11 +1,14 @@
import React, { useState, useRef } from 'react'; /* eslint-disable react/prop-types */
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './Auth.scss'; import './Auth.scss';
import ReCAPTCHA from 'react-google-recaptcha'; import ReCAPTCHA from 'react-google-recaptcha';
import { Formik } from 'formik';
import { useLocation } from 'react-router-dom';
import * as auth from '../../../client/action/auth'; import * as auth from '../../../client/action/auth';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import { Debounce, getUrlPrams } from '../../../util/common';
import { getBaseUrl } from '../../../util/matrixUtil';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button'; import Button from '../../atoms/button/Button';
@ -13,356 +16,552 @@ import IconButton from '../../atoms/button/IconButton';
import Input from '../../atoms/input/Input'; import Input from '../../atoms/input/Input';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
import ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import Header, { TitleWrapper } from '../../atoms/header/Header';
import Avatar from '../../atoms/avatar/Avatar';
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
import EyeIC from '../../../../public/res/ic/outlined/eye.svg'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import CinnySvg from '../../../../public/res/svg/cinny.svg'; import CinnySvg from '../../../../public/res/svg/cinny.svg';
import SSOButtons from '../../molecules/sso-buttons/SSOButtons'; import SSOButtons from '../../molecules/sso-buttons/SSOButtons';
// This regex validates historical usernames, which don't satisfy today's username requirements.
// See https://matrix.org/docs/spec/appendices#id13 for more info.
const LOCALPART_LOGIN_REGEX = /.*/;
const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/; const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/;
const BAD_LOCALPART_ERROR = 'Username must contain only a-z, 0-9, ., _, =, -, and /.'; const BAD_LOCALPART_ERROR = 'Username can only contain characters a-z, 0-9, or \'=_-./\'';
const USER_ID_TOO_LONG_ERROR = 'Your user ID, including the hostname, can\'t be more than 255 characters long.'; const USER_ID_TOO_LONG_ERROR = 'Your user ID, including the hostname, can\'t be more than 255 characters long.';
const PASSWORD_REGEX = /.+/;
const PASSWORD_STRENGHT_REGEX = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,127}$/; const PASSWORD_STRENGHT_REGEX = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,127}$/;
const BAD_PASSWORD_ERROR = 'Password must contain at least 1 number, 1 uppercase letter, 1 lowercase letter, 1 non-alphanumeric character. Passwords can range from 8-127 characters with no whitespaces.'; const BAD_PASSWORD_ERROR = 'Password must contain at least 1 lowercase, 1 uppercase, 1 number, 1 non-alphanumeric character, 8-127 characters with no space.';
const CONFIRM_PASSWORD_ERROR = 'Passwords don\'t match.'; const CONFIRM_PASSWORD_ERROR = 'Passwords don\'t match.';
const EMAIL_REGEX = /([a-z0-9]+[_a-z0-9.-][a-z0-9]+)@([a-z0-9-]+(?:.[a-z0-9-]+).[a-z]{2,4})/; const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const BAD_EMAIL_ERROR = 'Invalid email address'; const BAD_EMAIL_ERROR = 'Invalid email address';
function isValidInput(value, regex) { function isValidInput(value, regex) {
if (typeof regex === 'string') return regex === value; if (typeof regex === 'string') return regex === value;
return regex.test(value); return regex.test(value);
} }
function renderErrorMessage(error) {
const $error = document.getElementById('auth_error');
$error.textContent = error;
$error.style.display = 'block';
}
function showBadInputError($input, error, stopAutoFocus) {
renderErrorMessage(error);
if (!stopAutoFocus) $input.focus();
const myInput = $input;
myInput.style.border = '1px solid var(--bg-danger)';
myInput.style.boxShadow = 'none';
document.getElementById('auth_submit-btn').disabled = true;
}
function validateOnChange(targetInput, regex, error, stopAutoFocus) {
if (!isValidInput(targetInput.value, regex) && targetInput.value) {
showBadInputError(targetInput, error, stopAutoFocus);
return false;
}
document.getElementById('auth_error').style.display = 'none';
targetInput.style.removeProperty('border');
targetInput.style.removeProperty('box-shadow');
document.getElementById('auth_submit-btn').disabled = false;
return true;
}
/**
* Normalizes a username into a standard format.
*
* Removes leading and trailing whitespaces and leading "@" symbols.
* @param {string} rawUsername A raw-input username, which may include invalid characters.
* @returns {string}
*/
function normalizeUsername(rawUsername) { function normalizeUsername(rawUsername) {
const noLeadingAt = rawUsername.indexOf('@') === 0 ? rawUsername.substr(1) : rawUsername; const noLeadingAt = rawUsername.indexOf('@') === 0 ? rawUsername.substr(1) : rawUsername;
return noLeadingAt.trim(); return noLeadingAt.trim();
} }
function Auth() { let searchingHs = null;
const [type, setType] = useState('login'); function Homeserver({ onChange }) {
const [process, changeProcess] = useState(null); const [hs, setHs] = useState(null);
const [homeserver, changeHomeserver] = useState('matrix.org'); const [debounce] = useState(new Debounce());
const [process, setProcess] = useState({ isLoading: true, message: 'Loading homeserver list...' });
const hsRef = useRef();
const usernameRef = useRef(null); const setupHsConfig = async (servername) => {
const homeserverRef = useRef(null); setProcess({ isLoading: true, message: 'Looking for homeserver...' });
const passwordRef = useRef(null); let baseUrl = null;
const confirmPasswordRef = useRef(null); try {
const emailRef = useRef(null); baseUrl = await getBaseUrl(servername);
} catch (e) {
const { search } = useLocation(); baseUrl = e.message;
const searchParams = new URLSearchParams(search);
if (searchParams.has('loginToken')) {
const loginToken = searchParams.get('loginToken');
if (loginToken !== undefined) {
if (localStorage.getItem(cons.secretKey.BASE_URL) !== undefined) {
const baseUrl = localStorage.getItem(cons.secretKey.BASE_URL);
auth.loginWithToken(baseUrl, loginToken)
.then(() => {
const { href } = window.location;
window.location.replace(href.slice(0, href.indexOf('?')));
})
.catch((error) => {
changeProcess(null);
if (!error.contains('CORS request rejected')) {
renderErrorMessage(error);
} }
if (searchingHs !== servername) return;
setProcess({ isLoading: true, message: `Connecting to ${baseUrl}...` });
const tempClient = auth.createTemporaryClient(baseUrl);
Promise.allSettled([tempClient.loginFlows(), tempClient.register()])
.then((values) => {
const loginFlow = values[0].status === 'fulfilled' ? values[0]?.value : undefined;
const registerFlow = values[1].status === 'rejected' ? values[1]?.reason?.data : undefined;
if (loginFlow === undefined || registerFlow === undefined) throw new Error();
if (searchingHs !== servername) return;
onChange({ baseUrl, login: loginFlow, register: registerFlow });
setProcess({ isLoading: false });
}).catch(() => {
if (searchingHs !== servername) return;
onChange(null);
setProcess({ isLoading: false, error: 'Unable to connect. Please check your input.' });
}); });
} };
}
}
function register(recaptchaValue, terms, verified) { useEffect(() => {
auth.register( onChange(null);
usernameRef.current.value, if (hs === null || hs?.selected.trim() === '') return;
homeserverRef.current.value, searchingHs = hs.selected;
passwordRef.current.value, setupHsConfig(hs.selected);
emailRef.current.value, }, [hs]);
recaptchaValue,
terms,
verified,
).then((res) => {
document.getElementById('auth_submit-btn').disabled = false;
if (res.type === 'recaptcha') {
changeProcess({ type: res.type, sitekey: res.public_key });
return;
}
if (res.type === 'terms') {
changeProcess({ type: res.type, en: res.en });
}
if (res.type === 'email') {
changeProcess({ type: res.type });
}
if (res.type === 'done') {
window.location.replace('/');
}
}).catch((error) => {
changeProcess(null);
renderErrorMessage(error);
document.getElementById('auth_submit-btn').disabled = false;
});
if (terms) {
changeProcess({ type: 'loading', message: 'Sending email verification link...' });
} else changeProcess({ type: 'loading', message: 'Registration in progress...' });
}
function handleLogin(e) { useEffect(async () => {
e.preventDefault(); const configFileUrl = `${window.location.href}/config.json`;
document.getElementById('auth_submit-btn').disabled = true; try {
document.getElementById('auth_error').style.display = 'none'; const result = await (await fetch(configFileUrl, { method: 'GET' })).json();
const selectedHs = result?.defaultHomeserver;
const hsList = result?.homeserverList;
if (!hsList?.length > 0 || selectedHs < 0 || selectedHs >= hsList?.length) {
throw new Error();
}
setHs({ selected: hsList[selectedHs], list: hsList });
} catch {
setHs({ selected: 'matrix.org', list: ['matrix.org'] });
}
}, []);
/** @type {string} */ const handleHsInput = (e) => {
const rawUsername = usernameRef.current.value; const { value } = e.target;
/** @type {string} */ setProcess({ isLoading: false });
const normalizedUsername = normalizeUsername(rawUsername); debounce._(async () => {
setHs({ selected: value, list: hs.list });
}, 700)();
};
auth.login(normalizedUsername, homeserverRef.current.value, passwordRef.current.value)
.then(() => {
document.getElementById('auth_submit-btn').disabled = false;
window.location.replace('/');
})
.catch((error) => {
changeProcess(null);
renderErrorMessage(error);
document.getElementById('auth_submit-btn').disabled = false;
});
changeProcess({ type: 'loading', message: 'Login in progress...' });
}
function handleRegister(e) {
e.preventDefault();
document.getElementById('auth_submit-btn').disabled = true;
document.getElementById('auth_error').style.display = 'none';
if (!isValidInput(usernameRef.current.value, LOCALPART_SIGNUP_REGEX)) {
showBadInputError(usernameRef.current, BAD_LOCALPART_ERROR);
return;
}
if (!isValidInput(passwordRef.current.value, PASSWORD_STRENGHT_REGEX)) {
showBadInputError(passwordRef.current, BAD_PASSWORD_ERROR);
return;
}
if (passwordRef.current.value !== confirmPasswordRef.current.value) {
showBadInputError(confirmPasswordRef.current, CONFIRM_PASSWORD_ERROR);
return;
}
if (!isValidInput(emailRef.current.value, EMAIL_REGEX)) {
showBadInputError(emailRef.current, BAD_EMAIL_ERROR);
return;
}
if (`@${usernameRef.current.value}:${homeserverRef.current.value}`.length > 255) {
showBadInputError(usernameRef.current, USER_ID_TOO_LONG_ERROR);
return;
}
register();
}
const handleAuth = (type === 'login') ? handleLogin : handleRegister;
return ( return (
<> <>
{process?.type === 'loading' && <LoadingScreen message={process.message} />} <div className="homeserver-form">
{process?.type === 'recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={(v) => { if (typeof v === 'string') register(v); }} />} <Input name="homeserver" onChange={handleHsInput} value={hs?.selected} forwardRef={hsRef} label="Homeserver" />
{process?.type === 'terms' && <Terms url={process.en.url} onSubmit={register} />} <ContextMenu
{process?.type === 'email' && ( placement="right"
<ProcessWrapper> content={(hideMenu) => (
<div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
<Text variant="h2">Verify email</Text>
<div style={{ margin: 'var(--sp-normal) 0' }}>
<Text variant="b1">
Please check your email
{' '}
<b>{`(${emailRef.current.value})`}</b>
{' '}
and validate before continuing further.
</Text>
</div>
<Button variant="primary" onClick={() => register(undefined, undefined, true)}>Continue</Button>
</div>
</ProcessWrapper>
)}
<StaticWrapper>
<div className="auth-form__wrapper flex-v--center">
<form onSubmit={handleAuth} className="auth-form">
<Text variant="h2">{ type === 'login' ? 'Login' : 'Register' }</Text>
<div className="username__wrapper">
<Input
forwardRef={usernameRef}
onChange={(e) => (type === 'login'
? validateOnChange(e.target, LOCALPART_LOGIN_REGEX, BAD_LOCALPART_ERROR)
: validateOnChange(e.target, LOCALPART_SIGNUP_REGEX, BAD_LOCALPART_ERROR))}
id="auth_username"
label="Username"
required
/>
<Input
forwardRef={homeserverRef}
onChange={(e) => changeHomeserver(e.target.value)}
id="auth_homeserver"
placeholder="Homeserver"
value="matrix.org"
required
/>
</div>
<div className="password__wrapper">
<Input
forwardRef={passwordRef}
onChange={(e) => {
const isValidPass = validateOnChange(e.target, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR);
if (type === 'register' && isValidPass) {
validateOnChange(
confirmPasswordRef.current, passwordRef.current.value,
CONFIRM_PASSWORD_ERROR, true,
);
}
}}
id="auth_password"
type="password"
label="Password"
required
/>
<IconButton
onClick={() => {
if (passwordRef.current.type === 'password') {
passwordRef.current.type = 'text';
} else passwordRef.current.type = 'password';
}}
size="extra-small"
src={EyeIC}
/>
</div>
{type === 'register' && (
<> <>
<div className="password__wrapper"> <MenuHeader>Homeserver list</MenuHeader>
<Input {
forwardRef={confirmPasswordRef} hs?.list.map((hsName) => (
onChange={(e) => { <MenuItem
validateOnChange(e.target, passwordRef.current.value, CONFIRM_PASSWORD_ERROR); key={hsName}
}}
id="auth_confirmPassword"
type="password"
label="Confirm password"
required
/>
<IconButton
onClick={() => { onClick={() => {
if (confirmPasswordRef.current.type === 'password') { hideMenu();
confirmPasswordRef.current.type = 'text'; hsRef.current.value = hsName;
} else confirmPasswordRef.current.type = 'password'; setHs({ selected: hsName, list: hs.list });
}} }}
size="extra-small" >
src={EyeIC} {hsName}
/> </MenuItem>
</div> ))
<Input }
forwardRef={emailRef}
onChange={(e) => validateOnChange(e.target, EMAIL_REGEX, BAD_EMAIL_ERROR)}
id="auth_email"
type="email"
label="Email"
required
/>
</> </>
)} )}
<div className="submit-btn__wrapper flex--end"> render={(toggleMenu) => <IconButton onClick={toggleMenu} src={ChevronBottomIC} />}
<Text id="auth_error" className="error-message" variant="b3">Error</Text> />
<Button </div>
id="auth_submit-btn" {process.error !== undefined && <Text className="homeserver-form__error" variant="b3">{process.error}</Text>}
variant="primary" {process.isLoading && (
type="submit" <div className="homeserver-form__status flex--center">
> <Spinner size="small" />
{type === 'login' ? 'Login' : 'Register' } <Text variant="b2">{process.message}</Text>
</Button>
</div> </div>
{type === 'login' && (
<SSOButtons homeserver={homeserver} />
)} )}
</form> </>
</div> );
}
Homeserver.propTypes = {
onChange: PropTypes.func.isRequired,
};
<div style={{ flexDirection: 'column' }} className="flex--center"> function Login({ loginFlow, baseUrl }) {
<Text variant="b2"> const [typeIndex, setTypeIndex] = useState(0);
const loginTypes = ['Username', 'Email'];
const isPassword = loginFlow?.filter((flow) => flow.type === 'm.login.password')[0];
const ssoProviders = loginFlow?.filter((flow) => flow.type.match(/^m.login.(sso|cas)$/))[0];
const initialValues = {
username: '', password: '', email: '', other: '',
};
const validator = (values) => {
const errors = {};
if (typeIndex === 0 && values.username.length > 0 && values.username.indexOf(':') > -1) {
errors.username = 'Username must contain local-part only';
}
if (typeIndex === 1 && values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
errors.email = BAD_EMAIL_ERROR;
}
return errors;
};
const submitter = (values, actions) => auth.login(
baseUrl,
typeIndex === 0 ? normalizeUsername(values.username) : undefined,
typeIndex === 1 ? values.email : undefined,
values.password,
).then(() => {
actions.setSubmitting(true);
window.location.reload();
}).catch((error) => {
let msg = error.message;
if (msg === 'Unknown message') msg = 'Please check your credentials';
actions.setErrors({
password: msg === 'Invalid password' ? msg : undefined,
other: msg !== 'Invalid password' ? msg : undefined,
});
actions.setSubmitting(false);
});
return (
<>
<div className="auth-form__heading">
<Text variant="h2">Login</Text>
{isPassword && (
<ContextMenu
placement="right"
content={(hideMenu) => (
loginTypes.map((type, index) => (
<MenuItem
key={type}
onClick={() => {
hideMenu();
setTypeIndex(index);
}}
>
{type}
</MenuItem>
))
)}
render={(toggleMenu) => (
<Button onClick={toggleMenu} iconSrc={ChevronBottomIC}>
{loginTypes[typeIndex]}
</Button>
)}
/>
)}
</div>
{isPassword && (
<Formik
initialValues={initialValues}
onSubmit={submitter}
validate={validator}
>
{({
values, errors, handleChange, handleSubmit, isSubmitting,
}) => (
<>
{isSubmitting && <LoadingScreen message="Login in progress..." />}
<form className="auth-form" onSubmit={handleSubmit}>
{typeIndex === 0 && <Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required />}
{errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
{typeIndex === 1 && <Input values={values.email} name="email" onChange={handleChange} label="Email" type="email" required />}
{errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
<Input values={values.password} name="password" onChange={handleChange} label="Password" type="password" required />
{errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
{errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
<div className="auth-form__btns">
<Button variant="primary" type="submit" disabled={isSubmitting}>Login</Button>
</div>
</form>
</>
)}
</Formik>
)}
{ssoProviders && isPassword && <Text className="sso__divider">OR</Text>}
{ssoProviders && (
<SSOButtons
type={ssoProviders.type.match(/^m.login.(sso|cas)$/)[1]}
identityProviders={ssoProviders.identity_providers}
baseUrl={baseUrl}
/>
)}
</>
);
}
Login.propTypes = {
loginFlow: PropTypes.arrayOf(
PropTypes.shape({}),
).isRequired,
baseUrl: PropTypes.string.isRequired,
};
let sid;
let clientSecret;
function Register({ registerInfo, loginFlow, baseUrl }) {
const [process, setProcess] = useState({});
const formRef = useRef();
const ssoProviders = loginFlow?.filter((flow) => flow.type.match(/^m.login.(sso|cas)$/))[0];
const isDisabled = registerInfo.errcode !== undefined;
const { flows, params, session } = registerInfo;
let isEmail = false;
let isEmailRequired = true;
let isRecaptcha = false;
let isTerms = false;
let isDummy = false;
flows?.forEach((flow) => {
if (isEmailRequired && flow.stages.indexOf('m.login.email.identity') === -1) isEmailRequired = false;
if (!isEmail) isEmail = flow.stages.indexOf('m.login.email.identity') > -1;
if (!isRecaptcha) isRecaptcha = flow.stages.indexOf('m.login.recaptcha') > -1;
if (!isTerms) isTerms = flow.stages.indexOf('m.login.terms') > -1;
if (!isDummy) isDummy = flow.stages.indexOf('m.login.dummy') > -1;
});
const initialValues = {
username: '', password: '', confirmPassword: '', email: '', other: '',
};
const validator = (values) => {
const errors = {};
if (values.username.list > 255) errors.username = USER_ID_TOO_LONG_ERROR;
if (values.username.length > 0 && !isValidInput(values.username, LOCALPART_SIGNUP_REGEX)) {
errors.username = BAD_LOCALPART_ERROR;
}
if (values.password.length > 0 && !isValidInput(values.password, PASSWORD_STRENGHT_REGEX)) {
errors.password = BAD_PASSWORD_ERROR;
}
if (values.confirmPassword.length > 0
&& !isValidInput(values.confirmPassword, values.password)) {
errors.confirmPassword = CONFIRM_PASSWORD_ERROR;
}
if (values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
errors.email = BAD_EMAIL_ERROR;
}
return errors;
};
const submitter = (values, actions) => {
const tempClient = auth.createTemporaryClient(baseUrl);
clientSecret = tempClient.generateClientSecret();
return tempClient.isUsernameAvailable(values.username)
.then(async (isAvail) => {
if (!isAvail) {
actions.setErrors({ username: 'Username is already taken' });
actions.setSubmitting(false);
}
if (isEmail && values.email.length > 0) {
const result = await auth.verifyEmail(baseUrl, values.email, clientSecret, 1);
if (result.errcode) {
if (result.errcode === 'M_THREEPID_IN_USE') actions.setErrors({ email: result.error });
else actions.setErrors({ others: result.error || result.message });
actions.setSubmitting(false);
return;
}
sid = result.sid;
}
setProcess({ type: 'processing', message: 'Registration in progress....' });
actions.setSubmitting(false);
}).catch((err) => {
const msg = err.message || err.error;
if (['M_USER_IN_USE', 'M_INVALID_USERNAME', 'M_EXCLUSIVE'].indexOf(err.errcode) > 0) {
actions.setErrors({ username: err.errCode === 'M_USER_IN_USE' ? 'Username is already taken' : msg });
} else if (msg) actions.setErrors({ other: msg });
actions.setSubmitting(false);
});
};
const refreshWindow = () => window.location.reload();
const getInputs = () => {
const f = formRef.current;
return [f.username.value, f.password.value, f?.email?.value];
};
useEffect(() => {
if (process.type !== 'processing') return;
const asyncProcess = async () => {
const [username, password, email] = getInputs();
const d = await auth.completeRegisterStage(baseUrl, username, password, { session });
if (isRecaptcha && !d.completed.includes('m.login.recaptcha')) {
const sitekey = params['m.login.recaptcha'].public_key;
setProcess({ type: 'm.login.recaptcha', sitekey });
return;
}
if (isTerms && !d.completed.includes('m.login.terms')) {
const pp = params['m.login.terms'].policies.privacy_policy;
const url = pp?.en.url || pp[Object.keys(pp)[0]].url;
setProcess({ type: 'm.login.terms', url });
return;
}
if (isEmail && email.length > 0) {
setProcess({ type: 'm.login.email.identity', email });
return;
}
if (isDummy) {
const data = await auth.completeRegisterStage(baseUrl, username, password, {
type: 'm.login.dummy',
session,
});
if (data.done) refreshWindow();
}
};
asyncProcess();
}, [process]);
const handleRecaptcha = async (value) => {
if (typeof value !== 'string') return;
const [username, password] = getInputs();
const d = await auth.completeRegisterStage(baseUrl, username, password, {
type: 'm.login.recaptcha',
response: value,
session,
});
if (d.done) refreshWindow();
else setProcess({ type: 'processing', message: 'Registration in progress....' });
};
const handleTerms = async () => {
const [username, password] = getInputs();
const d = await auth.completeRegisterStage(baseUrl, username, password, {
type: 'm.login.terms',
session,
});
if (d.done) refreshWindow();
else setProcess({ type: 'processing', message: 'Registration in progress....' });
};
const handleEmailVerify = async () => {
const [username, password] = getInputs();
const d = await auth.completeRegisterStage(baseUrl, username, password, {
type: 'm.login.email.identity',
threepidCreds: { sid, client_secret: clientSecret },
threepid_creds: { sid, client_secret: clientSecret },
session,
});
if (d.done) refreshWindow();
else setProcess({ type: 'processing', message: 'Registration in progress....' });
};
return (
<>
{process.type === 'processing' && <LoadingScreen message={process.message} />}
{process.type === 'm.login.recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={handleRecaptcha} />}
{process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
{process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
<div className="auth-form__heading">
{!isDisabled && <Text variant="h2">Register</Text>}
{isDisabled && <Text className="auth-form__error">{registerInfo.error}</Text>}
</div>
{!isDisabled && (
<Formik
initialValues={initialValues}
onSubmit={submitter}
validate={validator}
>
{({
values, errors, handleChange, handleSubmit, isSubmitting,
}) => (
<>
{process.type === undefined && isSubmitting && <LoadingScreen message="Registration in progress..." />}
<form className="auth-form" ref={formRef} onSubmit={handleSubmit}>
<Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required />
{errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
<Input values={values.password} name="password" onChange={handleChange} label="Password" type="password" required />
{errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
<Input values={values.confirmPassword} name="confirmPassword" onChange={handleChange} label="Confirm password" type="password" required />
{errors.confirmPassword && <Text className="auth-form__error" variant="b3">{errors.confirmPassword}</Text>}
{isEmail && <Input values={values.email} name="email" onChange={handleChange} label={`Email${isEmailRequired ? '' : ' (optional)'}`} type="email" required={isEmailRequired} />}
{errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
{errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
<div className="auth-form__btns">
<Button variant="primary" type="submit" disabled={isSubmitting}>Register</Button>
</div>
</form>
</>
)}
</Formik>
)}
{isDisabled && ssoProviders && (
<SSOButtons
type={ssoProviders.type.match(/^m.login.(sso|cas)$/)[1]}
identityProviders={ssoProviders.identity_providers}
baseUrl={baseUrl}
/>
)}
</>
);
}
Register.propTypes = {
registerInfo: PropTypes.shape({}).isRequired,
loginFlow: PropTypes.arrayOf(
PropTypes.shape({}),
).isRequired,
baseUrl: PropTypes.string.isRequired,
};
function AuthCardCopy() {
const [hsConfig, setHsConfig] = useState(null);
const [type, setType] = useState('login');
const handleHsChange = (info) => setHsConfig(info);
return (
<>
<Homeserver onChange={handleHsChange} />
{ hsConfig !== null && (
type === 'login'
? <Login loginFlow={hsConfig.login.flows} baseUrl={hsConfig.baseUrl} />
: (
<Register
registerInfo={hsConfig.register}
loginFlow={hsConfig.login.flows}
baseUrl={hsConfig.baseUrl}
/>
)
)}
{ hsConfig !== null && (
<Text variant="b2" className="auth-card__switch flex--center">
{`${(type === 'login' ? 'Don\'t have' : 'Already have')} an account?`} {`${(type === 'login' ? 'Don\'t have' : 'Already have')} an account?`}
<button <button
type="button" type="button"
style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }} style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }}
onClick={() => { onClick={() => setType((type === 'login') ? 'register' : 'login')}
if (type === 'login') setType('register');
else setType('login');
}}
> >
{ type === 'login' ? ' Register' : ' Login' } { type === 'login' ? ' Register' : ' Login' }
</button> </button>
</Text> </Text>
<span style={{ marginTop: 'var(--sp-extra-tight)' }}> )}
<Text variant="b3">v1.4.0</Text>
</span>
</div>
</StaticWrapper>
</> </>
); );
} }
function StaticWrapper({ children }) { function Auth() {
const [loginToken, setLoginToken] = useState(getUrlPrams('loginToken'));
useEffect(async () => {
if (!loginToken) return;
if (localStorage.getItem(cons.secretKey.BASE_URL) === undefined) {
setLoginToken(null);
return;
}
const baseUrl = localStorage.getItem(cons.secretKey.BASE_URL);
try {
await auth.loginWithToken(baseUrl, loginToken);
const { href } = window.location;
window.location.replace(href.slice(0, href.indexOf('?')));
} catch {
setLoginToken(null);
}
}, []);
return ( return (
<ScrollView invisible> <ScrollView invisible>
<div className="auth__wrapper flex--center"> <div className="auth__base">
<div className="auth-card"> <div className="auth__wrapper">
<div className="auth-card__interactive flex-v"> {loginToken && <LoadingScreen message="Redirecting..." />}
<div className="app-ident flex"> {!loginToken && (
<img className="app-ident__logo noselect" src={CinnySvg} alt="Cinny logo" /> <div className="auth-card flex-v">
<div className="app-ident__text flex-v--center"> <Header>
<Avatar size="extra-small" imageSrc={CinnySvg} />
<TitleWrapper>
<Text variant="h2">Cinny</Text> <Text variant="h2">Cinny</Text>
<Text variant="b2">Yet another matrix client</Text> </TitleWrapper>
</Header>
<div className="auth-card__content">
<AuthCardCopy />
</div> </div>
</div> </div>
{ children } )}
</div> </div>
<div className="auth-footer">
<Text variant="b2">
<a href="https://cinny.in" target="_blank" rel="noreferrer">About</a>
</Text>
<Text variant="b2">
<a href="https://github.com/ajbura/cinny/releases" target="_blank" rel="noreferrer">{`v${cons.version}`}</a>
</Text>
<Text variant="b2">
<a href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">Twitter</a>
</Text>
<Text variant="b2">
<a href="https://matrix.org" target="_blank" rel="noreferrer">Powered by Matrix</a>
</Text>
</div> </div>
</div> </div>
</ScrollView> </ScrollView>
); );
} }
StaticWrapper.propTypes = {
children: PropTypes.node.isRequired,
};
function LoadingScreen({ message }) { function LoadingScreen({ message }) {
return ( return (
<ProcessWrapper> <ProcessWrapper>
@ -396,7 +595,7 @@ Recaptcha.propTypes = {
function Terms({ url, onSubmit }) { function Terms({ url, onSubmit }) {
return ( return (
<ProcessWrapper> <ProcessWrapper>
<form onSubmit={() => onSubmit(undefined, true)}> <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
<div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}> <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
<Text variant="h2">Agree with terms</Text> <Text variant="h2">Agree with terms</Text>
<div style={{ marginBottom: 'var(--sp-normal)' }} /> <div style={{ marginBottom: 'var(--sp-normal)' }} />
@ -419,6 +618,27 @@ Terms.propTypes = {
onSubmit: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired,
}; };
function EmailVerify({ email, onContinue }) {
return (
<ProcessWrapper>
<div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
<Text variant="h2">Verify email</Text>
<div style={{ margin: 'var(--sp-normal) 0' }}>
<Text variant="b1">
{'Please check your email '}
<b>{`(${email})`}</b>
{' and validate before continuing further.'}
</Text>
</div>
<Button variant="primary" onClick={onContinue}>Continue</Button>
</div>
</ProcessWrapper>
);
}
EmailVerify.propTypes = {
email: PropTypes.string.isRequired,
};
function ProcessWrapper({ children }) { function ProcessWrapper({ children }) {
return ( return (
<div className="process-wrapper"> <div className="process-wrapper">

View file

@ -1,156 +1,144 @@
.auth__wrapper { .auth__base {
--pattern-size: 48px;
min-height: 100vh; min-height: 100vh;
background-color: var(--bg-surface-low);
background-image: radial-gradient(rgba(0, 0, 0, 6%) 2px, rgba(0, 0, 0, 0%) 2px);
background-size: var(--pattern-size) var(--pattern-size);
display: flex;
flex-direction: column;
}
.auth__wrapper {
flex: 1;
padding: var(--sp-loose); padding: var(--sp-loose);
background-color: var(--bg-surface-low); padding-bottom: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.auth-footer {
padding: var(--sp-normal) 0;
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://images.unsplash.com/photo-1562619371-b67725b6fde2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"); & > *:nth-child(2n) {
background-size: cover; margin: 0 var(--sp-loose);
background-repeat: no-repeat; }
background-position: center; & a {
color: var(--tc-surface-normal);
.auth-card { &:hover { text-decoration: underline; }
}
}
.auth-card {
width: 462px; width: 462px;
min-height: 644px; background-color: var(--bg-surface);
background-color: var(--bg-surface-low);
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
box-shadow: var(--bs-popup); box-shadow: var(--bs-popup);
overflow: hidden; overflow: hidden;
display: flex;
flex-flow: row nowrap;
&__interactive{ &__content {
flex: 1; padding: var(--sp-extra-loose) calc(var(--sp-normal) + var(--sp-extra-loose));
min-width: 0;
} }
&__switch {
&__interactive { margin-top: var(--sp-loose) !important;
padding: calc(var(--sp-normal) + var(--sp-extra-loose));
padding-bottom: var(--sp-extra-loose);
background-color: var(--bg-surface);
}
} }
} }
.app-ident { .homeserver-form,
margin-bottom: var(--sp-extra-loose); .auth-form__heading {
& .context-menu .btn-surface .ic-raw {
&__logo { width: 0;
width: 60px;
height: 60px;
} }
&__text { }
margin-left: calc(var(--sp-loose) + var(--sp-ultra-tight));
.text-s1 { .homeserver-form {
margin-top: var(--sp-tight); display: flex;
color: var(--tc-surface-normal); margin-bottom: var(--sp-extra-tight);
& > .input-container {
flex: 1;
& .input {
border-right: unset;
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
background-color: var(--bg-surface);
}
}
& .ic-btn {
height: 46px;
align-self: flex-end;
border: 1px solid var(--bg-surface-border);
border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
} }
[dir=rtl] & { [dir=rtl] & {
margin-left: 0; & .input {
margin-right: calc(var(--sp-loose) + var(--sp-ultra-tight)); border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
border-radius: 1px;
border-left: unset;
} }
.ic-btn {
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
}
}
&__status {
margin-top: var(--sp-normal);
& .donut-spinner {
min-width: 28px;
}
& .text {
margin: 0 var(--sp-tight);
}
}
&__error {
margin-bottom: var(--sp-normal) !important;
color: var(--tc-danger-normal) !important;
} }
} }
.auth-form { .auth-form {
& > .text {
margin-bottom: var(--sp-loose);
margin-top: var(--sp-loose);
}
& > .input-container { & > .input-container {
margin-top: var(--sp-tight); margin: var(--sp-tight) 0 var(--sp-ultra-tight);
} }
.submit-btn__wrapper { &__heading {
margin-top: var(--sp-extra-loose);
margin-bottom: var(--sp-loose);
align-items: flex-start;
& > .error-message {
display: none;
flex: 1;
color: var(--tc-danger-normal);
margin-right: var(--sp-normal);
word-break: break;
[dir=rtl] & {
margin: {
right: 0;
left: var(--sp-normal);
}
}
}
}
&__wrapper {
height: 100%;
}
}
.username__wrapper {
display: flex; display: flex;
align-items: flex-end; justify-content: space-between;
margin-top: calc(var(--sp-extra-loose) + var(--sp-tight));
& > :first-child {
flex: 1;
.input {
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
[dir=rtl] & {
border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
} }
}
}
& > :last-child {
width: 110px;
.input { &__btns {
border-left-width: 0; padding-top: var(--sp-loose);
background-color: var(--bg-surface); margin-bottom: var(--sp-extra-loose);
border-radius: 0 var(--bo-radius) var(--bo-radius) 0; display: flex;
justify-content: flex-end;
}
[dir=rtl] & { &__error {
border-left-width: 1px; color: var(--tc-danger-normal) !important;
border-right-width: 0;
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
}
}
} }
} }
.sso__divider {
margin-bottom: var(--sp-tight);
display: flex;
align-items: center;
.password__wrapper { &::before,
margin-top: var(--sp-tight); &::after {
position: relative; flex: 1;
content: '';
& .ic-btn { margin: var(--sp-tight);
position: absolute; border-bottom: 1px solid var(--bg-surface-border);
right: 6px;
bottom: 6px;
border-radius: calc(var(--bo-radius) / 2);
[dir=rtl] & {
left: 6px;
right: unset;
}
} }
} }
@media (max-width: 462px) { @media (max-width: 462px) {
.auth__wrapper { .auth__wrapper {
padding: 0; padding: var(--sp-tight);
background-image: none;
background-color: var(--bg-surface);
.auth-card {
border-radius: 0;
box-shadow: none;
&__interactive {
padding: var(--sp-extra-loose);
} }
.auth-card {
&__content {
padding: var(--sp-loose) var(--sp-normal);
} }
} }
} }

View file

@ -1,89 +1,64 @@
import * as sdk from 'matrix-js-sdk'; import * as sdk from 'matrix-js-sdk';
import cons from '../state/cons'; import cons from '../state/cons';
import { getBaseUrl } from '../../util/matrixUtil';
// This method inspired by a similar one in matrix-react-sdk function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
async function createTemporaryClient(homeserver) { localStorage.setItem(cons.secretKey.ACCESS_TOKEN, accessToken);
let baseUrl = null; localStorage.setItem(cons.secretKey.DEVICE_ID, deviceId);
try { localStorage.setItem(cons.secretKey.USER_ID, userId);
baseUrl = await getBaseUrl(homeserver); localStorage.setItem(cons.secretKey.BASE_URL, baseUrl);
} catch (e) { }
baseUrl = `https://${homeserver}`;
}
if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found');
function createTemporaryClient(baseUrl) {
return sdk.createClient({ baseUrl }); return sdk.createClient({ baseUrl });
} }
async function getLoginFlows(client) { async function startSsoLogin(baseUrl, type, idpId) {
const flows = await client.loginFlows(); const client = createTemporaryClient(baseUrl);
if (flows !== undefined) {
return flows;
}
return null;
}
async function startSsoLogin(homeserver, type, idpId) {
const client = await createTemporaryClient(homeserver);
localStorage.setItem(cons.secretKey.BASE_URL, client.baseUrl); localStorage.setItem(cons.secretKey.BASE_URL, client.baseUrl);
window.location.href = client.getSsoLoginUrl(window.location.href, type, idpId); window.location.href = client.getSsoLoginUrl(window.location.href, type, idpId);
} }
async function login(username, homeserver, password) { async function login(baseUrl, username, email, password) {
const client = await createTemporaryClient(homeserver); const identifier = {};
if (username) {
identifier.type = 'm.id.user';
identifier.user = username;
} else if (email) {
identifier.type = 'm.id.thirdparty';
identifier.medium = 'email';
identifier.address = email;
} else throw new Error('Bad Input');
const response = await client.login('m.login.password', { const client = createTemporaryClient(baseUrl);
identifier: { const res = await client.login('m.login.password', {
type: 'm.id.user', identifier,
user: username,
},
password, password,
initial_device_display_name: cons.DEVICE_DISPLAY_NAME, initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
}); });
localStorage.setItem(cons.secretKey.ACCESS_TOKEN, response.access_token); const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
localStorage.setItem(cons.secretKey.DEVICE_ID, response.device_id); updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
localStorage.setItem(cons.secretKey.USER_ID, response.user_id);
localStorage.setItem(cons.secretKey.BASE_URL, response?.well_known?.['m.homeserver']?.base_url || client.baseUrl);
} }
async function loginWithToken(baseUrl, token) { async function loginWithToken(baseUrl, token) {
const client = sdk.createClient(baseUrl); const client = createTemporaryClient(baseUrl);
const response = await client.login('m.login.token', { const res = await client.login('m.login.token', {
token, token,
initial_device_display_name: cons.DEVICE_DISPLAY_NAME, initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
}); });
localStorage.setItem(cons.secretKey.ACCESS_TOKEN, response.access_token); const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
localStorage.setItem(cons.secretKey.DEVICE_ID, response.device_id); updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
localStorage.setItem(cons.secretKey.USER_ID, response.user_id);
localStorage.setItem(cons.secretKey.BASE_URL, response?.well_known?.['m.homeserver']?.base_url || client.baseUrl);
} }
async function getAdditionalInfo(baseUrl, content) { // eslint-disable-next-line camelcase
try { async function verifyEmail(baseUrl, email, client_secret, send_attempt, next_link) {
const res = await fetch(`${baseUrl}/_matrix/client/r0/register`, {
method: 'POST',
body: JSON.stringify(content),
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
credentials: 'same-origin',
});
const data = await res.json();
return data;
} catch (e) {
throw new Error(e);
}
}
async function verifyEmail(baseUrl, content) {
try {
const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, { const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
method: 'POST', method: 'POST',
body: JSON.stringify(content), body: JSON.stringify({
email, client_secret, send_attempt, next_link,
}),
headers: { headers: {
'Content-Type': 'application/json; charset=utf-8', 'Content-Type': 'application/json; charset=utf-8',
}, },
@ -91,99 +66,36 @@ async function verifyEmail(baseUrl, content) {
}); });
const data = await res.json(); const data = await res.json();
return data; return data;
} catch (e) {
throw new Error(e);
}
} }
let session = null; async function completeRegisterStage(
let clientSecret = null; baseUrl, username, password, auth,
let sid = null; ) {
async function register(username, homeserver, password, email, recaptchaValue, terms, verified) { const tempClient = createTemporaryClient(baseUrl);
const baseUrl = await getBaseUrl(homeserver);
if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found'); try {
const result = await tempClient.registerRequest({
const client = sdk.createClient({ baseUrl }); username, password, auth,
const isAvailable = await client.isUsernameAvailable(username);
if (!isAvailable) throw new Error('Username not available');
if (typeof recaptchaValue === 'string') {
await getAdditionalInfo(baseUrl, {
auth: {
type: 'm.login.recaptcha',
session,
response: recaptchaValue,
},
}); });
} else if (terms === true) { const data = { completed: result.completed || [] };
await getAdditionalInfo(baseUrl, { if (result.access_token) {
auth: { data.done = true;
type: 'm.login.terms', updateLocalStore(result.access_token, result.device_id, result.user_id, baseUrl);
session,
},
});
} else if (verified !== true) {
session = null;
clientSecret = client.generateClientSecret();
const verifyData = await verifyEmail(baseUrl, {
email,
client_secret: clientSecret,
send_attempt: 1,
});
if (typeof verifyData.error === 'string') {
throw new Error(verifyData.error);
} }
sid = verifyData.sid; return data;
} catch (e) {
const result = e.data;
const data = { completed: result.completed || [] };
if (result.access_token) {
data.done = true;
updateLocalStore(result.access_token, result.device_id, result.user_id, baseUrl);
} }
return data;
const additionalInfo = await getAdditionalInfo(baseUrl, {
auth: { session: (session !== null) ? session : undefined },
});
session = additionalInfo.session;
if (typeof additionalInfo.completed === 'undefined' || additionalInfo.completed.length === 0) {
return ({
type: 'recaptcha',
public_key: additionalInfo.params['m.login.recaptcha'].public_key,
});
} }
if (additionalInfo.completed.find((process) => process === 'm.login.recaptcha') === 'm.login.recaptcha'
&& !additionalInfo.completed.find((process) => process === 'm.login.terms')) {
return ({
type: 'terms',
en: additionalInfo.params['m.login.terms'].policies.privacy_policy.en,
});
}
if (verified || additionalInfo.completed.find((process) => process === 'm.login.terms') === 'm.login.terms') {
const tpc = {
client_secret: clientSecret,
sid,
};
const verifyData = await getAdditionalInfo(baseUrl, {
auth: {
session,
type: 'm.login.email.identity',
threepidCreds: tpc,
threepid_creds: tpc,
},
username,
password,
});
if (verifyData.errcode === 'M_UNAUTHORIZED') {
return { type: 'email' };
}
localStorage.setItem(cons.secretKey.ACCESS_TOKEN, verifyData.access_token);
localStorage.setItem(cons.secretKey.DEVICE_ID, verifyData.device_id);
localStorage.setItem(cons.secretKey.USER_ID, verifyData.user_id);
localStorage.setItem(cons.secretKey.BASE_URL, baseUrl);
return { type: 'done' };
}
return {};
} }
export { export {
createTemporaryClient, getLoginFlows, login, createTemporaryClient, login, verifyEmail,
loginWithToken, register, startSsoLogin, loginWithToken, startSsoLogin,
completeRegisterStage,
}; };

View file

@ -1,4 +1,5 @@
const cons = { const cons = {
version: '1.4.0',
secretKey: { secretKey: {
ACCESS_TOKEN: 'cinny_access_token', ACCESS_TOKEN: 'cinny_access_token',
DEVICE_ID: 'cinny_device_id', DEVICE_ID: 'cinny_device_id',

View file

@ -2,15 +2,18 @@ import initMatrix from '../client/initMatrix';
const WELL_KNOWN_URI = '/.well-known/matrix/client'; const WELL_KNOWN_URI = '/.well-known/matrix/client';
async function getBaseUrl(homeserver) { async function getBaseUrl(servername) {
const serverDiscoveryUrl = `https://${homeserver}${WELL_KNOWN_URI}`; let protocol = 'https://';
if (servername.match(/^https?:\/\//) !== null) protocol = '';
const serverDiscoveryUrl = `${protocol}${servername}${WELL_KNOWN_URI}`;
try { try {
const result = await fetch(serverDiscoveryUrl, { method: 'GET' }); const result = await (await fetch(serverDiscoveryUrl, { method: 'GET' })).json();
const data = await result.json();
return data?.['m.homeserver']?.base_url; const baseUrl = result?.['m.homeserver']?.base_url;
if (baseUrl === undefined) throw new Error();
return baseUrl;
} catch (e) { } catch (e) {
throw new Error('Homeserver not found'); throw new Error(`${protocol}${servername}`);
} }
} }