mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 10:10:31 +00:00
dca01e6817
Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details>  I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues.   What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
77 lines
2.2 KiB
Vue
77 lines
2.2 KiB
Vue
<template>
|
|
<main class="flex flex-col w-full h-full justify-center items-center">
|
|
<!-- TODO: Should use vue notifications. -->
|
|
<div
|
|
v-if="errorMessage"
|
|
class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white p-4 rounded-md"
|
|
>
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:border-wp-background-400 md:bg-wp-background-100 md:dark:bg-wp-background-200 md:flex-row md:w-3xl md:h-sm justify-center"
|
|
>
|
|
<div class="flex md:bg-wp-primary-200 md:dark:bg-wp-primary-300 md:w-3/5 justify-center items-center">
|
|
<img class="w-48 h-48" src="../assets/logo.svg?url" />
|
|
</div>
|
|
<div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
|
|
<h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
|
|
<Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
import Button from '~/components/atomic/Button.vue';
|
|
import useAuthentication from '~/compositions/useAuthentication';
|
|
|
|
export default defineComponent({
|
|
name: 'Login',
|
|
|
|
components: {
|
|
Button,
|
|
},
|
|
|
|
setup() {
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const authentication = useAuthentication();
|
|
const errorMessage = ref<string>();
|
|
const i18n = useI18n();
|
|
|
|
function doLogin() {
|
|
const url = typeof route.query.url === 'string' ? route.query.url : '';
|
|
authentication.authenticate(url);
|
|
}
|
|
|
|
const authErrorMessages = {
|
|
oauth_error: i18n.t('user.oauth_error'),
|
|
internal_error: i18n.t('user.internal_error'),
|
|
access_denied: i18n.t('user.access_denied'),
|
|
};
|
|
|
|
onMounted(async () => {
|
|
if (authentication.isAuthenticated) {
|
|
await router.replace({ name: 'home' });
|
|
return;
|
|
}
|
|
|
|
if (route.query.code) {
|
|
const code = route.query.code as keyof typeof authErrorMessages;
|
|
errorMessage.value = authErrorMessages[code];
|
|
}
|
|
});
|
|
|
|
return {
|
|
doLogin,
|
|
errorMessage,
|
|
};
|
|
},
|
|
});
|
|
</script>
|