Finish shape of copilot auth UI
This commit is contained in:
Mikayla Maki
parent
6ff09865eb
commit
0ef9cefe0f
5 changed files with 353 additions and 110 deletions
|
|
@ -51,10 +51,10 @@ enum CopilotServer {
|
|||
#[derive(Clone, Debug)]
|
||||
enum SignInStatus {
|
||||
Authorized {
|
||||
user: String,
|
||||
_user: String,
|
||||
},
|
||||
Unauthorized {
|
||||
user: String,
|
||||
_user: String,
|
||||
},
|
||||
SigningIn {
|
||||
prompt: Option<request::PromptUserDeviceFlow>,
|
||||
|
|
@ -321,10 +321,10 @@ impl Copilot {
|
|||
if let CopilotServer::Started { status, .. } = &mut self.server {
|
||||
*status = match lsp_status {
|
||||
request::SignInStatus::Ok { user } | request::SignInStatus::MaybeOk { user } => {
|
||||
SignInStatus::Authorized { user }
|
||||
SignInStatus::Authorized { _user: user }
|
||||
}
|
||||
request::SignInStatus::NotAuthorized { user } => {
|
||||
SignInStatus::Unauthorized { user }
|
||||
SignInStatus::Unauthorized { _user: user }
|
||||
}
|
||||
_ => SignInStatus::SignedOut,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,13 +26,7 @@ pub fn init(cx: &mut MutableAppContext) {
|
|||
cx.remove_window(window_id);
|
||||
}
|
||||
|
||||
let window_size = cx
|
||||
.global::<Settings>()
|
||||
.theme
|
||||
.copilot
|
||||
.auth
|
||||
.popup_dimensions
|
||||
.to_vec();
|
||||
let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
|
||||
let (window_id, _) = cx.add_window(
|
||||
WindowOptions {
|
||||
|
|
@ -43,13 +37,15 @@ pub fn init(cx: &mut MutableAppContext) {
|
|||
titlebar: None,
|
||||
center: true,
|
||||
focus: false,
|
||||
kind: WindowKind::PopUp,
|
||||
kind: WindowKind::Normal,
|
||||
is_movable: true,
|
||||
screen: None,
|
||||
},
|
||||
|_| CopilotCodeVerification::new(prompt),
|
||||
);
|
||||
code_verification_window_id = Some(window_id);
|
||||
|
||||
cx.activate_window(window_id);
|
||||
}
|
||||
_ => {
|
||||
if let Some(window_id) = code_verification_window_id.take() {
|
||||
|
|
@ -59,6 +55,26 @@ pub fn init(cx: &mut MutableAppContext) {
|
|||
}
|
||||
})
|
||||
.detach();
|
||||
|
||||
// let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
|
||||
// let (_window_id, _) = cx.add_window(
|
||||
// WindowOptions {
|
||||
// bounds: gpui::WindowBounds::Fixed(RectF::new(Default::default(), window_size)),
|
||||
// titlebar: None,
|
||||
// center: true,
|
||||
// focus: false,
|
||||
// kind: WindowKind::PopUp,
|
||||
// is_movable: true,
|
||||
// screen: None,
|
||||
// },
|
||||
// |_| {
|
||||
// CopilotCodeVerification::new(PromptUserDeviceFlow {
|
||||
// user_code: "ABCD-1234".to_string(),
|
||||
// verification_uri: "https://github.com/login/device".to_string(),
|
||||
// })
|
||||
// },
|
||||
// );
|
||||
}
|
||||
|
||||
pub struct CopilotCodeVerification {
|
||||
|
|
@ -74,71 +90,146 @@ impl View for CopilotCodeVerification {
|
|||
"CopilotCodeVerification"
|
||||
}
|
||||
|
||||
fn focus_in(&mut self, _: gpui::AnyViewHandle, cx: &mut gpui::ViewContext<Self>) {
|
||||
cx.notify()
|
||||
}
|
||||
|
||||
fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> gpui::ElementBox {
|
||||
let style = cx.global::<Settings>().theme.copilot.clone();
|
||||
|
||||
let instruction_text = style.auth.instruction_text;
|
||||
let user_code_text = style.auth.user_code;
|
||||
let button = style.auth.button;
|
||||
let button_width = style.auth.button_width;
|
||||
let height = style.auth.popup_dimensions.height;
|
||||
let copied = cx
|
||||
.read_from_clipboard()
|
||||
.map(|item| item.text() == &self.prompt.user_code)
|
||||
.unwrap_or(false);
|
||||
|
||||
let user_code = self.prompt.user_code.replace("-", " - ");
|
||||
|
||||
Flex::column()
|
||||
.with_child(
|
||||
MouseEventHandler::<Self>::new(0, cx, |state, _cx| {
|
||||
let style = style.auth.close_icon.style_for(state, false);
|
||||
theme::ui::icon(style).boxed()
|
||||
})
|
||||
.on_click(gpui::MouseButton::Left, move |_, cx| {
|
||||
let window_id = cx.window_id();
|
||||
cx.remove_window(window_id);
|
||||
})
|
||||
.with_cursor_style(gpui::CursorStyle::PointingHand)
|
||||
.aligned()
|
||||
.right()
|
||||
.boxed(),
|
||||
)
|
||||
.with_child(
|
||||
Flex::column()
|
||||
.align_children_center()
|
||||
.with_children([
|
||||
theme::ui::svg(&style.auth.copilot_icon).boxed(),
|
||||
Label::new(
|
||||
"Here is your code to authenticate with github",
|
||||
instruction_text.clone(),
|
||||
)
|
||||
theme::ui::modal("Authenticate Copilot", &style.modal, cx, |cx| {
|
||||
Flex::column()
|
||||
.align_children_center()
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::row()
|
||||
.with_children([
|
||||
theme::ui::svg(&style.auth.copilot_icon).boxed(),
|
||||
theme::ui::svg(&style.auth.plus_icon).boxed(),
|
||||
theme::ui::svg(&style.auth.zed_icon).boxed(),
|
||||
])
|
||||
.boxed(),
|
||||
Label::new("Copilot for Zed", style.auth.header_text.clone()).boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.header_group)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Label::new(user_code, user_code_text.clone()).boxed(),
|
||||
theme::ui::cta_button_with_click("Copy Code", button_width, &button, cx, {
|
||||
let user_code = self.prompt.user_code.clone();
|
||||
move |_, cx| {
|
||||
cx.platform()
|
||||
.write_to_clipboard(ClipboardItem::new(user_code.clone()))
|
||||
}
|
||||
}),
|
||||
Label::new("Copy it and enter it on GitHub", instruction_text.clone())
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Here is your code to authenticate with github",
|
||||
style.auth.instruction_text.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
theme::ui::cta_button_with_click(
|
||||
"Go to Github",
|
||||
button_width,
|
||||
&button,
|
||||
cx,
|
||||
{
|
||||
let verification_uri = self.prompt.verification_uri.clone();
|
||||
move |_, cx| cx.platform().open_url(&verification_uri)
|
||||
},
|
||||
),
|
||||
])
|
||||
.aligned()
|
||||
.boxed(),
|
||||
)
|
||||
.contained()
|
||||
.with_style(style.auth.popup_container)
|
||||
.constrained()
|
||||
.with_height(height)
|
||||
.boxed()
|
||||
MouseEventHandler::<Self>::new(0, cx, |state, _cx| {
|
||||
Flex::row()
|
||||
.with_children([
|
||||
Label::new(
|
||||
self.prompt.user_code.clone(),
|
||||
style.auth.device_code.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.contained()
|
||||
.with_style(style.auth.device_code_left_container)
|
||||
.constrained()
|
||||
.with_width(style.auth.device_code_left)
|
||||
.boxed(),
|
||||
Empty::new()
|
||||
.constrained()
|
||||
.with_width(1.)
|
||||
.with_height(style.auth.device_code_seperator_height)
|
||||
.contained()
|
||||
.with_background_color(
|
||||
style
|
||||
.auth
|
||||
.cta_button
|
||||
.style_for(state, false)
|
||||
.container
|
||||
.border
|
||||
.color,
|
||||
)
|
||||
.boxed(),
|
||||
Label::new(
|
||||
if copied { "Copied!" } else { "Copy" },
|
||||
style
|
||||
.auth
|
||||
.cta_button
|
||||
.style_for(state, false)
|
||||
.text
|
||||
.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.contained()
|
||||
.with_style(style.auth.device_code_right_container)
|
||||
.constrained()
|
||||
.with_width(style.auth.device_code_right)
|
||||
.boxed(),
|
||||
])
|
||||
.contained()
|
||||
.with_style(
|
||||
style
|
||||
.auth
|
||||
.device_code_cta
|
||||
.style_for(state, false)
|
||||
.container,
|
||||
)
|
||||
.constrained()
|
||||
.with_width(style.auth.content_width)
|
||||
.boxed()
|
||||
})
|
||||
.on_click(gpui::MouseButton::Left, {
|
||||
let user_code = self.prompt.user_code.clone();
|
||||
move |_, cx| {
|
||||
cx.platform()
|
||||
.write_to_clipboard(ClipboardItem::new(user_code.clone()));
|
||||
cx.notify();
|
||||
}
|
||||
})
|
||||
.with_cursor_style(gpui::CursorStyle::PointingHand)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.device_code_group)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Copy it and enter it on GitHub",
|
||||
style.auth.instruction_text.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
theme::ui::cta_button_with_click(
|
||||
"Go to Github",
|
||||
style.auth.content_width,
|
||||
&style.auth.cta_button,
|
||||
cx,
|
||||
{
|
||||
let verification_uri = self.prompt.verification_uri.clone();
|
||||
move |_, cx| cx.platform().open_url(&verification_uri)
|
||||
},
|
||||
),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.github_group)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.constrained()
|
||||
.with_width(style.auth.content_width)
|
||||
.aligned()
|
||||
.boxed()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue