From 70d706ba18101b38ecc59f83558e30ba38d7d000 Mon Sep 17 00:00:00 2001 From: Michael Truell Date: Wed, 29 Mar 2023 18:33:13 -0700 Subject: [PATCH] login styling --- src/components/errors.tsx | 96 ++++++++++++++------------- src/components/settingsPane.tsx | 111 ++++++++++++++++++++++++++++++++ src/index.css | 54 +++++++++++++++- 3 files changed, 217 insertions(+), 44 deletions(-) diff --git a/src/components/errors.tsx b/src/components/errors.tsx index 2b6e8ff..9b8ac20 100644 --- a/src/components/errors.tsx +++ b/src/components/errors.tsx @@ -5,7 +5,7 @@ import { faClose } from '@fortawesome/pro-regular-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import Modal from 'react-modal' import { NoAuthRateLimitError, NotLoggedInError, OpenAIError } from '../utils'; -import { CursorLogin, OpenAIPanel } from './settingsPane'; +import { CursorLogin, OpenAILoginPanel } from './settingsPane'; const customStyles = { overlay: { @@ -24,16 +24,20 @@ const customStyles = { height: 'auto', marginLeft: 'auto', marginRight: 'auto', - maxWidth: '700px', + maxWidth: '450px', }, } + + export function ErrorPopup() { const showError = useAppSelector(getShowErrors) - const error = useAppSelector(getError) + const error = new NotLoggedInError() const dispatch = useAppDispatch() - if (error == null) { + console.log('waht') + + if (false && error == null) { return ( ) - } else if (error instanceof NotLoggedInError) { + } else if (true || error instanceof NotLoggedInError) { return ( { dispatch(closeError()) }} @@ -74,7 +78,6 @@ export function ErrorPopup() {
- {error.title}
-
- {error.message} -
- Try logging in here: - -
- Or try using an OpenAI key: - -
-
- - ) - } else { - return ( - { - dispatch(closeError()) - }} - style={customStyles} - > -
-
-
- {error.title} -
-
dispatch(closeError())} - > - +
+
Cursor
+
+
To avoid abuse on our backend, we ask that you login in to use the AI features
+
Log in
+
Sign up
+
+
+
Or enter your OpenAI API key
+ { + dispatch(closeError()) + } + } /> +
-
-
- {error.message} -
-
) + } else { + // return ( + // { + // dispatch(closeError()) + // }} + // style={customStyles} + // > + //
+ //
+ //
+ // {error.title} + //
+ //
dispatch(closeError())} + // > + // + //
+ //
+ //
+ // {error.message} + //
+ //
+ //
+ // + // ) } diff --git a/src/components/settingsPane.tsx b/src/components/settingsPane.tsx index 62c8869..4d8c391 100644 --- a/src/components/settingsPane.tsx +++ b/src/components/settingsPane.tsx @@ -181,6 +181,117 @@ export function SettingsPopup() { ) } +export function OpenAILoginPanel({onSubmit}: {onSubmit: () => void}) { + const settings = useAppSelector(ssel.getSettings) + const [localAPIKey, setLocalAPIKey] = useState('') + const [models, setAvailableModels] = useState([]) + const [keyError, showKeyError] = useState(false) + const dispatch = useAppDispatch() + + // When the global openai key changes, we change this one + useEffect(() => { + if (settings.openAIKey && settings.openAIKey != localAPIKey) { + setLocalAPIKey(settings.openAIKey) + ssel.getModels(settings.openAIKey).then(({models, isValidKey}) => { + if (models) { + setAvailableModels(models) + } + }) + } + }, [settings.openAIKey]) + + useEffect(() => { + showKeyError(false) + }, [localAPIKey]); + + const handleNewAPIKey = useCallback(async () => { + const {models, isValidKey} = await ssel.getModels(localAPIKey) + console.log({models, isValidKey}) + if (!isValidKey) { + // Error, and we let them know + showKeyError(true) + setAvailableModels([]) + } else { + setAvailableModels(models) + dispatch( + changeSettings({ + openAIKey: localAPIKey, + }) + ) + onSubmit() + } + }, [localAPIKey]) + + return ( +
+ +
+ { + setLocalAPIKey(e.target.value) + }} + value={localAPIKey || ""} + spellCheck="false" + /> + +
+ {keyError && ( +
+ Invalid API Key. Please try again. +
+ )} + {settings.openAIKey && + <> +
+ dispatch(changeSettings({useOpenAIKey: value}))} + className={`${settings.useOpenAIKey ? 'bg-green-500' : 'bg-red-500'} + mt-2 relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`} + > + Use setting + + {settings.useOpenAIKey ? ( + + Enabled + ) : ( + Disabled + )} +
+ {settings.useOpenAIKey && + { + dispatch( + changeSettings({ + openAIModel: e.value, + }) + ) + }} + value={settings.openAIModel} + /> + } + + } +
+ ) +} + + export function OpenAIPanel() { const settings = useAppSelector(ssel.getSettings) const [localAPIKey, setLocalAPIKey] = useState('') diff --git a/src/index.css b/src/index.css index bfadff8..b4015e9 100644 --- a/src/index.css +++ b/src/index.css @@ -1673,7 +1673,7 @@ cm-diff-cancel > div { } .input-error { - border: 1px solid red !important; + border: 1px solid rgba(255, 0, 0, 0.5) !important; /* background-color: #ffe6e6; */ } @@ -2505,3 +2505,55 @@ free servers .disabled_command .shortcut__block { box-sizing: border-box; border-radius: 2px; } + +.signup__body { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + font-size: 18px; + width: 100%; + margin: 8px 0; +} + +.signup__title { + font-size: 24px; + margin-bottom: 24px; + font-weight: 600; + color: #ddd; +} + +.signup__subtitle { + color: #999; + font-size: 14px; + margin-bottom: 12px; +} + +.signup__signup_button { + padding: 8px 16px; + width: 100%; + background-color: var(--vscode-blue); + border-radius: 5px; + margin: 8px 0px; + cursor: pointer; +} + +.signup__signup_button:hover { + opacity: 0.8; + cursor: pointer; +} + +.signup__module { + margin-bottom: 24px; + width: 100%; +} + +.signup__last_module { + margin-bottom: 0px; +} + +.error-message { + margin-top: 8px; + color: rgb(251 142 142 / 90%); + font-weight: 600; +} \ No newline at end of file