STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

complete secure files

Browse Source
This commit is contained in:
James Collins
2023-09-28 09:59:40 +10:00
parent dbf9db1c92
commit 6adfd9f3fa
15 changed files with 354 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
resources/js/components/SMAttachments.vue
View File

@@ -11,7 +11,7 @@
v-if="modelValue && modelValue.length > 0"
class="w-full border-1 rounded-2 bg-white text-sm mt-2">
<tbody>
<tr v-for="file of modelValue" :key="file.id">
<tr v-for="file of fileList" :key="file.id">
<td class="py-2 pl-2 hidden sm:block">
<img
:src="getFileIconImagePath(file.name || file.title)"
@@ -82,6 +82,9 @@ import SMHeader from "../components/SMHeader.vue";
import { openDialog } from "../components/SMDialog";
import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
import { Media } from "../helpers/api.types";
import { onMounted, ref, watch } from "vue";
import { ImportMetaExtras } from "../../../import-meta";
import { strCaseCmp } from "../helpers/string";
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
@@ -97,6 +100,8 @@ const props = defineProps({
},
});
const fileList = ref([]);
/**
* Handle the user adding a new media item.
*/
@@ -112,7 +117,7 @@ const handleClickAdd = async () => {
if (result) {
const mediaResult = result as Media[];
let newValue = props.modelValue;
let mediaIds = new Set(newValue.map((item) => item.id));
let mediaIds = new Set(newValue.map((item) => (item as Media).id));
mediaResult.forEach((item) => {
if (!mediaIds.has(item.id)) {
@@ -128,105 +133,50 @@ const handleClickAdd = async () => {
const handleClickDelete = (id: string) => {
if (props.showEditor == true) {
const newList = props.modelValue.filter((item) => item.id !== id);
const newList = props.modelValue.filter(
(item) => (item as Media).id !== id,
);
emits("update:modelValue", newList);
}
};
watch(
() => props.modelValue,
(newValue) => {
updateFileList(newValue as Array<Media>);
},
);
onMounted(() => {
if (props.modelValue !== undefined) {
updateFileList(props.modelValue as Array<Media>);
}
});
const updateFileList = (newFileList: Array<Media>) => {
fileList.value = [];
for (const mediaItem of newFileList) {
const webUrl = (import.meta as ImportMetaExtras).env.APP_URL;
const apiUrl = (import.meta as ImportMetaExtras).env.APP_URL_API;
// Is the URL a API request?
if (mediaItem.url.startsWith(apiUrl)) {
const fileUrlPath = mediaItem.url.substring(apiUrl.length);
const fileUrlParts = fileUrlPath.split("/");
if (
fileUrlParts.length === 4 &&
fileUrlParts[0].length === 0 &&
strCaseCmp("media", fileUrlParts[1]) === true &&
strCaseCmp("download", fileUrlParts[3]) === true
) {
mediaItem.url = webUrl + "/file/" + fileUrlParts[2];
fileList.value.push(mediaItem);
}
} else {
fileList.value.push(mediaItem);
}
}
};
</script>
<!-- <style lang="scss">
.attachment-list {
border: 1px solid var(--base-color);
border-collapse: collapse;
table-layout: fixed;
width: 100%;
// max-width: 580px;
margin-top: 12px;
background-color: var(--base-color-light);
.attachment-row {
td {
padding: 8px 0;
}
&:last-child td {
border-bottom: 0;
}
.attachment-file-icon {
width: 56px;
padding-left: 8px;
img {
display: block;
}
}
.attachment-file-name {
font-size: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.attachment-download {
width: 28px;
text-align: center;
a {
display: block;
color: var(--base-color-dark);
transition: color 0.2s ease-in-out;
&:hover {
color: var(--primary-color);
}
svg {
margin-top: 4px;
width: 24px;
height: 24px;
}
}
}
.attachment-file-size {
width: 80px;
font-size: 75%;
color: var(--base-color-dark);
white-space: nowrap;
text-align: right;
padding-right: 8px;
}
}
}
@media only screen and (max-width: 640px) {
.attachment-list {
.attachment-file-icon img {
margin: 0 4px;
}
.attachment-download a,
.attachment-file-size {
padding-left: 8px;
}
}
}
@media only screen and (max-width: 440px) {
.attachment-list {
.attachment-file-icon {
display: none;
}
}
}
</style> -->

10
resources/js/components/dialogs/SMDialogMedia.vue
View File

@@ -144,6 +144,16 @@
item,
)}')`,
}">
<div
v-if="item.security_type != ''">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<title>locked</title>
<path
d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />
</svg>
</div>
<div
class="absolute -bottom-6 small w-full text-ellipsis overflow-hidden whitespace-nowrap">
{{ item.title }}

2
resources/js/helpers/api.types.ts
View File

@@ -66,7 +66,7 @@ export interface Media {
title: string;
name: string;
mime_type: string;
permission: string;
security_type: string;
size: number;
storage: string;
url: string;

10
resources/js/helpers/string.ts
View File

@@ -113,3 +113,13 @@ export const toPrice = (numOrString: number | string): string => {
: numOrString;
return num.toFixed(num % 1 === 0 ? 0 : 2);
};
/**
* Compare 2 strings case insensitive
* @param {string} string1 The first string for comparison.
* @param {string} string2 The second string for comparison.
* @returns {boolean} If the strings match.
*/
export const strCaseCmp = (string1: string, string2: string): boolean => {
return string1.toLowerCase() === string2.toLowerCase();
};

11
resources/js/router/index.js
View File

@@ -426,6 +426,14 @@ export const routes = [
},
component: () => import("@/views/ForgotPassword.vue"),
},
{
path: "/file/:id",
name: "file",
meta: {
title: "File",
},
component: () => import("@/views/File.vue"),
},
{
path: "/cart",
name: "cart",
@@ -448,8 +456,7 @@ export const routes = [
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// always scroll to top
scrollBehavior() {
return { top: 0 };
},
});

132
resources/js/views/File.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<SMPageStatus
v-if="pageLoading == false && pageStatus != 200"
:status="pageStatus" />
<SMLoading v-else-if="pageLoading == true"></SMLoading>
<SMForm
v-else-if="showPasswordForm == true"
:model-value="form"
@submit="handleSubmit">
<SMFormCard>
<template #header>
<h3>Password Required</h3>
<p>This file requires a password before it can be viewed</p>
</template>
<template #body>
<SMInput
control="password"
type="password"
label="File Password"
autofocus />
</template>
<template #footer-space-between>
<input role="button" type="submit" value="OK" />
</template>
</SMFormCard>
</SMForm>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { api } from "../helpers/api";
import { useRoute } from "vue-router";
import { Media } from "../helpers/api.types";
import SMLoading from "../components/SMLoading.vue";
import { strCaseCmp } from "../helpers/string";
import { useUserStore } from "../store/UserStore";
import { Form, FormControl, FormObject } from "../helpers/form";
import { Required } from "../helpers/validate";
const pageStatus = ref(200);
const pageLoading = ref(true);
const showPasswordForm = ref(false);
const fileUrl = ref("");
const userStore = useUserStore();
const form: FormObject = reactive(
Form({
password: FormControl("", Required()),
}),
);
/*
* Download file from URL
*/
const downloadFile = (params = {}) => {
let url = fileUrl.value;
// Check if the URL already contains query parameters
const hasQueryParameters = url.includes("?");
if (Object.keys(params).length > 0) {
url += hasQueryParameters ? "&" : "?";
url += Object.keys(params)
.map(
(key) =>
encodeURIComponent(key) +
"=" +
encodeURIComponent(params[key]),
)
.join("&");
}
window.location.href = url;
};
/*
* Handle password form submit
*/
const handleSubmit = () => {
const params = {
password: form.controls.password.value,
};
downloadFile(params);
};
/**
* Handle page loading
*/
const handleLoad = async () => {
const route = useRoute();
if (route.params.id === undefined) {
pageStatus.value = 403;
} else {
const params = {
id: route.params.id,
};
let result = await api.get({
url: "/media/:id",
params: params,
});
if (result.status === 200) {
const medium = result.data as Media;
fileUrl.value = medium.url;
if (medium.security_type === "") {
downloadFile();
} else if (
strCaseCmp("permission", medium.security_type) === true &&
userStore.id
) {
const params = {
token: userStore.token,
};
downloadFile(params);
} else if (strCaseCmp("password", medium.security_type) === true) {
showPasswordForm.value = true;
} else {
/* unknown security type */
pageStatus.value = 403;
}
} else {
pageStatus.value = result.status;
}
}
};
handleLoad();
</script>

40
resources/js/views/dashboard/MediaEdit.vue
View File

@@ -21,7 +21,26 @@
accepts="*"
class="mb-4" />
<SMInput control="title" class="mb-4" />
<SMInput control="permission" class="mb-4" />
<div class="flex flex-col md:flex-row gap-4">
<SMDropdown
class="mb-4"
control="security_type"
type="select"
:options="{
'': 'None',
permission: 'Permission',
password: 'Password',
}" />
<SMInput
v-if="form.controls.security_type.value != ''"
class="mb-4"
control="security_data"
:label="
toTitleCase(
form.controls.security_type.value.toString(),
)
" />
</div>
<div
v-if="!editMultiple"
class="flex flex-col md:flex-row gap-4">
@@ -77,7 +96,7 @@
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { computed, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ApiOptions, api } from "../../helpers/api";
import { Form, FormControl } from "../../helpers/form";
@@ -92,6 +111,7 @@ import { closeDialog, openDialog } from "../../components/SMDialog";
import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
import SMForm from "../../components/SMForm.vue";
import SMInput from "../../components/SMInput.vue";
import SMDropdown from "../../components/SMDropdown.vue";
import SMMastHead from "../../components/SMMastHead.vue";
import SMLoading from "../../components/SMLoading.vue";
import { useToastStore } from "../../store/ToastStore";
@@ -119,7 +139,8 @@ const form = reactive(
file: FormControl("", And([Required()])),
title: FormControl("", Required()),
description: FormControl(),
permission: FormControl(),
security_type: FormControl(),
security_data: FormControl(),
}),
);
@@ -153,7 +174,8 @@ const handleLoad = async () => {
form.controls.file.value = data.medium;
form.controls.title.value = data.medium.title;
form.controls.description.value = data.medium.description;
form.controls.permission.value = data.medium.permission;
form.controls.security_type.value = data.medium.security_type;
form.controls.security_data.value = data.medium.security_data;
fileData.url = data.medium.url;
fileData.mime_type = data.medium.mime_type;
fileData.size = data.medium.size;
@@ -232,8 +254,14 @@ const handleSubmit = async (enableFormCallBack) => {
submitData.append("title", form.controls.title.value as string);
submitData.append(
"permission",
form.controls.permission.value as string,
"security_type",
form.controls.security_type.value as string,
);
submitData.append(
"security_data",
form.controls.security_type.value == ""
? ""
: (form.controls.security_data.value as string),
);
submitData.append(
"description",

8
resources/js/views/form.ts Normal file
View File

@@ -0,0 +1,8 @@
import { reactive } from "vue";
import { Form, FormControl, FormObject } from "../helpers/form";
export const form: FormObject = reactive(
Form({
password: FormControl("", Required()),
}),
);