Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(webapp): add an "add project" page #31

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion typhon-webapp/src/app.rs
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ pub fn App() -> impl IntoView {
margin: 0;
padding: 0;
}
:deep(*) {
box-sizing: border-box;
}
:deep(:root) {
--font-size-huge: 20px;
--font-size-big: 16px;
Expand All @@ -75,6 +78,7 @@ pub fn App() -> impl IntoView {
--color-red: #cf222e;
--color-lightred: #d1242f;
--color-green: #1a7f37;
--color-darkgreen: rgb(24, 119, 51);
--color-lightgreen: #1f883d;
--color-orange: rgb(219, 171, 10);

Expand Down Expand Up @@ -136,13 +140,30 @@ pub fn App() -> impl IntoView {
:deep(.is-table .rows > .row:last-child) {
border-radius: 0 0 var(--radius) var(--radius);
}
:deep(input[type=text]:focus), :deep(input[type=text]:focus-visible) {
outline: var(--color-bg-emphasis) auto 1px;
outline-offset: 0px;
}
:deep(input[type=text]) {
border: 1px solid var(--color-border-default);
border-radius: 3px;
font-size: inherit;
font-family: inherit;
padding: 6px 10px;
margin-top: 4px;
margin-bottom: 4px;
font-size: inherit;
font-weight: inherit;
}
};
provide_context(utils::now_signal());
view! { class=_styler_class,
<Router>
<Style>{include_str!("../../target/main.css")}</Style>
<Stylesheet href="/assets/node_modules/@fontsource/jetbrains-mono/index.css"/>
<Stylesheet href="/assets/node_modules/@fontsource/roboto/index.css"/>
<Stylesheet href="/assets/node_modules/@fontsource/roboto/300.css"/>
<Stylesheet href="/assets/node_modules/@fontsource/roboto/400.css"/>
<Stylesheet href="/assets/node_modules/@fontsource/roboto/500.css"/>
<Routes>
<Route path="/*any" view=routes::Router ssr=SsrMode::Async/>
</Routes>
Expand Down
44 changes: 31 additions & 13 deletions typhon-webapp/src/components/header.rs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ pub fn TyphonLogo() -> impl IntoView {
a {
display: inline-flex;
align-items: center;
justify-content: normal;
padding: 8px;
user-select: none;
}
Expand Down Expand Up @@ -115,29 +116,46 @@ pub fn Nav(route: Signal<Option<routes::Root<routes::Empty>>>) -> impl IntoView
#[component]
pub fn Header(#[prop(into)] route: Signal<Option<routes::Root<routes::Empty>>>) -> impl IntoView {
let style = style! {
div {
.nav-wrapper {
border-bottom: 1px solid var(--color-border-default);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--color-lllightgray);
}
.buttons {
justify-content: normal;
gap: 10px;
display: flex;
padding-right: 8px;
}
};
let user: Signal<Option<typhon_types::data::User>> = use_context().unwrap();
view! {
<div class=style>
view! { class=style,
<div class="nav-wrapper">
<TyphonLogo/>
<Nav route/>
<Transition fallback=move || {
view! { <span>"Loading..."</span> }
}>
{move || {
match user() {
Some(_) => view! { <login::Logout></login::Logout> }.into_view(),
None => view! { <A href="/login">"Log In"</A> }.into_view(),
}
}}
<div class="buttons">
<Transition fallback=move || {
view! { <span>"Loading..."</span> }
}>
{move || {
match user() {
Some(_) => {
view! {
<A href=String::from(Root::AddProject)>
<button>Add project</button>
</A>
<login::Logout></login::Logout>
}
.into_view()
}
None => view! { <A href="/login">"Log In"</A> }.into_view(),
}
}}

</Transition>
</Transition>
</div>
</div>
}
}
215 changes: 215 additions & 0 deletions typhon-webapp/src/pages/add_project.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
use crate::prelude::*;

#[component]
pub(crate) fn AddProject() -> impl IntoView {
let action = request_action!(
CreateProject,
|name: String, url: String, flake: Option<String>| requests::Request::CreateProject {
name,
decl: requests::ProjectDecl {
url,
flake: flake.is_some()
},
},
|result| {
// TODO: redirect when success
// if let Ok(Ok(())) = result {
// leptos_actix::redirect("/");
// }
result
}
);
let value: RwSignal<Option<_>> = action.value();
let response = move || {
value().map(|v| match v {
Ok(Err(ResponseError::BadRequest(message))) => Err(message),
Ok(_) => Ok(()),
Err(e) => Err(format!("Fatal error: {e:?}")),
})
};
let style = style! {
.header {
font-size: var(--font-size-huge);
padding-bottom: 2px;
}
.header-description {
color: var(--color-fg-muted);
padding-top: 4px;
margin-bottom: 14px;
}
.sep {
border-bottom: 1px solid var(--color-border-default);
padding-bottom: 14px;
}
.page {
padding-top: 22px;
max-width: 600px;
margin: auto;
}
.fields {
display: flex;
flex-direction: column;
gap: 14px;
}
.field > label {
display: block;
padding-left: 2px;
font-size: var(--font-size-small);
font-weight: 400;
}
.field > input {
width: 100%;
}
.field.flake {
display: flex;
flex-direction: column;
gap: 16px;
}
.field.flake .option {
display: grid;
grid-template-areas: raw_str("radio icon title") raw_str("radio icon details");
grid-template-columns: auto auto 1fr;
align-items: center;
column-gap: 5px;
}
.field.flake .option input {
grid-area: radio;
}
.field.flake :deep(svg) {
grid-area: icon;
font-size: 20px;
}
.field.flake .option .kind {
font-size: var(--font-size-small);
font-weight: 400;
grid-area: title;
padding-bottom: 2px;
}
.field.flake .option .details {
font-size: var(--font-size-small);
grid-area: details;
color: var(--color-fg-muted);
padding-top: 2px;
}
button {
background: var(--color-green-button-bg);
color: white;
width: auto!important;
transition: all 100ms;
}
button:hover {
transition: all 100ms;
background: var(--color-green);
}
button:active {
transition: all 100ms;
background: var(--color-darkgreen);
}
.page :deep(.message) {
text-align: justify;
padding-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.page :deep(.error-message) {
color: var(--color-danger-emphasis);
}
.page :deep(.success-message) {
color: var(--color-success);
}
// TODO: Move to `app.rs`
.page :deep(button) {
border-radius: 6px;
border: 1px solid var(--color-border-default);
padding: 8px 10px;
cursor: pointer;
outline: inherit;
font-size: inherit;
font-family: inherit;
font-weight: 400;
}
};
view! { class=style,
<div class="page">
<ActionForm action>
<div class="header">"Add a project"</div>
<div class="header-description sep">
"Add continuous integration with Typhon for an existing codebase. This project will be visible to anyone that have access to this Typhon instance."
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about "Import a project's declaration to Typhon. This project will be visible to anyone with access to this Typhon instance."?

</div>
<div class="fields">
<div class="field">
<label class="label" for="name">
"Name"
</label>
<input type="text" name="name" class="input" id="name"/>
</div>
<div class="field sep">
<label class="label" for="url">
"Flake URL"
</label>
<input type="text" name="url" class="input" id="url"/>
</div>
<div class="field sep flake">

<div class="option">
<input name="flake" class="input" id="flake" type="radio" checked=true/>
<Icon icon=icondata::FaSnowflakeRegular/>
<label class="kind" for="flake">
"Flake"
</label>
<label class="details">
The project has a <code>flake.nix</code> <span>.</span>
The project is a
<a href="https://nixos.wiki/wiki/Flakes">Nix Flake</a>
<span>.</span>
</label>
</div>

<div class="option">
<input name="flake" class="input" id="legacy" type="radio"/>
<Icon icon=icondata::BiCodeCurlyRegular/>
<label class="kind" for="legacy">
"Legacy"
</label>
<label class="details" for="legacy">
The project has a
<code>default.nix</code>
<span>.</span>
</label>
</div>

</div>
<div class="field">
{move || {
match response() {
Some(Err(error)) => {
view! {
<div class="message error-message">
<Icon icon=icondata::BiErrorSolid/>
<div>{error}</div>
</div>
}
.into_view()
}
Some(Ok(())) => {
view! {
<div class="message success-message">
<Icon icon=icondata::BiCheckCircleSolid/>
<div>"The project have been created successfully."</div>
</div>
}
.into_view()
}
None => ().into_view(),
}
}}
<button type="submit" style="float: right;">
"Add project"
</button>
</div>
</div>
</ActionForm>
</div>
}
}
Loading