added a "password reset email has been sent" screen

css/base.css

@@ -20,7 +20,6 @@ html, body {
 
 tt {
   font-family: 'Roboto Mono', Courier, monospace;
-  white-space: nowrap;
 }
 
 a {
@@ -249,11 +248,6 @@ textarea {
   resize: none;
   padding-top: 0.45rem;
 }
-
-textarea.inplace-edit {
-  height: unset;
-}
-
 /* END of input and buttons */
 
 /* BEGIN scrollbar styling.  */
@@ -332,10 +326,6 @@ li:hover .menuTrigger a {
   color: #757575;
 }
 
-ul.contact-box .menuTrigger {
-  background-image: radial-gradient(#eceff1 40%, transparent 75%);
-}
-
 li.left:hover .menuTrigger {
   background-image: radial-gradient(#c5e1a5 40%, transparent 75%);
 }
@@ -343,10 +333,6 @@ li.right:hover .menuTrigger {
   background-image: radial-gradient(#fafafa 40%, transparent 75%);
 }
 
-li.selected .menuTrigger {
-  background-image: radial-gradient(#cfd8dc 40%, transparent 75%);
-}
-
 /* END popup/dropdown menu */
 
 /* Begin Alert: modal window with message and buttons. */
@@ -382,44 +368,29 @@ div.alert .content {
 }
 /* END Alert */
 
-/* BEGIN trusted badges with legend */
-div.trusted-badge {
-  margin: 0.25rem 0;
-}
-/* END trusted badges */
-
 /* Generic text colors */
 .blue {
-  color: #2196f3!important; /* blue 500 */
+  color: #2196f3; /* blue 500 */
 }
 
-.verified-color {
+.green {
-  color: #03A9F4!important; /* lt-blue 500 */
+  color: #388e3c; /* green 700 */
-}
-
-.staff-color {
-  color: #689f38!important; /* light green 700 */
-}
-
-.danger-color {
-  color: #FFC107!important; /* amber 500 */
 }
 
 .red {
-  color: #D32F2F!important; /* red 700 */
+  color: #D32F2F; /* red 700 */
 }
 
-/* Color of an inverted icon badges */
+.amber {
-.badge-inv {
+  color: #FFC107; /* amber 500 */
-  color: #fffd!important;
 }
 
 .gray {
-  color: #757575!important;
+  color: #757575;
 }
 
 .light-gray {
-  color: #bbb!important;
+  color: #bbb;
 }
 
 .large {
@@ -431,8 +402,8 @@ div.trusted-badge {
 }
 
 .float-right {
-  position: absolute;
+  margin-left: auto;
-  right: 0.5rem;
+  float: right;
 }
 
 .hr {
@@ -449,12 +420,6 @@ div.trusted-badge {
   height: 0.015rem;
 }
 
-.ellipsized {
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 /* Element which can take focus but shows no outline */
 .group-focus {
   outline: none;
@@ -601,39 +566,30 @@ div.trusted-badge {
 .in-place-edit {
   display: inline-block;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 1.1rem;
-  margin: 0.25rem 0.125rem 0 0.125rem;
+  height: 2.5rem;
+  line-height: 2.25;
+  margin: 0.25rem 0.125rem;
   width: 100%;
   vertical-align: baseline;
   border-bottom: 1px dashed #ddd;
   cursor: pointer;
 }
 
-.in-place-edit.short {
-  font-size: 1.1rem;
-  height: 2.5rem;
-  line-height: 2.25;
-}
-
 .in-place-edit.disabled {
   border-bottom: none;
   cursor: default;
-  color: #888;
 }
 
 .in-place-edit.placeholder {
   color: #bbb;
 }
 
-.in-place-edit span {
+.in-place-edit .content {
-  display: inline-block;
-}
-
-.in-place-edit.short span {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
-  overflow-x: hidden;
+  overflow: hidden
 }
 /* END of InPlaceEdit styles */
 
@@ -653,8 +609,8 @@ table.permission-editor td.checkbox {
 }
 
 .permission-editor .material-icons {
-  font-size: 1.3rem;
+  font-size: 1.1rem;
-  line-height: 1.3rem;
+  line-height: 1.1rem;
 }
 
 .material-icons.clickable {
@@ -858,7 +814,7 @@ i.search {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .flex-column.narrow {
@@ -866,7 +822,6 @@ i.search {
 }
 
 .scrollable-panel {
-  overflow-x: hidden;
   overflow-y: auto;
   margin-top: 0.25rem;
   margin-bottom: auto;
@@ -890,12 +845,6 @@ i.search {
   background: linear-gradient(to right, transparent 3.5rem, #eee 1px, #eee 100%) 0 100% / 100% 1px no-repeat, #fff;
   overflow-x: hidden;
 }
-
-.contact-box.small > li {
-  padding: 0.25rem 0.25rem 0.35rem 0.35rem;
-  min-height: 2.5rem;
-}
-
 .contact-box > li:last-child {
   /* remove border from the last contact */
   background: #fff;
@@ -918,13 +867,12 @@ i.search {
 .contact-box .contact-title {
   font-size: 1.05rem;
   text-overflow: ellipsis;
-  overflow-x: hidden;
+  overflow: hidden
-  white-space: nowrap;
 }
 
 .contact-box .contact-comment {
   text-overflow: ellipsis;
-  overflow-x: hidden;
+  overflow: hidden;
   white-space: nowrap;
   font-weight: lighter;
 }
@@ -954,19 +902,6 @@ i.search {
   height: 3rem;
   border-radius: 50%;
 }
-
-.contact-box.small .avatar-box {
-  width: 2rem;
-  min-width: 2rem;
-  height: 2rem;
-  min-height: 2rem;
-  font-size: 1.2rem;
-}
-.contact-box.small .avatar {
-  width: 2rem;
-  height: 2rem;
-}
-
 .contact-box .avatar-box > .material-icons {
   display: flex;
   flex-direction: column;
@@ -974,20 +909,11 @@ i.search {
   font-size: 2.4rem;
   line-height: 3rem;
 }
-.contact-box.small .avatar-box > .material-icons {
-  font-size: 1.6rem;
-  line-height: 2rem;
-}
 .contact-box .text-box {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
-.contact-box .text-box > div {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
 
 .contact-box .action-text {
   text-align: center;
@@ -997,19 +923,11 @@ i.search {
   cursor: pointer;
 }
 
-img.channel {
+.contact-box img.channel {
   width: 1rem;
   height: 1rem;
   vertical-align: middle;
   margin-left: 0.3rem;
-  margin-bottom: 0.1rem;
-}
-
-.large img.channel {
-  width: 1.35rem;
-  height: 1.35rem;
-  margin-left: 0.5rem;
-  margin-bottom: 0.15rem;
 }
 
 /* Online-offline indicator positioned inside avatar-box */
@@ -1068,14 +986,12 @@ img.channel {
 /* Various forms inside a panel (signup form, new topic form) */
 .panel-form {
   display: flex;
-  position: relative;
   flex-direction: column;
   padding: 0;
 }
 
 .panel-form-row {
   display: flex;
-  position: relative;
   align-items: center;
   padding: 0.5rem 0.75rem;
   line-height: 1.5;
@@ -1085,15 +1001,15 @@ img.channel {
 
 .panel-form-column {
   display: flex;
-  position: relative;
   flex-direction: column;
   flex-grow: 0;
+  flex-shrink: 0;
   padding: 0.5rem 0.75rem;
   line-height: 1.5;
-  overflow-x: hidden;
 }
 
-/* Make sure padding is only applied at the top level panel */
+/* Make sure padding is only applied at
+   the top level panel */
 .panel-form-row > .panel-form-column,
 .panel-form-column > .panel-form-column {
   padding: 0!important;
@@ -1104,19 +1020,15 @@ img.channel {
   padding: 0!important;
 }
 
-.panel-form-column > .group {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 /* Styling of avatar upload control */
 .avatar-upload {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  width: 10rem;
+  width: 7rem;
-  height: 10.5rem;
+  height: 9rem;
+  margin-left: 0.5rem;
   font-size: 4.5rem;
   padding: 0;
 }
@@ -1140,14 +1052,14 @@ img.channel {
 
 .avatar-upload .avatar-box {
   position: relative;
-  width: 10rem;
+  width: 7rem;
-  height: 10rem;
+  height: 7rem;
 }
 
 .avatar-upload .avatar-box > .material-icons {
   position: relative;
   font-size: 4rem;
-  line-height: 10rem;
+  line-height: 7rem;
   vertical-align: middle;
 }
 
@@ -1166,37 +1078,21 @@ img.channel {
   border: 1px dashed #999;
   font-size: 1rem;
   flex-shrink: 0;
-  width: 10rem;
+  width: 7rem;
-  height: 10rem;
+  height: 7rem;
   overflow: hidden;
   color: #999;
-  line-height: 10rem;
+  line-height: 7rem;
   border-radius: 50%;
 }
 
-.avatar-upload img.preview {
+.avatar-upload .preview {
-  width: 10rem;
+  width: 7rem;
-  height: 10rem;
+  height: 7rem;
   overflow: hidden;
   border-radius: 50%;
 }
 
-.avatar-upload img.preview::before {
-  position: absolute;
-  content: " ";
-  display: flex;
-  font-size: 0.9rem;
-  font-weight: lighter;
-  color: #666;
-  top: 0;
-  left: 0;
-  width: 10rem;
-  height: 10rem;
-  justify-content: center;
-  background: center no-repeat url("../img/broken_image.png");
-  border-radius: 50%;
-}
-
 .avatar-upload .inputfile.hidden {
   width: 0.1px;
   height: 0.1px;
@@ -1207,7 +1103,6 @@ img.channel {
 
 .avatar-upload .inputfile + label.round {
   display: flex;
-  position: absolute;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -1216,10 +1111,11 @@ img.channel {
   line-height: 3rem;
   border-radius: 50%;
   box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: -1rem;
   bottom: 0;
-  right: 0;
   background-color: #fafafa;
-  z-index: 1;
 }
 
 .avatar-upload .inputfile:focus + label.round {
@@ -1708,7 +1604,7 @@ img.inline-image::before {
 
 img.image-preview::before {
   content: " ";
-  background-size: 10rem 10rem;
+  background-size: 8rem 8rem;
 }
 
 /* Attachment styles */
@@ -1875,7 +1771,7 @@ ul.tabbar li.active > a {
 }
 
 .badge.green {
-  border-color: #aca;
+  border-color: #9c9;
   background-color: #efe;
   color: #383;
 }
@@ -1887,7 +1783,7 @@ ul.tabbar li.active > a {
 }
 
 .badge.blue {
-  border-color: #aad;
+  border-color: #99c;
   background-color: #eef;
   color: #339;
 }
@@ -1932,204 +1828,105 @@ ul.tabbar li.active > a {
 }
 
 /* Colors of letter tiles */
-.lt-bg-0 {
+.light-color0 {
   background-color: #ef9a9a;
 }
-.lt-bg-1 {
+.light-color1 {
   background-color: #90caf9;
 }
-.lt-bg-2 {
+.light-color2 {
   background-color: #b0bec5;
 }
-.lt-bg-3 {
+.light-color3 {
   background-color: #b39ddb;
 }
-.lt-bg-4 {
+.light-color4 {
   background-color: #ffab91;
 }
-.lt-bg-5 {
+.light-color5 {
   background-color: #a5d6a7;
 }
-.lt-bg-6 {
+.light-color6 {
   background-color: #eeeeee;
 }
-.lt-bg-7 {
+.light-color7 {
   background-color: #e6ee9c;
 }
-.lt-bg-8 {
+.light-color8 {
   background-color: #c5e1a5;
 }
-.lt-bg-9 {
+.light-color9 {
   background-color: #f0e57d;
 }
-.lt-bg-10 {
+.light-color10 {
   background-color: #f48fb1;
 }
-.lt-bg-11 {
+.light-color11 {
   background-color: #9fa8da;
 }
-.lt-bg-12 {
+.light-color12 {
   background-color: #ffe082;
 }
-.lt-bg-13 {
+.light-color13 {
   background-color: #bcaaa4;
 }
-.lt-bg-14 {
+.light-color14 {
   background-color: #80deea;
 }
-.lt-bg-15 {
+.light-color15 {
   background-color: #ce93d8;
 }
 
 /* Darker version of letter tile colors */
-.dk-bg-0 {
+.dark-color0 {
   background-color: #C62828;
 }
-.dk-bg-1 {
+.dark-color1 {
   background-color: #AD1457;
 }
-.dk-bg-2 {
+.dark-color2 {
   background-color: #6A1B9A;
 }
-.dk-bg-3 {
+.dark-color3 {
   background-color: #4527A0;
 }
-.dk-bg-4 {
+.dark-color4 {
   background-color: #283593;
 }
-.dk-bg-5 {
+.dark-color5 {
   background-color: #1565C0;
 }
-.dk-bg-6 {
+.dark-color6 {
   background-color: #0277BD;
 }
-.dk-bg-7 {
+.dark-color7 {
   background-color: #00838F;
 }
-.dk-bg-8 {
+.dark-color8 {
   background-color: #00695C;
 }
-.dk-bg-9 {
+.dark-color9 {
   background-color: #2E7D32;
 }
-.dk-bg-10 {
+.dark-color10 {
   background-color: #558B2F;
 }
-.dk-bg-11 {
+.dark-color11 {
   background-color: #9E9D24;
 }
-.dk-bg-12 {
+.dark-color12 {
   background-color: #F9A825;
 }
-.dk-bg-13 {
+.dark-color13 {
   background-color: #FF8F00;
 }
-.dk-bg-14 {
+.dark-color14 {
   background-color: #EF6C00;
 }
-.dk-bg-15 {
+.dark-color15 {
   background-color: #D84315;
 }
 
-/* Same colors as above but for text as opposite to background */
-.lt-fg-0 {
-  color: #ef9a9a!important;
-}
-.lt-fg-1 {
-  color: #90caf9!important;
-}
-.lt-fg-2 {
-  color: #b0bec5!important;
-}
-.lt-fg-3 {
-  color: #b39ddb!important;
-}
-.lt-fg-4 {
-  color: #ffab91!important;
-}
-.lt-fg-5 {
-  color: #a5d6a7!important;
-}
-.lt-fg-6 {
-  color: #eeeeee!important;
-}
-.lt-fg-7 {
-  color: #e6ee9c!important;
-}
-.lt-fg-8 {
-  color: #c5e1a5!important;
-}
-.lt-fg-9 {
-  color: #f0e57d!important;
-}
-.lt-fg-10 {
-  color: #f48fb1!important;
-}
-.lt-fg-11 {
-  color: #9fa8da!important;
-}
-.lt-fg-12 {
-  color: #ffe082!important;
-}
-.lt-fg-13 {
-  color: #bcaaa4!important;
-}
-.lt-fg-14 {
-  color: #80deea!important;
-}
-.lt-fg-15 {
-  color: #ce93d8!important;
-}
-
-.dk-fg-0 {
-  color: #C62828!important;
-}
-.dk-fg-1 {
-  color: #AD1457!important;
-}
-.dk-fg-2 {
-  color: #6A1B9A!important;
-}
-.dk-fg-3 {
-  color: #4527A0!important;
-}
-.dk-fg-4 {
-  color: #283593!important;
-}
-.dk-fg-5 {
-  color: #1565C0!important;
-}
-.dk-fg-6 {
-  color: #0277BD!important;
-}
-.dk-fg-7 {
-  color: #00838F!important;
-}
-.dk-fg-8 {
-  color: #00695C!important;
-}
-.dk-fg-9 {
-  color: #2E7D32!important;
-}
-.dk-fg-10 {
-  color: #558B2F!important;
-}
-.dk-fg-11 {
-  color: #9E9D24!important;
-}
-.dk-fg-12 {
-  color: #F9A825!important;
-}
-.dk-fg-13 {
-  color: #FF8F00!important;
-}
-.dk-fg-14 {
-  color: #EF6C00!important;
-}
-.dk-fg-15 {
-  color: #D84315!important;
-}
-
 /* Material icons resized from the default 24pt */
 .material-icons {
   font-size: 1.4rem;
@@ -2143,6 +1940,9 @@ ul.tabbar li.active > a {
 .material-icons.big {
   font-size: 2.4rem;
 }
+.material-icons.huge {
+  font-size: 4rem;
+}
 
 #self-avatar .material-icons {
   font-size: 2.4rem;
@@ -2205,15 +2005,6 @@ ul.tabbar li.active > a {
   background-color: #eee;
   white-space: nowrap;
   font-size: 90%;
-  max-width: 12rem;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-.chip > span {
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
 }
 
 .chip.invalid {
@@ -2228,7 +2019,6 @@ ul.tabbar li.active > a {
   border-radius: 50%;
   margin: 0.3rem;
   width: 1.175rem;
-  min-width: 1.175rem;
   height: 1.175rem;
   line-height: 1.15;
   text-decoration: none;
@@ -2264,14 +2054,12 @@ ul.tabbar li.active > a {
 }
 
 .load-spinner-box {
-  --size-small: 2.5rem;
-  --size-large: 4rem;
   position: absolute;
   box-shadow: 0.1rem 0.1rem 0.15rem 1px rgba(0,0,0,0.25);
   border-radius: 50%;
   padding: 0.25rem;
-  width: var(--size-small);
+  width: 2.5rem;
-  height: var(--size-small);
+  height: 2.5rem;
   left: 0;
   right: 0;
   top: 5rem;
@@ -2281,25 +2069,6 @@ ul.tabbar li.active > a {
   z-index: 2;
 }
 
-.load-spinner-box.large {
-  width: var(--size-large);
-  height: var(--size-large);
-}
-
-.load-spinner-box.clear {
-  -x-box-shadow: none;
-  box-shadow: 0.1rem 0.1rem 0.15rem 1px rgba(0,0,0,0.12);
-  background-color: #fff8;
-}
-
-.load-spinner-box.centered {
-  top: calc(var(--size-small)/2 - 0.25rem);
-}
-
-.load-spinner-box.large.centered {
-  top: calc(var(--size-large)/2 - 0.25rem);
-}
-
 .loader-spinner {
   border: 0.35rem solid #f3f3f3;
   border-radius: 50%;
@@ -2309,11 +2078,6 @@ ul.tabbar li.active > a {
   animation: spin 1.5s linear infinite;
 }
 
-.load-spinner-box.large .loader-spinner {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
@@ -2352,77 +2116,3 @@ ul.tabbar li.active > a {
   color: #5f9ea0;
   font-weight: inherit;
 }
-
-/* Image cropping widget */
-
-.cropper {
-  position: relative;
-  width: 18rem;
-  height: 21rem;
-  margin: auto;
-  margin-top: 1rem;
-  align-self: center;
-  transform: translateZ(0);
-  border-radius: 0.25rem;
-}
-
-.cropper .bounding-box {
-  position: relative;
-  width: 18rem;
-  height: 18rem;
-  overflow: hidden;
-  z-index: 1;
-  border-radius: 0.25rem;
-  border: solid 2px #1e88e5;
-  box-shadow: 1px 1px 3px grey;
-  background-color: #999;
-}
-
-.cropper .preview {
-  position: absolute;
-  max-height: none;
-  max-width: none;
-  z-index: -1;
-}
-
-.cropper .cutout {
-  position: absolute;
-  width: 17rem;
-  height: 17rem;
-  border: 1px dashed #999;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  box-shadow: 0 0 150rem 150rem rgb(230 246 255 / 66%);
-  z-index: 0;
-}
-
-.cropper .cutout.circle {
-  border-radius: 50%;
-}
-
-.cropper .overlay {
-  position: absolute;
-  cursor: move;
-  touch-action: none;
-  z-index: 1;
-}
-
-.cropper .zoom-wrapper {
-  height: 2rem;
-  width: 80%;
-  margin: 1rem auto;
-  text-align: center;
-}
-
-.cropper .zoom {
-  box-shadow: none;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.cropper .zoom:focus {
-  outline: none;
-}

src/views/password-reset-view.jsx

@@ -12,7 +12,8 @@ export default class PasswordResetView extends React.PureComponent {
 
     this.state = {
       email: '',
-      password: ''
+      password: '',
+      sent: false
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -21,7 +22,7 @@ export default class PasswordResetView extends React.PureComponent {
   }
 
   componentDidMount() {
-    let parsed = HashNavigation.parseUrlHash(window.location.hash);
+    const parsed = HashNavigation.parseUrlHash(window.location.hash);
     this.setState({token: parsed.params.token, scheme: parsed.params.scheme});
   }
 
@@ -29,8 +30,14 @@ export default class PasswordResetView extends React.PureComponent {
     e.preventDefault();
     if (this.state.token) {
       this.props.onReset(this.state.scheme, this.state.password.trim(), this.state.token);
+    } else if (this.state.sent) {
+      this.props.onCancel();
     } else {
-      this.props.onRequest('email', this.state.email.trim());
+      const email = this.state.email.trim();
+      this.setState({email: email});
+      this.props.onRequest('email', email).then(() => {
+        this.setState({sent: true});
+      });
     }
   }
 
@@ -43,10 +50,9 @@ export default class PasswordResetView extends React.PureComponent {
   }
 
   render() {
-    let reset = (this.state.token && this.state.scheme);
     return (
       <form id="password-reset-form" onSubmit={this.handleSubmit}>
-        {reset ?
+        {(this.state.token && this.state.scheme) ?
           <FormattedMessage id="new_password_placeholder" defaultMessage="Enter new password"
             description="Placeholder for entering new password">{
             (placeholder) => <VisiblePassword
@@ -56,6 +62,16 @@ export default class PasswordResetView extends React.PureComponent {
               required={true} autoFocus={true}
               onChange={this.handlePasswordChange} />
           }</FormattedMessage>
+        : this.state.sent ?
+          <>
+            <br/>
+            <center><i className="material-icons huge green">task_alt</i></center>
+            <br/>
+            <center><FormattedMessage id="password_reset_email_sent"
+              defaultMessage="An email has been sent to {email}. Follow the directions in the email to reset your password."
+              values={{ email: <tt>{this.state.email}</tt> }}
+              description="Notification that the email with password reset instructions has been sent" /></center>
+          </>
         :
           <>
             <label htmlFor="inputEmail">
@@ -75,8 +91,13 @@ export default class PasswordResetView extends React.PureComponent {
           </>
         }
         <div className="dialog-buttons">
-          <button className="primary" type="submit">{reset ?
+          <button className="primary" type="submit">{
-            <FormattedMessage id="button_reset" defaultMessage="Reset" description="Button [Reset]" /> :
+            (this.state.token && this.state.scheme) ?
+            <FormattedMessage id="button_reset" defaultMessage="Reset" description="Button [Reset]" />
+            : this.state.sent ?
+            <FormattedMessage id="button_ok" defaultMessage="OK"
+              description="Button [OK]" />
+            :
             <FormattedMessage id="button_send_request" defaultMessage="Send request"
               description="Button [Send request]" />
           }</button>

src/views/tinode-web.jsx

@@ -1512,7 +1512,7 @@ class TinodeWeb extends React.Component {
 
   handlePasswordResetRequest(method, value) {
     // If already connected, connnect() will return a resolved promise.
-    this.tinode.connect()
+    return this.tinode.connect()
       .then(() => {
         return this.tinode.requestResetAuthSecret('basic', method, value);
       })