zoeissleeping/filething
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user auth rose pine color scheme

Browse Source
This commit is contained in:
Zoe
2024-09-04 22:33:20 -05:00
parent 7e08411ece
commit becc722eb2
18 changed files with 369 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
ui/README.md
View File

@@ -1,75 +1,3 @@
# Nuxt 3 Minimal Starter
# Filething UI
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
This is the Nuxt 3 UI of the project, it will be auto build and linked with the go app with `go generate`

44
ui/assets/css/main.css
View File

@@ -1,3 +1,47 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-base: 250 244 237;
--color-surface: 255 250 243;
--color-overlay: 242 233 225;
--color-muted: 152 147 165;
--color-subtle: 121 117 147;
--color-text: 87 82 121;
--highlight-low: 33 32 46;
--highlight-med: 64 61 82;
--highlight-high: 82 79 103;
--color-foam: 86 148 159;
--color-love: 180 99 122;
--color-pine: 40 105 131;
}
}
.dark {
--color-base: 25 23 36;
--color-surface: 31 29 46;
--color-overlay: 38 35 58;
--color-muted: 110 106 134;
--color-subtle: 144 140 170;
--color-text: 224 222 244;
--highlight-low: 244 237 232;
--highlight-med: 223 218 217;
--highlight-high: 206 202 205;
--color-foam: 156 207 216;
--color-love: 235 111 146;
--color-pine: 49 116 143;
}
body {
color: rgb(var(--color-text));
}
::selection {
background: rgb(var(--color-muted) / 0.2);
}
*:focus-visible {
outline: none;
}

BIN
ui/bun.lockb
View File

Binary file not shown.

17
ui/components/Input.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup>
const props = defineProps({
placeholder: String,
type: String | undefined,
})
const emit = defineEmits(['update:modelValue'])
function updateValue(value) {
emit('update:modelValue', value)
}
</script>
<template>
<input
class="py-2 px-4 resize-none bg-overlay rounded-md my-2 border border-muted/20 hover:border-muted/40 focus:border-muted/60 placeholder:italic placeholder:text-subtle transition-[border-color] max-w-64"
:placeholder="placeholder" :type="type" v-on:input="updateValue($event.target.value)" />
</template>

15
ui/nuxt.config.ts
View File

@@ -1,21 +1,24 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: true,
compatibilityDate: '2024-04-03',
css: ['~/assets/css/main.css'],
ssr: true,
modules: [
'@nuxtjs/color-mode',
],
colorMode: {
classSuffix: ''
},
devtools: { enabled: true },
experimental: {
buildCache: true,
},
modules: [
'@nuxtjs/color-mode',
],
postcss: {
plugins: {
tailwindcss: {},

4
ui/package.json
View File

@@ -11,12 +11,12 @@
},
"dependencies": {
"@nuxtjs/color-mode": "^3.4.4",
"nuxt": "^3.13.0",
"nuxt": "^3.13.1",
"vue": "latest"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.44",
"postcss": "^8.4.45",
"tailwindcss": "^3.4.10"
}
}

1
ui/pages/index.vue
View File

@@ -5,7 +5,6 @@
</template>
<script lang="ts" setup>
</script>
<style></style>

36
ui/pages/login.vue
View File

@@ -5,33 +5,41 @@ if (useCookie("sessionToken").value) {
await navigateTo('/')
}
let email = ref('')
let username_or_email = ref('')
let password = ref('')
let error = ref('')
const submitForm = async () => {
await useFetch('/api/login', {
let response = await useFetch('/api/login', {
method: 'POST',
body: {
"email": email.value,
"username_or_email": username_or_email.value,
"password": password.value,
}
})
await navigateTo('/')
if (response.error.value != null) {
console.log(response)
error.value = response.error.value.data.message
setTimeout(() => error.value = "", 15000)
} else {
await navigateTo('/')
}
}
</script>
<template>
<div class="min-h-screen min-w-screen grid place-content-center">
<div class="flex flex-col max-w-72 w-full text-center">
<input
class="py-2 px-4 resize-none rounded-md my-2 border-gray-200 dark:border-dark-gray-800 focus:border-gray-300 dark:focus:border-dark-gray-800 border focus:outline-none placeholder:italic placeholder:text-slate-500 dark:placeholder:text-gray-300"
v-model="email" type="email" placeholder="Email..." />
<input
class="py-2 px-4 resize-none rounded-md my-2 border-gray-200 dark:border-dark-gray-800 focus:border-gray-300 dark:focus:border-dark-gray-800 border focus:outline-none placeholder:italic placeholder:text-slate-500 dark:placeholder:text-gray-300"
v-model="password" type="password" placeholder="Password..." />
<button @click="submitForm" class="py-2 px-4 bg-blue-500 text-white rounded-md">Login</button>
<p>Or <NuxtLink to="/signup" class="text-pink-600">Sign up</NuxtLink>
<div class="min-h-screen min-w-screen grid place-content-center bg-base">
<div
class="flex flex-col text-center bg-surface border border-muted/20 shadow-md px-10 py-8 rounded-2xl min-w-0 max-w-[313px]">
<h2 class="font-semibold text-2xl mb-2">Login</h2>
<Input v-model="username_or_email" placeholder="Username or Email..." />
<Input v-model="password" type="password" placeholder="Password..." />
<p class="text-love">{{ error }}</p>
<button @click="submitForm"
class="py-2 px-4 my-2 bg-pine/10 text-pine rounded-md transition-colors hover:bg-pine/15 active:bg-pine/25">Login</button>
<p>Or <NuxtLink to="/signup" class="text-foam hover:underline">Sign up</NuxtLink>
</p>
</div>
</div>

37
ui/pages/signup.vue
View File

@@ -1,35 +1,48 @@
<script setup>
console.log(useCookie("sessionToken").value)
if (useCookie("sessionToken").value) {
await navigateTo('/')
}
let username = ref('')
let email = ref('')
let password = ref('')
let error = ref('')
const submitForm = async () => {
await useFetch('/api/signup', {
const response = await useFetch('/api/signup', {
method: 'POST',
body: {
"username": username.value,
"email": email.value,
"password": password.value,
}
})
await navigateTo('/')
if (response.error.value != null) {
console.log(response)
error.value = response.error.value.data.message
setTimeout(() => error.value = "", 15000)
} else {
await navigateTo('/')
}
}
</script>
<template>
<div class="min-h-screen min-w-screen grid place-content-center">
<div class="flex flex-col max-w-72 w-full text-center">
<input
class="py-2 px-4 resize-none rounded-md my-2 border-gray-200 dark:border-dark-gray-800 focus:border-gray-300 dark:focus:border-dark-gray-800 border focus:outline-none placeholder:italic placeholder:text-slate-500 dark:placeholder:text-gray-300"
v-model="email" type="email" placeholder="Email..." />
<input
class="py-2 px-4 resize-none rounded-md my-2 border-gray-200 dark:border-dark-gray-800 focus:border-gray-300 dark:focus:border-dark-gray-800 border focus:outline-none placeholder:italic placeholder:text-slate-500 dark:placeholder:text-gray-300"
v-model="password" type="password" placeholder="Password..." />
<button @click="submitForm" class="py-2 px-4 bg-blue-500 text-white rounded-md">Signup</button>
<p>Or <NuxtLink to="/login" class="text-pink-600">Log in</NuxtLink>
<div class="min-h-screen min-w-screen grid place-content-center bg-base">
<div
class="flex flex-col text-center bg-surface border border-muted/20 shadow-md px-10 py-8 rounded-2xl min-w-0 max-w-[313px]">
<h2 class="font-semibold text-2xl mb-2">Signup</h2>
<Input v-model="username" placeholder="Username..." />
<Input v-model="email" placeholder="Email..." />
<Input v-model="password" type="password" placeholder="Password..." />
<p class="text-love">{{ error }}</p>
<button @click="submitForm"
class="py-2 px-4 my-2 bg-pine/10 text-pine rounded-md transition-colors hover:bg-pine/15 active:bg-pine/25">Login</button>
<p>Or <NuxtLink to="/login" class="text-foam hover:underline">Log in</NuxtLink>
</p>
</div>
</div>

18
ui/tailwind.config.js
View File

@@ -8,8 +8,24 @@ module.exports = {
"./app.vue",
"./error.vue",
],
darkMode: "selector",
theme: {
extend: {},
extend: {
colors: {
base: "rgb(var(--color-base))",
surface: "rgb(var(--color-surface))",
overlay: "rgb(var(--color-overlay))",
muted: "rgb(var(--color-muted))",
subtle: "rgb(var(--color-subtle))",
text: "rgb(var(--color-text))",
foam: "rgb(var(--color-foam))",
love: "rgb(var(--color-love))",
pine: "rgb(var(--color-pine))",
"highlight-low": "rgb(var(--highlight-low))",
"highlight-med": "rgb(var(--highlight-med))",
"highlight-high": "rgb(var(--highlight-high))",
},
},
},
plugins: [],
};