Skip to content

Commit

Permalink
feat: add follow up page and
Browse files Browse the repository at this point in the history
  • Loading branch information
@SalmaElsoly
SalmaElsoly committed Aug 5, 2024
1 parent d97f2f6 commit 83feebf
Show file tree
Hide file tree
Showing 8 changed files with 198 additions and 42 deletions.
Binary file added frontend/src/assets/logo_white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file added frontend/src/assets/logo_white.png:Zone.Identifier
View file
Empty file.
151 changes: 134 additions & 17 deletions frontend/src/components/CreateFlist.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,127 @@
<template>
<Navbar/>
<v-main>
<v-app>
<Navbar />
<v-main class="d-flex flex-column justify-center" height="90%">
<v-container fluid>
<v-row justify="center">
<v-col :cols="8">
<h2 class="mb-2">Create a Flist:</h2>
</v-col>
</v-row>
<v-row justify="center">
<v-col :cols="4">
<label
for="image-name"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Image Name
</label>
<v-text-field
class="pr-5 rounded"
id="image-name"
v-model="flist.image_name"
variant="solo-filled"
required
>
</v-text-field>
<label
for="email"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Email
</label>
<v-text-field
class="pr-5 rounded"
id="email"
v-model="flist.email"
variant="solo-filled"
>
</v-text-field>
<label
for="auth"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Auth
</label>
<v-text-field
class="pr-5 rounded"
id="auth"
v-model="flist.auth"
variant="solo-filled"
>
</v-text-field>
<label
for="registery-token"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Registery Token
</label>
<v-text-field
class="pr-5 rounded mb-5"
id="registery-token"
v-model="flist.registry_token"
variant="solo-filled"
>
</v-text-field>

</v-main>

<v-btn
class="pr-5 rounded-pill bg-purple-darken-1 mb-8"
size="large"
width="50%"
@click="create"
>Create</v-btn
>
</v-col>
<v-col :cols="4">
<label
for="username"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Username
</label>
<v-text-field
class="pr-5 rounded"
id="username"
v-model="flist.username"
variant="solo-filled"
>
</v-text-field>

<label
for="password"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Password
</label>
<v-text-field
class="pr-5 rounded"
id="password"
v-model="flist.password"
variant="solo-filled"
:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
:type="visible ? 'text' : 'password'"
@click:append-inner="visible = !visible"
>
</v-text-field>
<label
for="server-address"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Server Address
</label>
<v-text-field
class="pr-5 rounded"
id="server-address"
v-model="flist.server_address"
variant="solo-filled"
>
</v-text-field>
</v-col>
</v-row>
</v-container>
</v-main>
<Footer></Footer>
</v-app>
</template>

<script setup lang="ts">
Expand All @@ -13,15 +130,16 @@ import { ref } from "vue";
import { useRouter } from "vue-router";
import { Flist } from "../types/Flist";
import axios from "axios";
import Footer from "./Footer.vue";
const flist = ref<Flist>({
auth: "",
email: "",
image_name: "",
password: "",
registry_token: "",
server_address: "",
username: "",
const flist = ref<Flist>({
auth: "",
email: "",
image_name: "",
password: "",
registry_token: "",
server_address: "",
username: "",
});
const router = useRouter();
const api = axios.create({
Expand All @@ -30,16 +148,15 @@ const api = axios.create({
"Content-Type": "application/json",
},
});
const visible = ref<boolean>(false);
const create = async () => {
try {
await api.post("/v1/api/fl", flist);
await api.post("/v1/api/fl", flist.value);
router.push("Follow");
} catch (error) {
console.error("Failed to create flist", error);
}
};
</script>

<style>
</style>
<style scoped></style>
26 changes: 26 additions & 0 deletions frontend/src/components/FollowUp.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<v-app>
<Navbar></Navbar>
<v-main class="d-flex align-center justify-center mb-12 mt-12" height="80%">
<div v-if="pending" class="text-center">
<v-progress-circular
:size="70"
:width="7"
color="purple-darken-1"
indeterminate
class="mb-5"
></v-progress-circular>
<h2 class="mt-12 mb-5">Creating image . . .</h2>
<p>Please wait your image will be ready in few minutes.</p>
</div>
</v-main>
<Footer></Footer>
</v-app>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Navbar from "./Navbar.vue";
import Footer from "./Footer.vue";
const pending = ref<boolean>(true);
</script>
5 changes: 5 additions & 0 deletions frontend/src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<v-footer class="bg-grey-darken-3 d-flex justify-center">
All rights reserved © 2024 - <span> Codescalers Egypt</span>
</v-footer>
</template>
18 changes: 10 additions & 8 deletions frontend/src/components/Login.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,36 @@
<v-img :src="logo" class="mb-10" height="10%" width="15%"></v-img>
<h2 class="mb-5">Sign in</h2>

<div
<label
for="username"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Username
</div>
</label>
<v-text-field
class="pr-5 rounded"
:label="username"
v-model="user.username"
variant="outlined"
density="compact"
id="username"
required
>
</v-text-field>
<div
<label
for="password"
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
>
Password
</div>
</label>
<v-text-field
class="mb-5 pr-5 rounded"
:label="password"
v-model="user.password"
:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
:type="visible ? 'text' : 'password'"
variant="outlined"
@click:append-inner="visible = !visible"
density="compact"
id="password"
required
>
</v-text-field>
Expand Down Expand Up @@ -85,10 +87,10 @@ const visible = ref<boolean>(false);
const login = async () => {
try {
const response = await api.post("/v1/api/signin", user);
const response = await api.post("/v1/api/signin", user.value);
const token = response.data.access_token;
sessionStorage.setItem("token", token);
router.push("/flists")
router.push("/flists");
} catch (error) {
console.error("Failed to login", error);
}
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/components/Navbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<v-app-bar>
<v-app-bar-nav-icon>
<v-img src=""></v-img>
</v-app-bar-nav-icon>
<v-spacer>
</v-spacer>
</v-app-bar>
<v-app-bar class="bg-purple-darken-1">
<v-app-bar-nav-icon class="ml-8">
<v-img :src="whiteLogo" contain height="50px" width="50px"></v-img>
</v-app-bar-nav-icon>
<v-spacer> </v-spacer>
<v-btn to="Create">Create flist</v-btn>
<v-btn to="Flists">View List</v-btn>
</v-app-bar>
</template>


<script setup lang="ts">
import whiteLogo from "../assets/logo_white.png";
</script>
22 changes: 14 additions & 8 deletions frontend/src/router/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Login from "../components/Login.vue";
import CreateFlist from "../components/CreateFlist.vue";
import ViewFlists from "../components/ViewFlists.vue";
import FollowUp from "../components/FollowUp.vue";

const routes: Array<RouteRecordRaw> = [
{
Expand All @@ -14,6 +15,11 @@ const routes: Array<RouteRecordRaw> = [
name: "Flists",
component: ViewFlists,
},
{
path: "/follow",
name: "Follow",
component: FollowUp,
},
{
path: "/create",
name: "Create",
Expand All @@ -27,13 +33,13 @@ const router = createRouter({
routes,
});

router.beforeEach((to, _, next) => {
const token: string | null = sessionStorage.getItem("token");
if (to.meta.requiresAuth && token === null) {
next({ name: "Login" });
} else {
next();
}
});
// router.beforeEach((to, _, next) => {
// const token: string | null = sessionStorage.getItem("token");
// if (to.meta.requiresAuth && token === null) {
// next({ name: "Login" });
// } else {
// next();
// }
// });

export default router;

0 comments on commit 83feebf

Please sign in to comment.