Frontend Example Page - #7
Conversation
Wunderwaffel
commented
Nov 4, 2025
Wunderwaffel
commented
- Added two simple pages to test API-calls to backend (Login and Home)
- Added pycache files to gitignore
- Enabled CORS for development
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <script setup> | ||
| defineProps({ | ||
| msg: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="greetings"> | ||
| <h1 class="green">{{ msg }}</h1> | ||
| <h3> | ||
| You’ve successfully created a project with | ||
| <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> + | ||
| <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. | ||
| </h3> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| h1 { | ||
| font-weight: 500; | ||
| font-size: 2.6rem; | ||
| position: relative; | ||
| top: -10px; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .greetings h1, | ||
| .greetings h3 { | ||
| text-align: center; | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .greetings h1, | ||
| .greetings h3 { | ||
| text-align: left; | ||
| } | ||
| } | ||
| </style> |
There was a problem hiding this comment.
This commit removes HelloWorld.vue (and the other starter components) but App.vue still imports and renders HelloWorld/TheWelcome. With the files now deleted, the next npm run dev or build fails with a "module not found" error for those imports and the app never mounts. Either keep the components or update App.vue to render the new HomeView/LoginView instead.
Useful? React with 👍 / 👎.
| <script setup> | ||
| import { ref } from 'vue'; | ||
| import axios from 'axios'; | ||
| import { useRouter } from 'vue-router'; | ||
| import { useAuthStore } from '@/stores/auth'; | ||
|
|
||
| const username = ref('michael'); | ||
| const errorMessage = ref(null); | ||
| const isLoading = ref(false); | ||
|
|
||
| const authStore = useAuthStore(); | ||
| const router = useRouter(); | ||
|
|
||
| const handleLogin = async () => { | ||
| isLoading.value = true; | ||
| errorMessage.value = null; | ||
|
|
||
| try { | ||
| const response = await axios.post('http://localhost:8000/auth/login', { | ||
| username: username.value, | ||
| }); | ||
|
|
||
| const { access_token, refresh_token, user } = response.data; | ||
|
|
There was a problem hiding this comment.
LoginView.vue imports useAuthStore and immediately dereferences authStore.setAuth, authStore.logout, authStore.user, etc., but the new frontend/src/stores/auth.js file is empty and exports nothing. Vite/ESBuild will raise an error at compile time because the named export does not exist, so the component can’t render. Implement the Pinia store or remove the import and dependent code.
Useful? React with 👍 / 👎.
1 participant
