react-icons/fi#FiLock JavaScript Examples

export function SmallInstanceItem({data, onClick}) {
  const [hoverRef, isHovered] = useHover();
  const {name, isEncrypted, label} = data;
  const LockComponent = isEncrypted ? FiLock : FiUnlock;

  const styles = {
    container: {
      backgroundColor: isHovered ? primary45 : '#FFF',
      color: isHovered ? '#FFF' : primary45,
      padding: '6px 6px',
      display: 'flex',
      alignItems: 'center',
      minWidth: name.length * 9,
      zIndex: 200,
    },
    icon: {
      marginRight: 4,
    },
  };
  return (
    <div
      className={'smallInstanceItem'}
      style={styles.container}
      ref={hoverRef}
      onClick={onClick}>
      <FiHardDrive color={isHovered ? '#FFF' : primary45} size={16} style={styles.icon} />
      <LockComponent
        color={isHovered ? '#FFF' : primary45}
        size={14}
        style={styles.icon}
      />

      {label || name}
    </div>
  );
}

Signin = () => {
  const [form, setForm] = useState({});

  const {
    activateIsHost,
    activateAvatar,
    activateUserId,
    activateProfileId,
    activateFirstname,
    activateLastname,
  } = useContext(Context);

  const handleOnSubmit = async (event) => {
    event.preventDefault();
    const { username, password } = form;

    try {
      const { data } = await axios({
        url: 'https://peaceful-bastion-02967.herokuapp.com/api/auth/sign-in',
        method: 'post',
        auth: {
          username,
          password,
        },
      });
      const { profile, userId } = data.data;

      activateIsHost(profile.isHost);
      activateAvatar(profile.avatar);
      activateProfileId(profile._id);
      activateFirstname(profile.firstname);
      activateLastname(profile.lastname);
      activateUserId(userId);

    } catch (error) {
      if (error.message === 'Request failed with status code 401') {
        alert('Invalid credentials');
      } else {
        alert(error);
      };
    }
  };

  const handleTextInput = (event) => {
    const { target } = event;

    setForm({
      ...form,
      [target.name]: target.value,
    });
  };

  return (
    <Layout title='Sign in' description='Sign in'>
      <Wrapper>
        <Form onSubmit={handleOnSubmit} title='Welcome Back!'>
          <Description text='Please login to your account.' />
          <TitleInput text='User'>
            <AiOutlineUser />
          </TitleInput>
          <Input name='username' onChange={handleTextInput} type='email' placeholder='Email' required />
          <TitleInput text='Password'>
            <FiLock />
          </TitleInput>
          <Input name='password' onChange={handleTextInput} type='password' placeholder='Password' required />
          <p>
            First time here?
            <Link to='/signup'> Sign up for an account</Link>
          </p>
          <FormButton text='Sign in!' />
        </Form>
      </Wrapper>
    </Layout>
  );
}

Signup = () => {
  const { activateUserId } = useContext(Context);
  const [form, setForm] = useState({});

  const handleOnSubmit = async (event) => {
    event.preventDefault();
    const { username, password } = form;

    try {
      const { data } = await axios.post('https://peaceful-bastion-02967.herokuapp.com/api/auth/sign-up', {
        username,
        password,
      });

      const userId = data.data;
      window.location.href = '/create/profile';
      activateUserId(userId);
    } catch (error) {
      console.log(error);
    }
  };

  const handleTextInput = (event) => {
    const { target } = event;

    setForm({
      ...form,
      [target.name]: target.value,
    });
  };

  return (
    <Layout title='Sign up!' description='Sign up'>
      <Wrapper>
        <Form onSubmit={handleOnSubmit} title='Create an account'>
          <Description text='Create an account to access.' />
          <TitleInput text=' Email'>
            <AiOutlineMail />
          </TitleInput>
          <Input name='username' onChange={handleTextInput} type='email' placeholder='Email' required />
          <TitleInput text=' Password'>
            <FiLock />
          </TitleInput>
          <Input name='password' onChange={handleTextInput} type='password' placeholder='Password' required />
          <p>
            Not your first time here?
            <Link to='/signin'> Signin</Link>
          </p>
          <FormButton text='Signup!' />
        </Form>
      </Wrapper>
    </Layout>
  );
}

export function InstanceSelector({}) {
  const main = useSelector((state) => state.main);
  const dispatch = useDispatch();
  const {instances, instanceIndex} = main;
  const currentInstance = instances[instanceIndex];
  const [menuEnabled, setMenuEnabled] = useState(false);

  const filteredInstances = instances.filter(
    (instance) => instance !== currentInstance,
  );

  const styles = {
    container: {
      display: instances.length > 1 ? 'flex' : 'none',
      alignItems: 'center',
      position: 'relative',
      marginRight: 6,
      border: `1px solid ${lightBorder}`,
      borderBottomWidth: menuEnabled ? 0 : 1,
      color: primary45,
      padding: '3px 6px',
      borderRadius: `4px 4px ${menuEnabled ? 0 : 4}px ${menuEnabled ? 0 : 4}px`,
      fontSize: 14,
      fontWeight: 400,
    },
    menu: {
      backgroundColor: '#FFF',
      position: 'absolute',
      minWidth: 196,
      top: 25,
      left: -1,
      border: `1px solid ${lightBorder}`,
      color: primary45,
      zIndex: 2,
    },
    icon: {
      marginRight: 4,
    },
  };

  const LockComponent = currentInstance?.isEncrypted ? FiLock : FiUnlock;

  return (
    <span
      style={styles.container}
      onClick={() => {
        if (filteredInstances.length) {
          setMenuEnabled(!menuEnabled);
        }
      }}>
      <FiHardDrive color={primary45} size={16} style={styles.icon} />
      <LockComponent color={primary45} size={14} style={styles.icon} />

      <span id={'currentInstanceSelector'}>{currentInstance?.label || currentInstance?.name}</span>
      {menuEnabled ? (
        <div style={styles.menu}>
          {filteredInstances.map((instance, index) => (
            <SmallInstanceItem
              key={index}
              data={instance}
              onClick={() => {
                const instanceIndexToUse = instances.findIndex(
                  (inst) => inst === instance,
                );
                dispatch(setInstanceIndex(instanceIndexToUse));
              }}
            />
          ))}
        </div>
      ) : null}
    </span>
  );
}