Skip to content

Commit

Permalink
login styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@truell20
truell20 committed Mar 30, 2023
1 parent bfd7f8d commit 70d706b
Show file tree
Hide file tree
Showing 3 changed files with 217 additions and 44 deletions.
96 changes: 53 additions & 43 deletions src/components/errors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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 (
<Modal
isOpen={showError}
Expand Down Expand Up @@ -62,10 +66,10 @@ export function ErrorPopup() {
</div>
</Modal>
)
} else if (error instanceof NotLoggedInError) {
} else if (true || error instanceof NotLoggedInError) {
return (
<Modal
isOpen={showError}
isOpen={true || showError}
onRequestClose={() => {
dispatch(closeError())
}}
Expand All @@ -74,7 +78,6 @@ export function ErrorPopup() {
<div className="errorPopup">
<div className="errorPopup__title">
<div className="errorPopup__title_text">
{error.title}
</div>
<div
className="errorPopup__title_close"
Expand All @@ -83,46 +86,53 @@ export function ErrorPopup() {
<FontAwesomeIcon icon={faClose} />
</div>
</div>
<div className="errorPopup__body">
{error.message}
<br />
Try logging in here:
<CursorLogin showSettings={false}/>
<br/>
Or try using an OpenAI key:
<OpenAIPanel />
</div>
</div>
</Modal>
)
} else {
return (
<Modal
isOpen={showError}
onRequestClose={() => {
dispatch(closeError())
}}
style={customStyles}
>
<div className="errorPopup">
<div className="errorPopup__title">
<div className="errorPopup__title_text">
{error.title}
</div>
<div
className="errorPopup__title_close"
onClick={() => dispatch(closeError())}
>
<FontAwesomeIcon icon={faClose} />
<div className="signup__body">
<div className="signup__title">Cursor</div>
<div className="signup__module">
<div className="signup__subtitle">To avoid abuse on our backend, we ask that you login in to use the AI features</div>
<div className="signup__signup_button">Log in</div>
<div className="signup__signup_button">Sign up</div>
</div>
<div className="signup__module signup__last_module">
<div className="signup__subtitle">Or enter your OpenAI API key</div>
<OpenAILoginPanel onSubmit={
() => {
dispatch(closeError())
}
} />
</div>
</div>
</div>
<div className="errorPopup__body">
{error.message}
<br />
</div>
</div>
</Modal>
)
} else {
// return (
// <Modal
// isOpen={showError}
// onRequestClose={() => {
// dispatch(closeError())
// }}
// style={customStyles}
// >
// <div className="errorPopup">
// <div className="errorPopup__title">
// <div className="errorPopup__title_text">
// {error.title}
// </div>
// <div
// className="errorPopup__title_close"
// onClick={() => dispatch(closeError())}
// >
// <FontAwesomeIcon icon={faClose} />
// </div>
// </div>
// <div className="errorPopup__body">
// {error.message}
// <br />
// </div>
// </div>
// </Modal>
// )
}


Expand Down
111 changes: 111 additions & 0 deletions src/components/settingsPane.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string[]>([])
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 (
<div className="settings__item">

<div className="flex">
<input
className={`settings__item_textarea
${keyError ? 'input-error' : ''}`}
placeholder="Enter your OpenAI API Key"
onChange={(e) => {
setLocalAPIKey(e.target.value)
}}
value={localAPIKey || ""}
spellCheck="false"
/>
<button className='settings__button'
onClick={() => {
handleNewAPIKey()
}}
>
Submit
</button>
</div>
{keyError && (
<div className="error-message">
Invalid API Key. Please try again.
</div>
)}
{settings.openAIKey &&
<>
<div className="flex items-center">
<Switch
checked={settings.useOpenAIKey}
onChange={(value) => 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`}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={`${settings.useOpenAIKey ? 'translate-x-9' : 'translate-x-0'}
pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
/>
</Switch>
{settings.useOpenAIKey ? (

<span className="ml-2">Enabled</span>
) : (
<span className="ml-2">Disabled</span>
)}
</div>
{settings.useOpenAIKey &&
<Dropdown
options={models}
onChange={(e) => {
dispatch(
changeSettings({
openAIModel: e.value,
})
)
}}
value={settings.openAIModel}
/>
}
</>
}
</div>
)
}


export function OpenAIPanel() {
const settings = useAppSelector(ssel.getSettings)
const [localAPIKey, setLocalAPIKey] = useState('')
Expand Down
54 changes: 53 additions & 1 deletion src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; */
}

Expand Down Expand Up @@ -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;
}

0 comments on commit 70d706b

Please sign in to comment.