Skip to content

Commit

Permalink
feat: add api key validity checker call
Browse files Browse the repository at this point in the history
  • Loading branch information
abhijithvijayan committed Jul 8, 2020
1 parent c9eb733 commit 0150068
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 58 deletions.
5 changes: 5 additions & 0 deletions source/Background/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ export enum StoreLinks {
firefox = 'https://addons.mozilla.org/en-US/firefox/addon/kutt/reviews/',
}

export type ErrorStateProperties = {
error: boolean | null;
message: string;
};

type ShortenUrlBodyProperties = {
target: string;
password?: string;
Expand Down
110 changes: 90 additions & 20 deletions source/Options/Form.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import {useFormState} from 'react-use-form-state';
import React, {useState, useEffect} from 'react';
import tw, {css} from 'twin.macro';
import tw, {styled} from 'twin.macro';

import {useExtensionSettings} from '../contexts/extension-settings-context';
import {updateExtensionSettings} from '../util/settings';
import {CHECK_API_KEY} from '../Background/constants';
import messageUtil from '../util/mesageUtil';
import {isValidUrl} from '../util/tabs';
import {Kutt} from '../Background';
import {
SuccessfulApiKeyCheckProperties,
GetUserSettingsBodyProperties,
ApiErroredProperties,
ErrorStateProperties,
Kutt,
} from '../Background';

import Icon from '../components/Icon';

Expand All @@ -16,6 +24,23 @@ type OptionsFormValuesProperties = {
host: string;
};

const StyledValidateButton = styled.button`
${tw`focus:outline-none hover:text-gray-200 inline-flex items-center px-3 py-1 mt-3 mb-1 text-xs font-semibold text-center text-white duration-300 ease-in-out rounded shadow-lg`}
background: linear-gradient(to right,rgb(126, 87, 194),rgb(98, 0, 234));
.validate__icon {
${tw`inline-flex px-0 bg-transparent`}
svg {
${tw`transition-transform duration-300 ease-in-out`}
stroke: currentColor;
stroke-width: 2.5;
}
}
`;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const onSave = (values: OptionsFormValuesProperties): Promise<any> => {
// should always return a Promise
Expand All @@ -24,7 +49,12 @@ const onSave = (values: OptionsFormValuesProperties): Promise<any> => {

const Form: React.FC = () => {
const extensionSettingsState = useExtensionSettings()[0];
const [submitting, setSubmitting] = useState<boolean>(false);
const [showApiKey, setShowApiKey] = useState<boolean>(false);
const [errored, setErrored] = useState<ErrorStateProperties>({
error: null,
message: '',
});
const [
formState,
{
Expand Down Expand Up @@ -102,6 +132,48 @@ const Form: React.FC = () => {
}
}

async function handleApiKeyVerification(): Promise<void> {
setSubmitting(true);
// request API validation request
const apiKeyValidationBody: GetUserSettingsBodyProperties = {
apikey: formStateValues.apikey.trim(),
hostUrl:
(formStateValues.advanced &&
formStateValues.host.trim().length > 0 &&
formStateValues.host.trim()) ||
Kutt.hostUrl,
};
const response:
| SuccessfulApiKeyCheckProperties
| ApiErroredProperties = await messageUtil.send(
CHECK_API_KEY,
apiKeyValidationBody
);

if (!response.error) {
// set top-level status
setErrored({error: false, message: 'Valid API Key'});

// Store user account information
const {domains, email} = response.data;
await updateExtensionSettings({user: {domains, email}});
} else {
// ---- errored ---- //
setErrored({error: true, message: response.message});

// Delete `user` field from settings
await updateExtensionSettings({user: null});
}

// enable validate button
setSubmitting(false);

setTimeout(() => {
// Reset status
setErrored({error: null, message: ''});
}, 1000);
}

return (
<>
<div tw="mt-4">
Expand Down Expand Up @@ -159,26 +231,24 @@ const Form: React.FC = () => {
</div>

<div>
<button
<StyledValidateButton
type="submit"
disabled={!true}
onClick={(): void => {
//
}}
css={[
tw`hover:bg-blue-700 focus:outline-none block px-4 py-2 mt-3 mb-1 text-xs font-semibold text-center text-white bg-purple-700 rounded shadow-lg`,

css`
background: linear-gradient(
to right,
rgb(126, 87, 194),
rgb(98, 0, 234)
);
`,
]}
disabled={submitting}
onClick={handleApiKeyVerification}
>
Validate
</button>
<span tw="ml-2">Validate</span>

<Icon
name={
submitting
? 'spinner'
: (errored.error !== null &&
((!errored.error && 'tick') || 'cross')) ||
'zap'
}
className="icon validate__icon"
/>
</StyledValidateButton>
</div>

<div tw="flex flex-col mt-6">
Expand Down
20 changes: 8 additions & 12 deletions source/Popup/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,26 @@ import tw, {styled} from 'twin.macro';
import {updateExtensionSettings} from '../util/settings';
import {CHECK_API_KEY} from '../Background/constants';
import {
useExtensionSettings,
ExtensionSettingsActionTypes,
useExtensionSettings,
} from '../contexts/extension-settings-context';
import {openExtOptionsPage} from '../util/tabs';
import messageUtil from '../util/mesageUtil';
import {
SuccessfulApiKeyCheckProperties,
ApiErroredProperties,
GetUserSettingsBodyProperties,
ApiErroredProperties,
ErrorStateProperties,
} from '../Background';

import Icon from '../components/Icon';

type ErrorProperties = {
error: boolean | null;
message: string;
};

const StyledIconsHolder = styled.div`
${tw`flex`}
.icon {
${tw`hover:opacity-75 bg-transparent shadow-none`}
height: 34px;
width: 34px;
}
Expand All @@ -52,7 +49,7 @@ const Header: React.FC = () => {
extensionSettingsDispatch,
] = useExtensionSettings();
const [loading, setLoading] = useState<boolean>(false);
const [errored, setErrored] = useState<ErrorProperties>({
const [errored, setErrored] = useState<ErrorStateProperties>({
error: null,
message: '',
});
Expand Down Expand Up @@ -121,12 +118,11 @@ const Header: React.FC = () => {
className="icon refresh__icon"
title="Refresh"
name={
// eslint-disable-next-line no-nested-ternary
loading
? 'spinner'
: errored && errored.error !== null
? (errored && !errored.error && 'tick') || 'cross'
: 'refresh'
: (errored.error !== null &&
((!errored.error && 'tick') || 'cross')) ||
'refresh'
}
onClick={fetchUserDomains}
/>
Expand Down
21 changes: 0 additions & 21 deletions source/components/Icon/ArrowLeft.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions source/components/Icon/Cross.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ const Cross: React.FC = () => {
width="48"
height="48"
fill="none"
stroke="#000"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M18 6L6 18" />
Expand Down
2 changes: 0 additions & 2 deletions source/components/Icon/Icon.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';

import StarYellow from './StarYellow';
import ArrowLeft from './ArrowLeft';
import EyeClosed from './EyeClosed';
import StarWhite from './StarWhite';
import Settings from './Settings';
Expand All @@ -15,7 +14,6 @@ import Zap from './Zap';
import Eye from './Eye';

const icons = {
arrowleft: ArrowLeft,
copy: Copy,
cross: Cross,
eye: Eye,
Expand Down
2 changes: 1 addition & 1 deletion source/components/Icon/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Settings: React.FC = () => {
viewBox="-2 -2 24 24"
width={24}
height={24}
fill="#b8b8b8"
fill="currentColor"
preserveAspectRatio="xMinYMin"
className="cog_svg__jam cog_svg__jam-cog"
>
Expand Down

0 comments on commit 0150068

Please sign in to comment.