Various improvements extracted from oauth-server branch

app/components/Authenticated.tsx

@@ -5,7 +5,6 @@ import { Redirect } from "react-router-dom";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
-import { logoutPath } from "~/utils/routeHelpers";
 import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
@@ -33,7 +32,7 @@ const Authenticated = ({ children }: Props) => {
   }
 
   void auth.logout(true);
-  return <Redirect to={logoutPath()} />;
+  return <Redirect to="/" />;
 };
 
 export default observer(Authenticated);

app/components/Input.tsx

@@ -45,6 +45,10 @@ export const NativeInput = styled.input<{
   ${ellipsis()}
   ${undraggableOnDesktop()}
 
+  &[readOnly] {
+    color: ${s("textSecondary")};
+  }
+
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
@@ -126,13 +130,14 @@ export interface Props
     React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
     "prefix"
   > {
-  type?: "text" | "email" | "checkbox" | "search" | "textarea";
+  type?: "text" | "email" | "checkbox" | "search" | "textarea" | "password";
   labelHidden?: boolean;
   label?: string;
   flex?: boolean;
   short?: boolean;
   margin?: string | number;
   error?: string;
+  rows?: number;
   /** Optional component that appears inside the input before the textarea and any icon */
   prefix?: React.ReactNode;
   /** Optional icon that appears inside the input before the textarea */

app/components/Labeled.tsx

@@ -1,26 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import Flex from "~/components/Flex";
-
-type Props = {
-  children?: React.ReactNode;
-  label: React.ReactNode | string;
-};
-
-const Labeled: React.FC<Props> = ({ label, children, ...props }: Props) => (
-  <Flex column {...props}>
-    <Label>{label}</Label>
-    {children}
-  </Flex>
-);
-
-export const Label = styled(Flex)`
-  font-weight: 500;
-  padding-bottom: 4px;
-  display: inline-block;
-  color: ${s("text")};
-`;
-
-export default observer(Labeled);

app/scenes/Settings/components/ImageUpload.tsx

@@ -9,7 +9,7 @@ import { s } from "@shared/styles";
 import { AttachmentPreset } from "@shared/types";
 import { AttachmentValidation } from "@shared/validations";
 import RootStore from "~/stores/RootStore";
-import Button from "~/components/Button";
+import ButtonLarge from "~/components/ButtonLarge";
 import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import Modal from "~/components/Modal";
@@ -95,8 +95,14 @@ class ImageUpload extends React.Component<RootStore & Props> {
 
   renderCropping() {
     const { ui, submitText } = this.props;
+
     return (
-      <Modal isOpen onRequestClose={this.handleClose} title="">
+      <Modal
+        onRequestClose={this.handleClose}
+        fullscreen={false}
+        title={<>&nbsp;</>}
+        isOpen
+      >
         <Flex auto column align="center" justify="center">
           {this.isUploading && <LoadingIndicator />}
           <AvatarEditorContainer>
@@ -122,9 +128,14 @@ class ImageUpload extends React.Component<RootStore & Props> {
             defaultValue="1"
             onChange={this.handleZoom}
           />
-          <CropButton onClick={this.handleCrop} disabled={this.isUploading}>
+          <br />
+          <ButtonLarge
+            fullwidth
+            onClick={this.handleCrop}
+            disabled={this.isUploading}
+          >
             {this.isUploading ? "Uploading…" : submitText}
-          </CropButton>
+          </ButtonLarge>
         </Flex>
       </Modal>
     );
@@ -180,8 +191,4 @@ const RangeInput = styled.input`
   }
 `;
 
-const CropButton = styled(Button)`
-  width: 300px;
-`;
-
 export default withStores(ImageUpload);

app/stores/AuthStore.ts

@@ -306,7 +306,7 @@ export default class AuthStore extends Store<Team> {
     // if this logout was forced from an authenticated route then
     // save the current path so we can go back there once signed in
     if (savePath) {
-      setPostLoginPath(window.location.pathname);
+      setPostLoginPath(window.location.pathname + window.location.search);
     }
 
     if (tryRevokingToken) {

app/utils/urls.ts

@@ -49,8 +49,10 @@ export function redirectTo(url: string) {
 /**
  * Check if the path is a valid path for redirect after login.
  *
- * @param path
+ * @param input A path potentially including query string
  * @returns boolean indicating if the path is a valid redirect
  */
-export const isAllowedLoginRedirect = (path: string) =>
-  !["/", "/create", "/home", "/logout", "/auth/"].includes(path);
+export const isAllowedLoginRedirect = (input: string) => {
+  const path = input.split("?")[0];
+  return !["/", "/create", "/home", "/logout", "/auth/"].includes(path);
+};

server/commands/userProvisioner.test.ts

@@ -192,7 +192,7 @@ describe("userProvisioner", () => {
 
   it("should prefer isAdmin argument over defaultUserRole", async () => {
     const team = await buildTeam({
-      defaultUserRole: "viewer",
+      defaultUserRole: UserRole.Viewer,
     });
     const authenticationProviders = await team.$get("authenticationProviders");
     const authenticationProvider = authenticationProviders[0];