WG309 Add switch for password visibility - updated

weaveworks · Feb 21, 2022 · 8eb9919 · 8eb9919
1 parent 4315c22
commit 8eb9919
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 32 deletions.
diff --git a/ui/contexts/AuthContext.tsx b/ui/contexts/AuthContext.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
-import { useHistory } from "react-router-dom";
+import { useHistory, Redirect } from "react-router-dom";
 import Layout from "../components/Layout";
 import LoadingPage from "../components/LoadingPage";
-import { Redirect } from "react-router-dom";
 
 const USER_INFO = "/oauth2/userinfo";
 const SIGN_IN = "/oauth2/sign_in";
@@ -42,11 +41,10 @@ export type AuthContext = {
 export const Auth = React.createContext<AuthContext | null>(null);
 
 export default function AuthContextProvider({ children }) {
-  const [userInfo, setUserInfo] =
-    React.useState<{
-      email: string;
-      groups: string[];
-    }>(null);
+  const [userInfo, setUserInfo] = React.useState<{
+    email: string;
+    groups: string[];
+  }>(null);
   const [loading, setLoading] = React.useState<boolean>(true);
   const [error, setError] = React.useState(null);
   const history = useHistory();

diff --git a/ui/pages/SignIn.tsx b/ui/pages/SignIn.tsx
@@ -1,13 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
-import {
-  TextField,
-  Divider,
-  InputLabel,
-  Input,
-  InputAdornment,
-  IconButton,
-} from "@material-ui/core";
+import { Divider, Input, InputAdornment, IconButton } from "@material-ui/core";
+import { Visibility, VisibilityOff } from "@material-ui/icons";
 import Alert from "../components/Alert";
 import Button from "../components/Button";
 import Flex from "../components/Flex";
@@ -20,7 +14,6 @@ import SignInWheel from "./../images/SignInWheel.svg";
 import SignInBackground from "./../images/SignInBackground.svg";
 // @ts-ignore
 import WeaveLogo from "./../images/WeaveLogo.svg";
-import { Visibility, VisibilityOff } from "@material-ui/icons";
 
 export const SignInPageWrapper = styled(Flex)`
   background: url(${SignInBackground});
@@ -33,15 +26,16 @@ export const FormWrapper = styled(Flex)`
   width: 500px;
   padding-top: ${(props) => props.theme.spacing.medium};
   align-content: space-between;
-  border-radius: ${(props) => props.theme.borderRadius.soft};
   .MuiButton-label {
-    width: 300px;
-    // margin: ${(props) => props.theme.spacing.xs};
+    width: 250px;
+  }
+  .MuiInputBase-root {
+    width: 275px;
   }
 `;
 
 const Logo = styled(Flex)`
-  margin-bottom: ${(props) => props.theme.spacing.small};
+  margin-bottom: ${(props) => props.theme.spacing.medium};
 `;
 
 const Action = styled(Flex)`
@@ -54,13 +48,6 @@ const Footer = styled(Flex)`
   }
 `;
 
-const FormElement = styled(Flex)`
-  .MuiFormControl-root {
-    // min-width: 300px;
-    // height: ${(props) => props.theme.spacing.xl};
-  }
-`;
-
 const AlertWrapper = styled(Alert)`
   .MuiAlert-root {
     width: 470px;
@@ -120,10 +107,7 @@ function SignIn() {
               handleUserPassSubmit();
             }}
           >
-            <FormElement center align>
-              {/* <InputLabel htmlFor="standard-adornment-password">
-                Password
-              </InputLabel> */}
+            <Flex center align>
               <Input
                 onChange={(e) => setPassword(e.currentTarget.value)}
                 required
@@ -142,7 +126,7 @@ function SignIn() {
                   </InputAdornment>
                 }
               />
-            </FormElement>
+            </Flex>
             <Flex center>
               {!loading ? (
                 <Button