v1.4.0: SSO login and profile viewer

Signed-off-by: Ajay Bura <ajbura@gmail.com>
Fix reaction selector doesn't focus msg input (#62 )
2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30
49 changed files with 6289 additions and 22068 deletions
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@@ -1,32 +0,0 @@
-name: 'Build PR'
-
-on:
-  pull_request:
-    types: ['opened', 'synchronize']
-
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        env:
-          PR_NUMBER: ${{github.event.number}}
-        steps:
-            - uses: actions/checkout@v2
-            - name: Build
-              run: npm install && npm run build
-            - name: Upload Artifact
-              uses: actions/upload-artifact@v2
-              with:
-                  name: previewbuild
-                  path: dist
-                  retention-days: 1
-            - uses: actions/github-script@v3.1.0
-              with:
-                script: |
-                    var fs = require('fs');
-                    fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
-            - name: Upload PR Info
-              uses: actions/upload-artifact@v2
-              with:
-                  name: pr.json
-                  path: pr.json
-                  retention-days: 1
--- a/.github/workflows/deploy-pull-request.yml
+++ b/.github/workflows/deploy-pull-request.yml
@@ -1,78 +0,0 @@
-name: Upload Preview Build to Netlify
-on:
-    workflow_run:
-        workflows: ["Build PR"]
-        types:
-            - completed
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        if: >
-            ${{ github.event.workflow_run.conclusion == 'success' }}
-        steps:
-            # There's a 'download artifact' action but it hasn't been updated for the
-            # workflow_run action (https://github.com/actions/download-artifact/issues/60)
-            # so instead we get this mess:
-            - name: 'Download artifact'
-              uses: actions/github-script@v3.1.0
-              with:
-                script: |
-                  var artifacts = await github.actions.listWorkflowRunArtifacts({
-                     owner: context.repo.owner,
-                     repo: context.repo.repo,
-                     run_id: ${{github.event.workflow_run.id }},
-                  });
-                  var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-                    return artifact.name == "previewbuild"
-                  })[0];
-                  var download = await github.actions.downloadArtifact({
-                     owner: context.repo.owner,
-                     repo: context.repo.repo,
-                     artifact_id: matchArtifact.id,
-                     archive_format: 'zip',
-                  });
-                  var fs = require('fs');
-                  fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
-                  var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
-                    return artifact.name == "pr.json"
-                  })[0];
-                  var download = await github.actions.downloadArtifact({
-                     owner: context.repo.owner,
-                     repo: context.repo.repo,
-                     artifact_id: prInfoArtifact.id,
-                     archive_format: 'zip',
-                  });
-                  var fs = require('fs');
-                  fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
-            - name: Extract Artifacts
-              run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
-            - name: 'Read PR Info'
-              id: readctx
-              uses: actions/github-script@v3.1.0
-              with:
-                script: |
-                    var fs = require('fs');
-                    var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
-                    console.log(`::set-output name=prnumber::${pr.number}`);
-            - name: Deploy to Netlify
-              id: netlify
-              uses: nwtgck/actions-netlify@v1.2
-              with:
-                  publish-dir: dist
-                  deploy-message: "Deploy from GitHub Actions"
-                  # These don't work because we're in workflow_run
-                  enable-pull-request-comment: false
-                  enable-commit-comment: false
-              env:
-                  NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-                  NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
-              timeout-minutes: 1
-            - name: Edit PR Description
-              uses: velas/pr-description@v1.0.1
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-              with:
-                  pull-request-number: ${{ steps.readctx.outputs.prnumber }}
-                  description-message: |
-                      Preview: ${{ steps.netlify.outputs.deploy-url }}
-                      ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -0,0 +1,30 @@
+name: 'Netlify Preview Deploy'
+
+on:
+  pull_request_target:
+    types: ['opened', 'synchronize']
+
+jobs:
+  deploy:
+    name: "Deploy to Netlify"
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1      
+      - uses: jsmrcaga/action-netlify-deploy@master
+        with:          
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
+          BUILD_DIRECTORY: "dist"
+      - name: Post on PR
+        uses: nwtgck/actions-netlify@v1.1
+        with:
+          publish-dir: "dist"
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: "Deploy from GitHub Actions"
+          enable-pull-request-comment: true
+          enable-commit-comment: false
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
--- a/README.md
+++ b/README.md
@@ -51,13 +51,9 @@ navigating to `http://localhost:8080`.

 Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.

-### Configuring default Homeserver
-
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
-
 ## License

-Copyright (c) 2021 Ajay Bura (ajbura) and contributors
+Copyright (c) 2021 Ajay Bura (ajbura) and other contributors

 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>

--- a/config.json
+++ b/config.json
@@ -1,12 +0,0 @@
-{
-  "defaultHomeserver": 5,
-  "homeserverList": [
-    "boba.best",
-    "converser.eu",
-    "envs.net",
-    "halogen.city",
-    "kde.org",
-    "matrix.org",
-    "mozilla.modular.im"
-  ]
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "1.5.1",
+  "version": "1.4.0",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
@@ -22,10 +22,8 @@
    "dateformat": "^4.5.1",
    "emojibase-data": "^6.2.0",
    "flux": "^4.0.1",
-    "formik": "^2.2.9",
    "html-react-parser": "^1.2.7",
-    "linkify-react": "^3.0.3",
-    "linkifyjs": "^3.0.3",
+    "linkifyjs": "^3.0.0-beta.3",
    "matrix-js-sdk": "^12.4.1",
    "micromark": "^3.0.3",
    "micromark-extension-gfm": "^1.0.0",
@@ -73,9 +71,9 @@
    "stream-browserify": "^3.0.0",
    "style-loader": "^2.0.0",
    "util": "^0.12.4",
-    "webpack": "^5.62.1",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.4.0",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
    <title>Cinny</title>
    <meta name="name"        content="Cinny">
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -29,7 +29,7 @@ function Avatar({
              {
                iconSrc !== null
                  ? <RawIcon size={size} src={iconSrc} />
-                  : text !== null && <Text variant={textSize}>{[...text][0]}</Text>
+                  : text !== null && <Text variant={textSize}>{text}</Text>
              }
            </span>
          )
--- a/src/app/atoms/button/Button.jsx
+++ b/src/app/atoms/button/Button.jsx
@@ -6,14 +6,13 @@ import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 import { blurOnBubbling } from './script';

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

 Button.defaultProps = {
  id: '',
--- a/src/app/atoms/input/Input.jsx
+++ b/src/app/atoms/input/Input.jsx
@@ -5,7 +5,7 @@ import './Input.scss';
 import TextareaAutosize from 'react-autosize-textarea';

 function Input({
-  id, label, name, value, placeholder,
+  id, label, value, placeholder,
  required, type, onChange, forwardRef,
  resizable, minHeight, onResize, state,
  onKeyDown,
@@ -17,7 +17,6 @@ function Input({
        ? (
          <TextareaAutosize
            style={{ minHeight: `${minHeight}px` }}
-            name={name}
            id={id}
            className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
            ref={forwardRef}
@@ -34,7 +33,6 @@ function Input({
          <input
            ref={forwardRef}
            id={id}
-            name={name}
            className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
            type={type}
            placeholder={placeholder}
@@ -51,7 +49,6 @@ function Input({

 Input.defaultProps = {
  id: null,
-  name: '',
  label: '',
  value: '',
  placeholder: '',
@@ -68,7 +65,6 @@ Input.defaultProps = {

 Input.propTypes = {
  id: PropTypes.string,
-  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.string,
  placeholder: PropTypes.string,
--- a/src/app/atoms/input/Input.scss
+++ b/src/app/atoms/input/Input.scss
@@ -2,7 +2,6 @@
  display: block;
  width: 100%;
  min-width: 0px;
-  margin: 0;
  padding: var(--sp-tight) var(--sp-normal);
  background-color: var(--bg-surface-low);
  color: var(--tc-surface-normal);
--- a/src/app/atoms/scroll/_scrollbar.scss
+++ b/src/app/atoms/scroll/_scrollbar.scss
@@ -32,7 +32,6 @@

@mixin scroll {
  overflow: hidden;
-  overscroll-behavior: none;
  @extend .firefox-scrollbar;
  @extend .webkit-scrollbar;
  @extend .webkit-scrollbar-track;
--- a/src/app/molecules/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -48,7 +48,7 @@ function ImageUpload({
      >
        <Avatar
          imageSrc={imageSrc}
-          text={text}
+          text={text.slice(0, 1)}
          bgColor={bgColor}
          size="large"
        />
--- a/src/app/molecules/media/Media.scss
+++ b/src/app/molecules/media/Media.scss
@@ -11,10 +11,6 @@
    overflow: hidden;
    text-overflow: ellipsis;
  }
-
-  & a {
-    line-height: 0;
-  }
 }

 .file-container {
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';

-import Linkify from 'linkify-react';
+import Linkify from 'linkifyjs/react';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -106,17 +106,10 @@ MessageReply.propTypes = {
  content: PropTypes.string.isRequired,
 };

-function MessageContent({
-  senderName,
-  content,
-  isMarkdown,
-  isEdited,
-  msgType,
-}) {
+function MessageContent({ content, isMarkdown, isEdited }) {
  return (
    <div className="message__content">
      <div className="text text-b1">
-        { msgType === 'm.emote' && `* ${senderName} ` }
        { isMarkdown ? genMarkdown(content) : linkifyContent(content) }
      </div>
      { isEdited && <Text className="message__content-edited" variant="b3">(edited)</Text>}
@@ -128,11 +121,9 @@ MessageContent.defaultProps = {
  isEdited: false,
 };
 MessageContent.propTypes = {
-  senderName: PropTypes.string.isRequired,
  content: PropTypes.node.isRequired,
  isMarkdown: PropTypes.bool,
  isEdited: PropTypes.bool,
-  msgType: PropTypes.string.isRequired,
 };

 function MessageEdit({ content, onSave, onCancel }) {
@@ -237,27 +228,10 @@ MessageOptions.propTypes = {

 function Message({
  avatar, header, reply, content, editContent, reactions, options,
-  msgType,
 }) {
-  const className = [
-    'message',
-    header === null ? ' message--content-only' : ' message--full',
-  ];
-  switch (msgType) {
-    case 'm.text':
-      className.push('message--type-text');
-      break;
-    case 'm.emote':
-      className.push('message--type-emote');
-      break;
-    case 'm.notice':
-      className.push('message--type-notice');
-      break;
-    default:
-  }
-
+  const msgClass = header === null ? ' message--content-only' : ' message--full';
  return (
-    <div className={className.join(' ')}>
+    <div className={`message${msgClass}`}>
      <div className="message__avatar-container">
        {avatar !== null && avatar}
      </div>
@@ -280,7 +254,6 @@ Message.defaultProps = {
  editContent: null,
  reactions: null,
  options: null,
-  msgType: 'm.text',
 };
 Message.propTypes = {
  avatar: PropTypes.node,
@@ -290,7 +263,6 @@ Message.propTypes = {
  editContent: PropTypes.node,
  reactions: PropTypes.node,
  options: PropTypes.node,
-  msgType: PropTypes.string,
 };

 export {
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -160,7 +160,7 @@
  }

  & a {
-    word-break: break-word;
+    word-break: break-all;
  }
  &-edited {
    color: var(--tc-surface-low);
@@ -409,15 +409,4 @@
      border-bottom-width: 0px !important;
    }
  }
-}
-
-.message.message--type-emote {
-  .message__content {
-    font-style: italic;
-
-    // Remove blockness of first `<p>` so that markdown emotes stay on one line.
-    p:first-of-type {
-      display: inline;
-    }
-  }
-}
+}
--- a/src/app/molecules/message/TimelineChange.jsx
+++ b/src/app/molecules/message/TimelineChange.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './TimelineChange.scss';

+// import Linkify from 'linkifyjs/react';
+
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';

--- a/src/app/molecules/people-selector/PeopleSelector.jsx
+++ b/src/app/molecules/people-selector/PeopleSelector.jsx
@@ -18,7 +18,7 @@ function PeopleSelector({
        onClick={onClick}
        type="button"
      >
-        <Avatar imageSrc={avatarSrc} text={name} bgColor={color} size="extra-small" />
+        <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={color} size="extra-small" />
        <Text className="people-selector__name" variant="b1">{name}</Text>
        {peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
      </button>
--- a/src/app/molecules/room-intro/RoomIntro.jsx
+++ b/src/app/molecules/room-intro/RoomIntro.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RoomIntro.scss';

-import Linkify from 'linkify-react';
+import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';

 import Text from '../../atoms/text/Text';
@@ -17,7 +17,7 @@ function RoomIntro({
 }) {
  return (
    <div className="room-intro">
-      <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
+      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
      <div className="room-intro__content">
        <Text className="room-intro__name" variant="h1">{heading}</Text>
        <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -51,7 +51,7 @@ function RoomSelector({
      content={(
        <>
          <Avatar
-            text={name}
+            text={name.slice(0, 1)}
            bgColor={colorMXID(roomId)}
            imageSrc={imageSrc}
            iconSrc={iconSrc}
--- a/src/app/molecules/room-tile/RoomTile.jsx
+++ b/src/app/molecules/room-tile/RoomTile.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RoomTile.scss';

-import Linkify from 'linkify-react';
+import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';

 import Text from '../../atoms/text/Text';
@@ -22,7 +22,7 @@ function RoomTile({
        <Avatar
          imageSrc={avatarSrc}
          bgColor={colorMXID(id)}
-          text={name}
+          text={name.slice(0, 1)}
        />
      </div>
      <div className="room-tile__content">
--- a/src/app/molecules/sso-buttons/SSOButtons.jsx
+++ b/src/app/molecules/sso-buttons/SSOButtons.jsx
@@ -1,41 +1,98 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import './SSOButtons.scss';

-import { createTemporaryClient, startSsoLogin } from '../../../client/action/auth';
+import { createTemporaryClient, getLoginFlows, startSsoLogin } from '../../../client/action/auth';

-import Button from '../../atoms/button/Button';
+import Text from '../../atoms/text/Text';
+
+function SSOButtons({ homeserver }) {
+  const [identityProviders, setIdentityProviders] = useState([]);
+
+  useEffect(() => {
+    // 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 <></>;

-function SSOButtons({ type, identityProviders, baseUrl }) {
-  const tempClient = createTemporaryClient(baseUrl);
-  function handleClick(id) {
-    startSsoLogin(baseUrl, type, id);
-  }
  return (
    <div className="sso-buttons">
-      {identityProviders
-        .sort((idp, idp2) => {
-          if (typeof idp.icon !== 'string') return -1;
-          return idp.name.toLowerCase() > idp2.name.toLowerCase() ? 1 : -1;
-        })
-        .map((idp) => (
-          idp.icon
-            ? (
-              <button key={idp.id} type="button" className="sso-btn" onClick={() => handleClick(idp.id)}>
-                <img className="sso-btn__img" src={tempClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
-              </button>
-            ) : <Button key={idp.id} className="sso-btn__text-only" onClick={() => handleClick(idp.id)}>{`Login with ${idp.name}`}</Button>
+      <div className="sso-buttons__divider">
+        <Text>OR</Text>
+      </div>
+      <div className="sso-buttons__container">
+        {identityProviders.sort((idp) => !!idp.imageSrc).map((idp) => (
+          <SSOButton
+            key={idp.id}
+            homeserver={idp.homeserver}
+            id={idp.id}
+            name={idp.name}
+            type={idp.type}
+            imageSrc={idp.imageSrc}
+          />
        ))}
+      </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 = {
-  identityProviders: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-  baseUrl: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(['sso', 'cas']).isRequired,
+  homeserver: PropTypes.string.isRequired,
+};
+
+SSOButton.propTypes = {
+  homeserver: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string.isRequired,
 };

 export default SSOButtons;
--- a/src/app/molecules/sso-buttons/SSOButtons.scss
+++ b/src/app/molecules/sso-buttons/SSOButtons.scss
@@ -1,7 +1,22 @@
 .sso-buttons {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;  
+  &__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;
+    justify-content: center;
+    flex-wrap: wrap;  
+  }
 }

 .sso-btn {
@@ -16,8 +31,11 @@
    width: var(--av-small);
  }
  &__text-only {
-    margin-top: var(--sp-normal);
    flex-basis: 100%;
+    text-align: center;
+
+    margin: var(--sp-tight) 0px;
+    cursor: pointer;
    & .text {
      color: var(--tc-link);
    }
--- a/src/app/organisms/create-room/CreateRoom.jsx
+++ b/src/app/organisms/create-room/CreateRoom.jsx
@@ -5,7 +5,6 @@ import './CreateRoom.scss';
 import initMatrix from '../../../client/initMatrix';
 import { isRoomAliasAvailable } from '../../../util/matrixUtil';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom } from '../../../client/action/navigation';

 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -13,7 +12,6 @@ import Toggle from '../../atoms/button/Toggle';
 import IconButton from '../../atoms/button/IconButton';
 import Input from '../../atoms/input/Input';
 import Spinner from '../../atoms/spinner/Spinner';
-import SegmentControl from '../../atoms/segmented-controls/SegmentedControls';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';

@@ -30,7 +28,6 @@ function CreateRoom({ isOpen, onRequestClose }) {
  const [titleValue, updateTitleValue] = useState(undefined);
  const [topicValue, updateTopicValue] = useState(undefined);
  const [addressValue, updateAddressValue] = useState(undefined);
-  const [roleIndex, setRoleIndex] = useState(0);

  const addressRef = useRef(null);
  const topicRef = useRef(null);
@@ -48,7 +45,6 @@ function CreateRoom({ isOpen, onRequestClose }) {
    updateTitleValue(undefined);
    updateTopicValue(undefined);
    updateAddressValue(undefined);
-    setRoleIndex(0);
  }

  async function createRoom() {
@@ -64,15 +60,12 @@ function CreateRoom({ isOpen, onRequestClose }) {
      if (roomAlias.trim() === '') roomAlias = undefined;
    }

-    const powerLevel = roleIndex === 1 ? 101 : undefined;
-
    try {
-      const result = await roomActions.create({
-        name, topic, isPublic, roomAlias, isEncrypted, powerLevel,
+      await roomActions.create({
+        name, topic, isPublic, roomAlias, isEncrypted,
      });

      resetForm();
-      selectRoom(result.room_id);
      onRequestClose();
    } catch (e) {
      if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
@@ -146,19 +139,6 @@ function CreateRoom({ isOpen, onRequestClose }) {
              content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
            />
          )}
-          <SettingTile
-            title="Select your role"
-            options={(
-              <SegmentControl
-                selected={roleIndex}
-                segments={[{ text: 'Admin' }, { text: 'Founder' }]}
-                onSelect={setRoleIndex}
-              />
-            )}
-            content={(
-              <Text variant="b3">Override the default (100) power level.</Text>
-            )}
-          />
          <Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
          <div className="create-room__name-wrapper">
            <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />
--- a/src/app/organisms/create-room/CreateRoom.scss
+++ b/src/app/organisms/create-room/CreateRoom.scss
@@ -9,13 +9,6 @@
    }
  }

-  & .segment-btn {
-    padding: var(--sp-ultra-tight) 0;
-    &__base {
-      padding: 0 var(--sp-tight);
-    }
-  }
-
  &__address {
    display: flex;
    &__label {
--- a/src/app/organisms/invite-list/InviteList.jsx
+++ b/src/app/organisms/invite-list/InviteList.jsx
@@ -5,7 +5,6 @@ import './InviteList.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom, selectSpace } from '../../../client/action/navigation';

 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -30,18 +29,13 @@ function InviteList({ isOpen, onRequestClose }) {
    roomActions.leave(roomId, isDM);
  }
  function updateInviteList(roomId) {
-    if (procInvite.has(roomId)) procInvite.delete(roomId);
-    changeProcInvite(new Set(Array.from(procInvite)));
+    if (procInvite.has(roomId)) {
+      procInvite.delete(roomId);
+      changeProcInvite(new Set(Array.from(procInvite)));
+    } else changeProcInvite(new Set(Array.from(procInvite)));

    const rl = initMatrix.roomList;
-    const totalInvites = rl.inviteDirects.size + rl.inviteRooms.size + rl.inviteSpaces.size;
-    const room = initMatrix.matrixClient.getRoom(roomId);
-    const isRejected = room === null || room?.getMyMembership() !== 'join';
-    if (!isRejected) {
-      if (room.isSpaceRoom()) selectSpace(roomId);
-      else selectRoom(roomId);
-      onRequestClose();
-    }
+    const totalInvites = rl.inviteDirects.size + rl.inviteRooms.size;
    if (totalInvites === 0) onRequestClose();
  }

--- a/src/app/organisms/navigation/SideBar.jsx
+++ b/src/app/organisms/navigation/SideBar.jsx
@@ -70,7 +70,7 @@ function ProfileAvatarMenu() {
          tooltip={profile.displayName}
          imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
          bgColor={colorMXID(mx.getUserId())}
-          text={profile.displayName}
+          text={profile.displayName.slice(0, 1)}
        />
      )}
    />
@@ -121,7 +121,6 @@ function SideBar() {
    let noti = null;

    orphans.forEach((roomId) => {
-      if (roomList.spaceShortcut.has(roomId)) return;
      if (!notifications.hasNoti(roomId)) return;
      if (noti === null) noti = { total: 0, highlight: 0 };
      const childNoti = notifications.getNoti(roomId);
@@ -190,7 +189,7 @@ function SideBar() {
                      tooltip={room.name}
                      bgColor={colorMXID(room.roomId)}
                      imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
-                      text={room.name}
+                      text={room.name.slice(0, 1)}
                      isUnread={notifications.hasNoti(sRoomId)}
                      notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
                      isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -78,30 +78,19 @@ SessionInfo.propTypes = {
  userId: PropTypes.string.isRequired,
 };

-function ProfileFooter({ roomId, userId, onRequestClose }) {
+function ProfileFooter({ userId, onRequestClose }) {
  const [isCreatingDM, setIsCreatingDM] = useState(false);
  const [isIgnoring, setIsIgnoring] = useState(false);
  const [isUserIgnored, setIsUserIgnored] = useState(initMatrix.matrixClient.isUserIgnored(userId));

-  const isMountedRef = useRef(true);
  const mx = initMatrix.matrixClient;
-  const room = mx.getRoom(roomId);
-  const member = room.getMember(userId);
-  const isInvitable = member?.membership !== 'join' && member?.membership !== 'ban';
-
-  const [isInviting, setIsInviting] = useState(false);
-  const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
-
-  const myPowerlevel = room.getMember(mx.getUserId()).powerLevel;
-  const canIKick = room.currentState.hasSufficientPowerLevelFor('kick', myPowerlevel);
+  const isMountedRef = useRef(true);

  useEffect(() => () => {
    isMountedRef.current = false;
  }, []);
  useEffect(() => {
    setIsUserIgnored(initMatrix.matrixClient.isUserIgnored(userId));
-    setIsIgnoring(false);
-    setIsInviting(false);
  }, [userId]);

  async function openDM() {
@@ -155,24 +144,6 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
      setIsIgnoring(false);
    }
  }
-
-  async function toggleInvite() {
-    try {
-      setIsInviting(true);
-      let isInviteSent = false;
-      if (isInvited) await roomActions.kick(roomId, userId);
-      else {
-        await roomActions.invite(roomId, userId);
-        isInviteSent = true;
-      }
-      if (isMountedRef.current === false) return;
-      setIsInvited(isInviteSent);
-      setIsInviting(false);
-    } catch {
-      setIsInviting(false);
-    }
-  }
-
  return (
    <div className="profile-viewer__buttons">
      <Button
@@ -182,19 +153,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
      >
        {isCreatingDM ? 'Creating room...' : 'Message'}
      </Button>
-      { member?.membership === 'join' && <Button>Mention</Button>}
-      { (isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
-        <Button
-          onClick={toggleInvite}
-          disabled={isInviting}
-        >
-          {
-            isInvited
-              ? `${isInviting ? 'Disinviting...' : 'Disinvite'}`
-              : `${isInviting ? 'Inviting...' : 'Invite'}`
-          }
-        </Button>
-      )}
+      <Button>Mention</Button>
      <Button
        variant={isUserIgnored ? 'positive' : 'danger'}
        onClick={toggleIgnore}
@@ -210,7 +169,6 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
  );
 }
 ProfileFooter.propTypes = {
-  roomId: PropTypes.string.isRequired,
  userId: PropTypes.string.isRequired,
  onRequestClose: PropTypes.func.isRequired,
 };
@@ -249,15 +207,15 @@ function ProfileViewer() {
  }, [isOpen]);

  function renderProfile() {
-    const member = room.getMember(userId) || mx.getUser(userId) || {};
-    const avatarMxc = member.getMxcAvatarUrl?.() || member.avatarUrl;
+    const member = room.getMember(userId) || mx.getUser(userId);
+    const avatarMxc = member.getMxcAvatarUrl() || member.avatarUrl;

    return (
      <div className="profile-viewer">
        <div className="profile-viewer__user">
          <Avatar
            imageSrc={!avatarMxc ? null : mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop')}
-            text={username}
+            text={username.slice(0, 1)}
            bgColor={colorMXID(userId)}
            size="large"
          />
@@ -273,7 +231,6 @@ function ProfileViewer() {
        <SessionInfo userId={userId} />
        { userId !== mx.getUserId() && (
          <ProfileFooter
-            roomId={roomId}
            userId={userId}
            onRequestClose={() => setIsOpen(false)}
          />
--- a/src/app/organisms/room/PeopleDrawer.jsx
+++ b/src/app/organisms/room/PeopleDrawer.jsx
@@ -103,35 +103,30 @@ function PeopleDrawer({ roomId }) {
  }, [memberList]);

  useEffect(() => {
-    let isGettingMembers = true;
-    const updateMemberList = (event) => {
-      if (isGettingMembers) return;
-      console.log(event?.event?.room_id);
-      if (event && event?.event?.room_id !== roomId) return;
+    searchRef.current.value = '';
+    setMemberList(
+      simplyfiMembers(
+        getMembersWithMembership(membership)
+          .sort(AtoZ).sort(sortByPowerLevel),
+      ),
+    );
+    room.loadMembersIfNeeded().then(() => {
+      if (isRoomChanged) return;
      setMemberList(
        simplyfiMembers(
          getMembersWithMembership(membership)
            .sort(AtoZ).sort(sortByPowerLevel),
        ),
      );
-    };
-    searchRef.current.value = '';
-    updateMemberList();
-    room.loadMembersIfNeeded().then(() => {
-      isGettingMembers = false;
-      if (isRoomChanged) return;
-      updateMemberList();
    });

    asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchData);
-    mx.on('RoomMember.membership', updateMemberList);
    return () => {
      isRoomChanged = true;
      setMemberList([]);
      setSearchedMembers(null);
      setItemCount(PER_PAGE_MEMBER);
      asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
-      mx.removeListener('RoomMember.membership', updateMemberList);
    };
  }, [roomId, membership]);

--- a/src/app/organisms/room/RoomViewContent.jsx
+++ b/src/app/organisms/room/RoomViewContent.jsx
@@ -8,7 +8,7 @@ import dateFormat from 'dateformat';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
-import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
+import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { diffMinutes, isNotInSameDay, getEventCords } from '../../../util/common';
 import { openEmojiBoard, openProfileViewer, openReadReceipts } from '../../../client/action/navigation';
@@ -191,7 +191,6 @@ function RoomViewContent({
  const [onPagination, setOnPagination] = useState(null);
  const [editEvent, setEditEvent] = useState(null);
  const mx = initMatrix.matrixClient;
-  const noti = initMatrix.notifications;

  function autoLoadTimeline() {
    if (timelineScroll.isScrollable() === true) return;
@@ -200,7 +199,7 @@ function RoomViewContent({
  function trySendingReadReceipt() {
    const { room, timeline } = roomTimeline;
    if (
-      (noti.doesRoomHaveUnread(room) || noti.hasNoti(roomId))
+      (doesRoomHaveUnread(room) || initMatrix.notifications.hasNoti(roomId))
      && timeline.length !== 0) {
      mx.sendReadReceipt(timeline[timeline.length - 1]);
    }
@@ -283,7 +282,6 @@ function RoomViewContent({

    let content = mEvent.getContent().body;
    if (typeof content === 'undefined') return null;
-    const msgType = mEvent.getContent()?.msgtype;
    let reply = null;
    let reactions = null;
    let isMarkdown = mEvent.getContent().format === 'org.matrix.custom.html';
@@ -358,7 +356,7 @@ function RoomViewContent({
      <button type="button" onClick={() => openProfileViewer(mEvent.sender.userId, roomId)}>
        <Avatar
          imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
-          text={getUsernameOfRoomMember(mEvent.sender)}
+          text={getUsernameOfRoomMember(mEvent.sender).slice(0, 1)}
          bgColor={senderMXIDColor}
          size="small"
        />
@@ -381,10 +379,8 @@ function RoomViewContent({
    );
    const userContent = (
      <MessageContent
-        senderName={getUsernameOfRoomMember(mEvent.sender)}
        isMarkdown={isMarkdown}
        content={isMedia(mEvent) ? genMediaContent(mEvent) : content}
-        msgType={msgType}
        isEdited={isEdited}
      />
    );
@@ -500,7 +496,6 @@ function RoomViewContent({
        header={userHeader}
        reply={userReply}
        content={editEvent !== null && isEditingEvent ? null : userContent}
-        msgType={msgType}
        editContent={editEvent !== null && isEditingEvent ? (
          <MessageEdit
            content={content}
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -24,7 +24,7 @@ function RoomViewHeader({ roomId }) {

  return (
    <Header>
-      <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
+      <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
      <TitleWrapper>
        <Text variant="h2">{roomName}</Text>
        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -29,7 +29,7 @@ import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
 import FileIC from '../../../../public/res/ic/outlined/file.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';

-const CMD_REGEX = /(^\/|^>[#*@]|:|@)(\S*)$/;
+const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
 let cmdCursorPos = null;
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import './Settings.scss';

 import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { toggleMarkdown } from '../../../client/action/settings';

@@ -105,7 +104,7 @@ function AboutSection() {
        <div>
          <Text variant="h2">
            Cinny
-            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.4.0</span>
          </Text>
          <Text>Yet another matrix client</Text>

--- a/src/app/templates/auth/Auth.jsx
+++ b/src/app/templates/auth/Auth.jsx
@@ -1,14 +1,11 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Auth.scss';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { Formik } from 'formik';

+import { useLocation } from 'react-router-dom';
 import * as auth from '../../../client/action/auth';
 import cons from '../../../client/state/cons';
-import { Debounce, getUrlPrams } from '../../../util/common';
-import { getBaseUrl } from '../../../util/matrixUtil';

 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -16,556 +13,356 @@ import IconButton from '../../atoms/button/IconButton';
 import Input from '../../atoms/input/Input';
 import Spinner from '../../atoms/spinner/Spinner';
 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 ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
 import CinnySvg from '../../../../public/res/svg/cinny.svg';
 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 BAD_LOCALPART_ERROR = 'Username can only contain characters a-z, 0-9, or \'=_-./\'';
+const BAD_LOCALPART_ERROR = 'Username must contain only a-z, 0-9, ., _, =, -, and /.';
 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 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 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 CONFIRM_PASSWORD_ERROR = 'Passwords don\'t match.';

-const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+const EMAIL_REGEX = /([a-z0-9]+[_a-z0-9.-][a-z0-9]+)@([a-z0-9-]+(?:.[a-z0-9-]+).[a-z]{2,4})/;
 const BAD_EMAIL_ERROR = 'Invalid email address';

 function isValidInput(value, regex) {
  if (typeof regex === 'string') return regex === 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) {
  const noLeadingAt = rawUsername.indexOf('@') === 0 ? rawUsername.substr(1) : rawUsername;
  return noLeadingAt.trim();
 }

-let searchingHs = null;
-function Homeserver({ onChange }) {
-  const [hs, setHs] = useState(null);
-  const [debounce] = useState(new Debounce());
-  const [process, setProcess] = useState({ isLoading: true, message: 'Loading homeserver list...' });
-  const hsRef = useRef();
-
-  const setupHsConfig = async (servername) => {
-    setProcess({ isLoading: true, message: 'Looking for homeserver...' });
-    let baseUrl = null;
-    try {
-      baseUrl = await getBaseUrl(servername);
-    } catch (e) {
-      baseUrl = e.message;
-    }
-    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.' });
-      });
-  };
-
-  useEffect(() => {
-    onChange(null);
-    if (hs === null || hs?.selected.trim() === '') return;
-    searchingHs = hs.selected;
-    setupHsConfig(hs.selected);
-  }, [hs]);
-
-  useEffect(async () => {
-    const link = window.location.href;
-    const configFileUrl = `${link}${link[link.length - 1] === '/' ? '' : '/'}config.json`;
-    try {
-      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'] });
-    }
-  }, []);
-
-  const handleHsInput = (e) => {
-    const { value } = e.target;
-    setProcess({ isLoading: false });
-    debounce._(async () => {
-      setHs({ selected: value, list: hs.list });
-    }, 700)();
-  };
-
-  return (
-    <>
-      <div className="homeserver-form">
-        <Input name="homeserver" onChange={handleHsInput} value={hs?.selected} forwardRef={hsRef} label="Homeserver" />
-        <ContextMenu
-          placement="right"
-          content={(hideMenu) => (
-            <>
-              <MenuHeader>Homeserver list</MenuHeader>
-              {
-                hs?.list.map((hsName) => (
-                  <MenuItem
-                    key={hsName}
-                    onClick={() => {
-                      hideMenu();
-                      hsRef.current.value = hsName;
-                      setHs({ selected: hsName, list: hs.list });
-                    }}
-                  >
-                    {hsName}
-                  </MenuItem>
-                ))
-              }
-            </>
-          )}
-          render={(toggleMenu) => <IconButton onClick={toggleMenu} src={ChevronBottomIC} />}
-        />
-      </div>
-      {process.error !== undefined && <Text className="homeserver-form__error" variant="b3">{process.error}</Text>}
-      {process.isLoading && (
-        <div className="homeserver-form__status flex--center">
-          <Spinner size="small" />
-          <Text variant="b2">{process.message}</Text>
-        </div>
-      )}
-    </>
-  );
-}
-Homeserver.propTypes = {
-  onChange: PropTypes.func.isRequired,
-};
-
-function Login({ loginFlow, baseUrl }) {
-  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 === 'm.login.sso')[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="sso"
-          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 === 'm.login.sso')[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) > -1) {
-          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="sso"
-          identityProviders={ssoProviders.identity_providers}
-          baseUrl={baseUrl}
-        />
-      )}
-    </>
-  );
-}
-Register.propTypes = {
-  registerInfo: PropTypes.shape({}).isRequired,
-  loginFlow: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-  baseUrl: PropTypes.string.isRequired,
-};
-
-function AuthCard() {
-  const [hsConfig, setHsConfig] = useState(null);
-  const [type, setType] = useState('login');
-
-  const handleHsChange = (info) => {
-    console.log(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?`}
-          <button
-            type="button"
-            style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }}
-            onClick={() => setType((type === 'login') ? 'register' : 'login')}
-          >
-            { type === 'login' ? ' Register' : ' Login' }
-          </button>
-        </Text>
-      )}
-    </>
-  );
-}
-
 function Auth() {
-  const [loginToken, setLoginToken] = useState(getUrlPrams('loginToken'));
+  const [type, setType] = useState('login');
+  const [process, changeProcess] = useState(null);
+  const [homeserver, changeHomeserver] = useState('matrix.org');

-  useEffect(async () => {
-    if (!loginToken) return;
-    if (localStorage.getItem(cons.secretKey.BASE_URL) === undefined) {
-      setLoginToken(null);
+  const usernameRef = useRef(null);
+  const homeserverRef = useRef(null);
+  const passwordRef = useRef(null);
+  const confirmPasswordRef = useRef(null);
+  const emailRef = useRef(null);
+
+  const { search } = useLocation();
+  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);
+            }
+          });
+      }
+    }
+  }
+
+  function register(recaptchaValue, terms, verified) {
+    auth.register(
+      usernameRef.current.value,
+      homeserverRef.current.value,
+      passwordRef.current.value,
+      emailRef.current.value,
+      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) {
+    e.preventDefault();
+    document.getElementById('auth_submit-btn').disabled = true;
+    document.getElementById('auth_error').style.display = 'none';
+
+    /** @type {string} */
+    const rawUsername = usernameRef.current.value;
+    /** @type {string} */
+    const normalizedUsername = normalizeUsername(rawUsername);
+
+    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;
    }
-    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);
+    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 (
-    <ScrollView invisible>
-      <div className="auth__base">
-        <div className="auth__wrapper">
-          {loginToken && <LoadingScreen message="Redirecting..." />}
-          {!loginToken && (
-            <div className="auth-card flex-v">
-              <Header>
-                <Avatar size="extra-small" imageSrc={CinnySvg} />
-                <TitleWrapper>
-                  <Text variant="h2">Cinny</Text>
-                </TitleWrapper>
-              </Header>
-              <div className="auth-card__content">
-                <AuthCard />
-              </div>
+    <>
+      {process?.type === 'loading' && <LoadingScreen message={process.message} />}
+      {process?.type === 'recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={(v) => { if (typeof v === 'string') register(v); }} />}
+      {process?.type === 'terms' && <Terms url={process.en.url} onSubmit={register} />}
+      {process?.type === 'email' && (
+        <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>{`(${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">
+                  <Input
+                    forwardRef={confirmPasswordRef}
+                    onChange={(e) => {
+                      validateOnChange(e.target, passwordRef.current.value, CONFIRM_PASSWORD_ERROR);
+                    }}
+                    id="auth_confirmPassword"
+                    type="password"
+                    label="Confirm password"
+                    required
+                  />
+                  <IconButton
+                    onClick={() => {
+                      if (confirmPasswordRef.current.type === 'password') {
+                        confirmPasswordRef.current.type = 'text';
+                      } else confirmPasswordRef.current.type = 'password';
+                    }}
+                    size="extra-small"
+                    src={EyeIC}
+                  />
+                </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">
+              <Text id="auth_error" className="error-message" variant="b3">Error</Text>
+              <Button
+                id="auth_submit-btn"
+                variant="primary"
+                type="submit"
+              >
+                {type === 'login' ? 'Login' : 'Register' }
+              </Button>
+            </div>
+            {type === 'login' && (
+              <SSOButtons homeserver={homeserver} />
+            )}
+          </form>
        </div>

-        <div className="auth-footer">
+        <div style={{ flexDirection: 'column' }} className="flex--center">
          <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>
+            {`${(type === 'login' ? 'Don\'t have' : 'Already have')} an account?`}
+            <button
+              type="button"
+              style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }}
+              onClick={() => {
+                if (type === 'login') setType('register');
+                else setType('login');
+              }}
+            >
+              { type === 'login' ? ' Register' : ' Login' }
+            </button>
          </Text>
+          <span style={{ marginTop: 'var(--sp-extra-tight)' }}>
+            <Text variant="b3">v1.4.0</Text>
+          </span>
+        </div>
+      </StaticWrapper>
+    </>
+  );
+}
+
+function StaticWrapper({ children }) {
+  return (
+    <ScrollView invisible>
+      <div className="auth__wrapper flex--center">
+        <div className="auth-card">
+          <div className="auth-card__interactive flex-v">
+            <div className="app-ident flex">
+              <img className="app-ident__logo noselect" src={CinnySvg} alt="Cinny logo" />
+              <div className="app-ident__text flex-v--center">
+                <Text variant="h2">Cinny</Text>
+                <Text variant="b2">Yet another matrix client</Text>
+              </div>
+            </div>
+            { children }
+          </div>
        </div>
      </div>
    </ScrollView>
  );
 }

+StaticWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 function LoadingScreen({ message }) {
  return (
    <ProcessWrapper>
@@ -599,7 +396,7 @@ Recaptcha.propTypes = {
 function Terms({ url, onSubmit }) {
  return (
    <ProcessWrapper>
-      <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
+      <form onSubmit={() => onSubmit(undefined, true)}>
        <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
          <Text variant="h2">Agree with terms</Text>
          <div style={{ marginBottom: 'var(--sp-normal)' }} />
@@ -622,27 +419,6 @@ Terms.propTypes = {
  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 }) {
  return (
    <div className="process-wrapper">
--- a/src/app/templates/auth/Auth.scss
+++ b/src/app/templates/auth/Auth.scss
@@ -1,144 +1,156 @@
-.auth__base {
-  --pattern-size: 48px;
-  min-height: 100%;
+.auth__wrapper {
+  min-height: 100vh;
+  padding: var(--sp-loose);
  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);
+  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");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;

-  display: flex;
-  flex-direction: column;
-}
-.auth__wrapper {
-  flex: 1;
-  padding: var(--sp-loose);
-  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;
+  .auth-card {
+    width: 462px;
+    min-height: 644px;
+    background-color: var(--bg-surface-low);
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-popup);
+    overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    
+    &__interactive{
+      flex: 1;
+      min-width: 0;
+    }

-  & > *:nth-child(2n) {
-    margin: 0 var(--sp-loose);
-  }
-  & a {
-    color: var(--tc-surface-normal);
-    &:hover { text-decoration: underline; }
-  }
-}
-.auth-card {
-  width: 462px;
-  background-color: var(--bg-surface);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-popup);
-  overflow: hidden;
-
-  &__content {
-    padding: var(--sp-extra-loose) calc(var(--sp-normal) + var(--sp-extra-loose));
-  }
-  &__switch {
-    margin-top: var(--sp-loose) !important;
-  }
-}
-
-.homeserver-form,
-.auth-form__heading {
-  & .context-menu .btn-surface .ic-raw {
-    width: 0;
-  }
-}
-
-.homeserver-form {
-  display: flex;
-  margin-bottom: var(--sp-extra-tight);
-  align-items: flex-end;
-  & > .input-container {
-    flex: 1;
-    & .input {
-      border-right: unset;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+    &__interactive {
+      padding: calc(var(--sp-normal) + var(--sp-extra-loose));
+      padding-bottom: var(--sp-extra-loose);
      background-color: var(--bg-surface);
    }
-  }
-  & .ic-btn {
-    height: 46px;
-    border: 1px solid var(--bg-surface-border);
-    border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-  }
-  [dir=rtl] & {
-    & .input {
-      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;
+}
+
+.app-ident {
+  margin-bottom: var(--sp-extra-loose);
+
+  &__logo {
+    width: 60px;
+    height: 60px;
+  }
+  &__text {
+    margin-left: calc(var(--sp-loose) + var(--sp-ultra-tight));
+
+    .text-s1 {
+      margin-top: var(--sp-tight);
+      color: var(--tc-surface-normal);
+    }
+
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right:  calc(var(--sp-loose) + var(--sp-ultra-tight));
+    }
  }
 }

 .auth-form {
+
+  & > .text {
+    margin-bottom: var(--sp-loose);
+    margin-top: var(--sp-loose);
+  }
  & > .input-container {
-    margin: var(--sp-tight) 0 var(--sp-ultra-tight);
-  }
-  
-  &__heading {
-    display: flex;
-    justify-content: space-between;
-    margin-top: calc(var(--sp-extra-loose) + var(--sp-tight));
+    margin-top: var(--sp-tight);
  }

-  &__btns {
-    padding-top: var(--sp-loose);
-    margin-bottom: var(--sp-extra-loose);
-    display: flex;
-    justify-content: flex-end;
+  .submit-btn__wrapper {
+    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);
+        }
+      }
+    }
  }

-  &__error {
-    color: var(--tc-danger-normal) !important;
+  &__wrapper {
+    height: 100%;
  }
 }
-.sso__divider {
-  margin-bottom: var(--sp-tight);
-  display: flex;
-  align-items: center;

-  &::before,
-  &::after {
+.username__wrapper {
+  display: flex;
+  align-items: flex-end;
+
+  & > :first-child {
    flex: 1;
-    content: '';
-    margin: var(--sp-tight);
-    border-bottom: 1px solid var(--bg-surface-border);
+
+    .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 {
+      border-left-width: 0;
+      background-color: var(--bg-surface);
+      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+
+      [dir=rtl] & {
+        border-left-width: 1px;
+        border-right-width: 0;
+        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      }
+    }
+  }
+}
+
+.password__wrapper {
+  margin-top: var(--sp-tight);
+  position: relative;
+
+  & .ic-btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+    [dir=rtl] & {
+      left: 6px;
+      right: unset;
+    }
  }
 }

@media (max-width: 462px) {
  .auth__wrapper {
-    padding: var(--sp-tight);
-  }
-  .auth-card {
-    &__content {
-      padding: var(--sp-loose) var(--sp-normal);
+    padding: 0;
+    background-image: none;
+    background-color: var(--bg-surface);
+
+    .auth-card {
+      border-radius: 0;
+      box-shadow: none;
+
+      &__interactive {
+        padding: var(--sp-extra-loose);
+      }
    }
  }
 }
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -9,31 +9,14 @@ import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 import RoomOptions from '../../organisms/room-optons/RoomOptions';
-import logout from '../../../client/action/logout';

 import initMatrix from '../../../client/initMatrix';

 function Client() {
  const [isLoading, changeLoading] = useState(true);
-  const [loadingMsg, setLoadingMsg] = useState('Heating up');

  useEffect(() => {
-    let counter = 0;
-    const iId = setInterval(() => {
-      const msgList = [
-        'Sometimes it takes a while...',
-        'Looks like you have a lot of stuff to heat up!',
-      ];
-      if (counter === msgList.length - 1) {
-        setLoadingMsg(msgList[msgList.length - 1]);
-        clearInterval(iId);
-        return;
-      }
-      setLoadingMsg(msgList[counter]);
-      counter += 1;
-    }, 9000);
    initMatrix.once('init_loading_finished', () => {
-      clearInterval(iId);
      changeLoading(false);
    });
    initMatrix.init();
@@ -42,11 +25,8 @@ function Client() {
  if (isLoading) {
    return (
      <div className="loading-display">
-        <button className="loading__logout" onClick={logout} type="button">
-          <Text variant="b3">Logout</Text>
-        </button>
        <Spinner />
-        <Text className="loading__message" variant="b2">{loadingMsg}</Text>
+        <Text className="loading__message" variant="b2">Heating up</Text>

        <div className="loading__appname">
          <Text variant="h2">Cinny</Text>
--- a/src/app/templates/client/Client.scss
+++ b/src/app/templates/client/Client.scss
@@ -18,7 +18,7 @@
  top: 0;
  left: 0;
  width: 100vw;
-  height: 100%;
+  height: 100vh;

  display: flex;
  flex-direction: column;
@@ -27,19 +27,8 @@
 }
 .loading__message {
  margin-top: var(--sp-normal);
-  max-width: 350px;
-  text-align: center;
 }
 .loading__appname {
  position: absolute;
  bottom: var(--sp-normal);
-}
-.loading__logout {
-  position: absolute;
-  bottom: var(--sp-extra-tight);
-  right: var(--sp-extra-tight);
-  cursor: pointer;
-  .text {
-    color: var(--tc-link);
-  }
 }
--- a/src/client/action/auth.js
+++ b/src/client/action/auth.js
@@ -1,104 +1,189 @@
 import * as sdk from 'matrix-js-sdk';
 import cons from '../state/cons';
+import { getBaseUrl } from '../../util/matrixUtil';

-function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
-  localStorage.setItem(cons.secretKey.ACCESS_TOKEN, accessToken);
-  localStorage.setItem(cons.secretKey.DEVICE_ID, deviceId);
-  localStorage.setItem(cons.secretKey.USER_ID, userId);
-  localStorage.setItem(cons.secretKey.BASE_URL, baseUrl);
-}
+// This method inspired by a similar one in matrix-react-sdk
+async function createTemporaryClient(homeserver) {
+  let baseUrl = null;
+  try {
+    baseUrl = await getBaseUrl(homeserver);
+  } catch (e) {
+    baseUrl = `https://${homeserver}`;
+  }
+
+  if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found');

-function createTemporaryClient(baseUrl) {
  return sdk.createClient({ baseUrl });
 }

-async function startSsoLogin(baseUrl, type, idpId) {
-  const client = createTemporaryClient(baseUrl);
+async function getLoginFlows(client) {
+  const flows = await client.loginFlows();
+  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);
  window.location.href = client.getSsoLoginUrl(window.location.href, type, idpId);
 }

-async function login(baseUrl, username, email, password) {
-  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');
+async function login(username, homeserver, password) {
+  const client = await createTemporaryClient(homeserver);

-  const client = createTemporaryClient(baseUrl);
-  const res = await client.login('m.login.password', {
-    identifier,
+  const response = await client.login('m.login.password', {
+    identifier: {
+      type: 'm.id.user',
+      user: username,
+    },
    password,
    initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
  });

-  const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
-  updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
+  localStorage.setItem(cons.secretKey.ACCESS_TOKEN, response.access_token);
+  localStorage.setItem(cons.secretKey.DEVICE_ID, response.device_id);
+  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) {
-  const client = createTemporaryClient(baseUrl);
+  const client = sdk.createClient(baseUrl);

-  const res = await client.login('m.login.token', {
+  const response = await client.login('m.login.token', {
    token,
    initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
  });

-  const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
-  updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
+  localStorage.setItem(cons.secretKey.ACCESS_TOKEN, response.access_token);
+  localStorage.setItem(cons.secretKey.DEVICE_ID, response.device_id);
+  localStorage.setItem(cons.secretKey.USER_ID, response.user_id);
+  localStorage.setItem(cons.secretKey.BASE_URL, response?.well_known?.['m.homeserver']?.base_url || client.baseUrl);
 }

-// eslint-disable-next-line camelcase
-async function verifyEmail(baseUrl, email, client_secret, send_attempt, next_link) {
-  const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
-    method: 'POST',
-    body: JSON.stringify({
-      email, client_secret, send_attempt, next_link,
-    }),
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8',
-    },
-    credentials: 'same-origin',
-  });
-  const data = await res.json();
-  return data;
-}
-
-async function completeRegisterStage(
-  baseUrl, username, password, auth,
-) {
-  const tempClient = createTemporaryClient(baseUrl);
-
+async function getAdditionalInfo(baseUrl, content) {
  try {
-    const result = await tempClient.registerRequest({
-      username,
-      password,
-      auth,
-      initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
+    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 = { completed: result.completed || [] };
-    if (result.access_token) {
-      data.done = true;
-      updateLocalStore(result.access_token, result.device_id, result.user_id, baseUrl);
-    }
+    const data = await res.json();
    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;
+    throw new Error(e);
  }
 }

+async function verifyEmail(baseUrl, content) {
+  try {
+    const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
+      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);
+  }
+}
+
+let session = null;
+let clientSecret = null;
+let sid = null;
+async function register(username, homeserver, password, email, recaptchaValue, terms, verified) {
+  const baseUrl = await getBaseUrl(homeserver);
+
+  if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found');
+
+  const client = sdk.createClient({ baseUrl });
+
+  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) {
+    await getAdditionalInfo(baseUrl, {
+      auth: {
+        type: 'm.login.terms',
+        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;
+  }
+
+  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 {
-  createTemporaryClient, login, verifyEmail,
-  loginWithToken, startSsoLogin,
-  completeRegisterStage,
+  createTemporaryClient, getLoginFlows, login,
+  loginWithToken, register, startSsoLogin,
 };
--- a/src/client/action/logout.js
+++ b/src/client/action/logout.js
@@ -2,7 +2,6 @@ import initMatrix from '../initMatrix';

 function logout() {
  const mx = initMatrix.matrixClient;
-  mx.stopClient();
  mx.logout().then(() => {
    mx.clearStores();
    window.localStorage.clear();
--- a/src/client/action/room.js
+++ b/src/client/action/room.js
@@ -132,11 +132,9 @@ function leave(roomId) {
 * @param {boolean} [opts.isEncrypted=false] Makes room encrypted
 * @param {boolean} [opts.isDirect=false] Makes room as direct message
 * @param {string[]} [opts.invite=[]] An array of userId's to invite
- * @param{number} [opts.powerLevel=100] My power level
 */
 async function create(opts) {
  const mx = initMatrix.matrixClient;
-  const customPowerLevels = [101];
  const options = {
    name: opts.name,
    topic: opts.topic,
@@ -146,9 +144,6 @@ async function create(opts) {
    invite: opts.invite || [],
    initial_state: [],
    preset: opts.isDirect === true ? 'trusted_private_chat' : undefined,
-    power_level_content_override: customPowerLevels.indexOf(opts.powerLevel) === -1 ? undefined : {
-      users: { [initMatrix.matrixClient.getUserId()]: opts.powerLevel },
-    },
  };

  if (opts.isPublic !== true && opts.isEncrypted === true) {
@@ -188,15 +183,12 @@ async function create(opts) {
 async function invite(roomId, userId) {
  const mx = initMatrix.matrixClient;

-  const result = await mx.invite(roomId, userId);
-  return result;
-}
-
-async function kick(roomId, userId) {
-  const mx = initMatrix.matrixClient;
-
-  const result = await mx.kick(roomId, userId);
-  return result;
+  try {
+    const result = await mx.invite(roomId, userId);
+    return result;
+  } catch (e) {
+    throw new Error(e);
+  }
 }

 function createSpaceShortcut(roomId) {
@@ -215,6 +207,6 @@ function deleteSpaceShortcut(roomId) {

 export {
  join, leave,
-  create, invite, kick,
+  create, invite,
  createSpaceShortcut, deleteSpaceShortcut,
 };
--- a/src/client/initMatrix.js
+++ b/src/client/initMatrix.js
@@ -31,7 +31,6 @@ class InitMatrix extends EventEmitter {
      sessionStore: new sdk.WebStorageSessionStore(global.localStorage),
      cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
      deviceId: secret.deviceId,
-      timelineSupport: true,
    });

    await this.matrixClient.initCrypto();
--- a/src/client/state/Notifications.js
+++ b/src/client/state/Notifications.js
@@ -77,28 +77,12 @@ class Notifications extends EventEmitter {
    return this.roomIdToNoti.has(roomId);
  }

-  _getAllParentIds(roomId) {
-    let allParentIds = this.roomList.roomIdToParents.get(roomId);
-    if (allParentIds === undefined) return new Set();
-    const parentIds = [...allParentIds];
-
-    parentIds.forEach((pId) => {
-      allParentIds = new Set(
-        [...allParentIds, ...this._getAllParentIds(pId)],
-      );
-    });
-
-    return allParentIds;
-  }
-
  _setNoti(roomId, total, highlight, childId) {
    const prevTotal = this.roomIdToNoti.get(roomId)?.total ?? null;
    const noti = this.getNoti(roomId);

-    if (!childId || this._remainingParentIds?.has(roomId)) {
-      noti.total += total;
-      noti.highlight += highlight;
-    }
+    noti.total += total;
+    noti.highlight += highlight;
    if (childId) {
      if (noti.from === null) noti.from = new Set();
      noti.from.add(childId);
@@ -107,16 +91,9 @@ class Notifications extends EventEmitter {
    this.roomIdToNoti.set(roomId, noti);
    this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);

-    if (!childId) this._remainingParentIds = this._getAllParentIds(roomId);
-    else this._remainingParentIds.delete(roomId);
-
    const parentIds = this.roomList.roomIdToParents.get(roomId);
-    if (typeof parentIds === 'undefined') {
-      if (!childId) this._remainingParentIds = undefined;
-      return;
-    }
+    if (typeof parentIds === 'undefined') return;
    [...parentIds].forEach((parentId) => this._setNoti(parentId, total, highlight, roomId));
-    if (!childId) this._remainingParentIds = undefined;
  }

  _deleteNoti(roomId, total, highlight, childId) {
@@ -126,12 +103,8 @@ class Notifications extends EventEmitter {
    const prevTotal = noti.total;
    noti.total -= total;
    noti.highlight -= highlight;
-    if (noti.total < 0) {
-      noti.total = 0;
-      noti.highlight = 0;
-    }
    if (childId && noti.from !== null) {
-      if (!this.hasNoti(childId)) noti.from.delete(childId);
+      noti.from.delete(childId);
    }
    if (noti.from === null || noti.from.size === 0) {
      this.roomIdToNoti.delete(roomId);
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -1,5 +1,4 @@
 const cons = {
-  version: '1.5.1',
  secretKey: {
    ACCESS_TOKEN: 'cinny_access_token',
    DEVICE_ID: 'cinny_device_id',
--- a/src/index.scss
+++ b/src/index.scss
@@ -290,17 +290,6 @@ button {
  overflow: visible;
  -webkit-appearance: button;
 }
-textarea,
-input,
-input[type],
-input[type=text],
-input[type=username],
-input[type=password],
-input[type=email] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
 textarea {
  color: inherit;
  word-spacing: inherit;
--- a/src/util/common.js
+++ b/src/util/common.js
@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 export function bytesToSize(bytes) {
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  if (bytes === 0) return 'n/a';
@@ -34,53 +33,3 @@ export function abbreviateNumber(number) {
  if (number > 99) return '99+';
  return number;
 }
-
-export class Debounce {
-  constructor() {
-    this.timeoutId = null;
-  }
-
-  /**
-   * @param {function} func - callback function
-   * @param {number} wait - wait in milliseconds to call func
-   * @returns {func} debounceCallback - to pass arguments to func callback
-   */
-  _(func, wait) {
-    const that = this;
-    return function debounceCallback(...args) {
-      clearTimeout(that.timeoutId);
-      that.timeoutId = setTimeout(() => {
-        func.apply(this, args);
-        that.timeoutId = null;
-      }, wait);
-    };
-  }
-}
-
-export class Throttle {
-  constructor() {
-    this.timeoutId = null;
-  }
-
-  /**
-   * @param {function} func - callback function
-   * @param {number} wait - wait in milliseconds to call func
-   * @returns {function} throttleCallback - to pass arguments to func callback
-   */
-  _(func, wait) {
-    const that = this;
-    return function throttleCallback(...args) {
-      if (that.timeoutId !== null) return;
-      that.timeoutId = setTimeout(() => {
-        func.apply(this, args);
-        that.timeoutId = null;
-      }, wait);
-    };
-  }
-}
-
-export function getUrlPrams(paramName) {
-  const queryString = window.location.search;
-  const urlParams = new URLSearchParams(queryString);
-  return urlParams.get(paramName);
-}
--- a/src/util/matrixUtil.js
+++ b/src/util/matrixUtil.js
@@ -2,18 +2,15 @@ import initMatrix from '../client/initMatrix';

 const WELL_KNOWN_URI = '/.well-known/matrix/client';

-async function getBaseUrl(servername) {
-  let protocol = 'https://';
-  if (servername.match(/^https?:\/\//) !== null) protocol = '';
-  const serverDiscoveryUrl = `${protocol}${servername}${WELL_KNOWN_URI}`;
+async function getBaseUrl(homeserver) {
+  const serverDiscoveryUrl = `https://${homeserver}${WELL_KNOWN_URI}`;
  try {
-    const result = await (await fetch(serverDiscoveryUrl, { method: 'GET' })).json();
+    const result = await fetch(serverDiscoveryUrl, { method: 'GET' });
+    const data = await result.json();

-    const baseUrl = result?.['m.homeserver']?.base_url;
-    if (baseUrl === undefined) throw new Error();
-    return baseUrl;
+    return data?.['m.homeserver']?.base_url;
  } catch (e) {
-    throw new Error(`${protocol}${servername}`);
+    throw new Error('Homeserver not found');
  }
 }

@@ -48,6 +45,30 @@ async function isRoomAliasAvailable(alias) {
  }
 }

+function doesRoomHaveUnread(room) {
+  const userId = initMatrix.matrixClient.getUserId();
+  const readUpToId = room.getEventReadUpTo(userId);
+  const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
+
+  if (room.timeline.length
+    && room.timeline[room.timeline.length - 1].sender
+    && room.timeline[room.timeline.length - 1].sender.userId === userId
+    && room.timeline[room.timeline.length - 1].getType() !== 'm.room.member') {
+    return false;
+  }
+
+  for (let i = room.timeline.length - 1; i >= 0; i -= 1) {
+    const event = room.timeline[i];
+
+    if (event.getId() === readUpToId) return false;
+
+    if (supportEvents.includes(event.getType())) {
+      return true;
+    }
+  }
+  return true;
+}
+
 function getPowerLabel(powerLevel) {
  if (powerLevel > 9000) return 'Goku';
  if (powerLevel > 100) return 'Founder';
@@ -58,5 +79,5 @@ function getPowerLabel(powerLevel) {

 export {
  getBaseUrl, getUsername, getUsernameOfRoomMember,
-  isRoomAliasAvailable, getPowerLabel,
+  isRoomAliasAvailable, doesRoomHaveUnread, getPowerLabel,
 };
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,6 +1,6 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
-const CopyPlugin = require("copy-webpack-plugin");
+const webpack = require('webpack');

 module.exports = {
  entry: {
@@ -38,13 +38,15 @@ module.exports = {
        use: ['html-loader'],
      },
      {
-        test: /\.(png|jpe?g|gif|otf|ttf)$/,
-        type: 'asset/resource',
+        test: /\.(svg|png|jpe?g|gif|otf|ttf)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash].[ext]',
+            outputPath: 'assets',
+          },
+        },
      },
-      {
-        test: /\.svg$/,
-        type: 'asset/inline',
-      }
    ],
  },
  plugins: [
@@ -65,12 +67,8 @@ module.exports = {
        }
      }
    }),
-    new CopyPlugin({
-      patterns: [
-        { from: 'olm.wasm' },
-        { from: '_redirects' },
-        { from: 'config.json' },
-      ],
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify(process.env),
    }),
  ],
 };
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -4,6 +4,7 @@ const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");

 module.exports = merge(common, {
  mode: 'production',
@@ -35,5 +36,11 @@ module.exports = merge(common, {
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].bundle.css',
    }),
+    new CopyPlugin({
+      patterns: [
+        { from: 'olm.wasm' },
+        { from: '_redirects' },
+      ],
+    }),
  ],
 });
Author	SHA1	Message	Date
Ajay Bura	253e3eb855	v1.4.0: SSO login and profile viewer Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	54dd5a4edb	Fix reaction selector doesn't focus msg input (#62 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	0bd22bee13	Fix message menu placement on large screen (#113 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	6703614c78	Fix wildcard matching in emojisearch (#121 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	32923a1c34	Fix profile picture inconsistency (#104 , #147 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	1dc0f9288a	UI improvement in SSO Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	2e62f103f2	SegmentedControl bug fixed Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	d0e9aea788	Add option to filter PeopleDrawer Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	e12a75e431	Enhanced people search UX Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5ece37fffe	Added button reset type. Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	e6f228b63e	Fixed inconsistent search in emojiboard. Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5018df11f1	Add search in People drawer Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5f6667debf	SSO login bug fixed Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5b1d5d0326	Fix redirect on SSO login (#142 ), #27 , #94 Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
James Julich	012e933e43	Address 301 redirect issue and Safari regex issue. (#143 ) * Address 301 redirect issue and Safari regex issue. * Restored login redirect as this doesn't not fix the sso redirect #143. Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2021-10-25 17:59:57 +05:30
Gero Gerke	825db633a0	Implement Profile Viewer (#130 ) * Implement Profile Viewer Fixes #111 * Make user avatar in chat clickable * design progress * Refactored code * progress * Updated chip comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refactored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added msg functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added Ignore functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Fixed Ignore btn bug Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refectored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> Co-authored-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	4dfe40333e	Update pull-request.yml	2021-10-25 17:59:57 +05:30
Ajay Bura	a34c35fbe3	Update pull-request.yml	2021-10-25 17:59:57 +05:30
Ajay Bura	8b4beccf82	Fixed deploy on PR	2021-10-25 17:59:57 +05:30
Ajay Bura	d067fe776d	Update pull-request.yml	2021-10-25 17:59:57 +05:30
Ajay Bura	9fad8a1098	added action for pull request previews	2021-10-25 17:59:57 +05:30
jamesjulich	8a1b749667	Add support for SSO login.	2021-10-25 17:59:57 +05:30
kfiven	7b67e4a6e6	Fix unable to send msg in DM from IRC users (#135 )	2021-10-25 17:59:57 +05:30
Ajay Bura	824a7f2095	Fix make both user admin on DM create Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	b4d4cefe23	Updated support link Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Krishan	bdb94d7145	Merge pull request #131 from ajbura/dev v1.3.2	2021-10-06 13:22:18 +05:30