grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

open viewMessageModal on double click

Browse Source
This commit is contained in:
grimhilt
2023-04-08 01:01:10 +02:00
parent 5b6995d6a6
commit b9cc543b64
7 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
front/src/views/modals/AddAccountModal.vue
View File

@@ -1,232 +0,0 @@
<script setup>
import { ref, computed, watchEffect } from "vue";
import Modal from "./Modal";
import API from "../../services/imapAPI";
const modal = ref(false);
const email = ref("");
const pwd = ref("");
const xoauth = ref("");
const xoauth2 = ref("");
const host = ref("");
const port = ref(993);
const error = ref("");
const knownHosts = {
"outlook.com": {
host: "outlook.office365.com",
},
"hotmail.com": {
host: "outlook.office365.com",
},
"live.com": {
host: "outlook.office365.com",
},
"zoho.com": {
host: "imap.zoho.eu",
},
"yahoo.com": {
host: "imap.mail.yahoo.com",
},
"icloud.com": {
host: "imap.mail.me.com",
},
};
const refHost = computed({
set: (val) => {
host.value = val;
},
});
const err = computed({
set: (val) => {
error.value = val;
},
});
function validateEmail(email) {
const re =
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function checkError() {
if (!validateEmail(email.value)) {
err.value = "The email is not valid.";
} else if (((pwd.value == xoauth.value) == xoauth2.value) == "") {
err.value = "You need at least one authentification method.";
} else if ([pwd.value, xoauth.value, xoauth2.value].filter((val) => val != "").length > 1) {
err.value = "You need only one authentification method.";
} else if (host.value == "" || port.value == "") {
err.value = "You need to complete the port and the host.";
} else {
err.value = "";
}
}
function addAccountRequest() {
checkError();
const data = {
email: email.value,
pwd: pwd.value,
xoauth: xoauth.value,
xoauth2: xoauth2.value,
host: host.value,
port: port.value,
tls: true,
};
API.registerAccount(data)
.then((res) => {
console.log(res.status);
})
.catch((err) => {
console.log(err.request.status);
});
}
watchEffect(() => {
if (error.value != "") {
checkError();
}
});
function mailChange() {
if (email.value.includes("@")) {
const domain = email.value.split("@")[1];
if (!knownHosts[domain]) {
refHost.value = "imap." + domain;
} else {
refHost.value = knownHosts[domain].host;
}
// todo check if manual
}
}
</script>
<template>
<div>
<button @click="modal = true">Open Modal!</button>
<Modal v-if="modal" title="Add new account" @close-modal="modal = false">
<template v-slot:body>
<div class="field">
<label>Email: </label>
<input @change="mailChange" v-model="email" type="email" required />
</div>
<fieldset>
<legend>Authentification method</legend>
<div class="field">
<label>Plain password:</label>
<input v-model="pwd" type="password" />
</div>
<div class="field">
<label>Xoauth:</label>
<input v-model="xoauth" type="text" />
</div>
<div class="field">
<label>Xoauth2:</label>
<input v-model="xoauth2" type="text" />
</div>
</fieldset>
<div class="config">
<input v-model="host" id="host" type="text" placeholder="imap host" />
<input v-model="port" id="port" type="number" placeholder="port" />
</div>
<!-- tls -->
<div>
<button :disabled="error != ''" @click="addAccountRequest">Add</button>
{{ error }}
</div>
</template>
</Modal>
</div>
</template>
<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
appearance: textfield;
}
.field {
margin-bottom: 5px;
}
.field > input {
margin-top: 2px;
width: 95%;
}
fieldset {
margin-top: 5px;
border-radius: 5px;
display: grid;
border-color: var(--primary-text);
color: var(--primary-text);
}
.config {
margin: 10px 0;
}
#host {
margin-right: 8px;
width: calc(95% - 100px);
}
#port {
width: 70px;
}
button {
padding: 5px;
padding: 7px 18px;
background-color: #09a35b;
color: var(--primary-text);
border-radius: 5px;
border: none;
text-decoration: none;
display: inline-block;
transition: opacity 0.5s;
}
button:hover {
opacity: 0.6;
}
input {
-webkit-box-flex: 1;
background-color: var(--quaternary-background);
border: none;
border-radius: 4px;
color: var(--primary-text);
-ms-flex: 1;
flex: 1;
font-family: inherit;
font-size: 1.4rem;
font-weight: 400;
min-width: 0;
padding: 8px 9px;
}
label {
color: var(--secondary-text);
}
input:focus {
outline: none;
}
</style>

74
front/src/views/modals/Modal.vue
View File

@@ -1,74 +0,0 @@
<script setup>
import { vOnClickOutside } from "@vueuse/components";
import { defineEmits, defineProps } from "vue";
const emit = defineEmits(["close-modal"]);
const props = defineProps({ title: String });
// todo close on escape
function close() {
emit("close-modal");
}
</script>
<template>
<div class="modal-wrapper">
<div class="modal" v-on-click-outside="close">
<header class="modal-header">
<h2>{{ props.title }}</h2>
<div class="close-button" @click="close"></div>
</header>
<div class="modal-body">
<slot name="body"> This is the default body! </slot>
</div>
</div>
</div>
</template>
<style scoped>
.modal-wrapper {
display: flex;
align-items: center;
position: fixed;
height: 100%;
width: 100%;
justify-content: center;
left: 0;
top: 0;
z-index: 4000;
background-color: rgba(0, 0, 0, 0.8);
}
.modal {
display: flex;
flex-direction: column;
border-radius: 5px;
color: var(--primary-text);
background-color: var(--secondary-background);
padding: 20px;
}
.modal-header {
margin-bottom: 10px;
}
h2 {
display: inline-block;
font-size: 2.4rem;
margin: 0;
}
.close-button {
background-color: var(--secondary-text);
cursor: pointer;
height: 18px;
mask: url(../../assets/close.svg);
mask-repeat: no-repeat;
mask-size: cover;
width: 18px;
float: right;
margin-top: 5px;
}
</style>

2
front/src/views/room/Message.vue
View File

@@ -85,7 +85,7 @@ const classes = (): string => {
content
attachments -->
<template>
<div class="message">
<div class="message" @dblclick="$emit('openMessageView', props.msg?.id)">
<div id="context">
<div class="left" id="profile">
{{ displayAddresses(props.msg?.fromA?.split(",")) }} - {{ props.msg?.fromA }}

14
front/src/views/room/RoomView.vue
View File

@@ -4,11 +4,14 @@ import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { onBeforeMount, ref } from "vue";
import Header from "./Header.vue";
import Message from "./Message.vue";
import { RoomType } from "@/store/models/model";
import { Room, RoomType } from "@/store/models/model";
import MessageViewModal from "@/components/modals/MessageViewModal.vue";
const store = useStore();
const route = useRoute();
const id = ref(parseInt(route.params?.id));
const messageIdView = ref(-1);
const message = ref(undefined);
const id = ref(parseInt(route.params.id));
let room;
onBeforeMount(async () => {
store.commit("setActiveRoom", id.value);
@@ -27,6 +30,11 @@ const shouldDisplayComposer = () => {
if (!room) return false;
return room.roomType == RoomType.THREAD || room.roomType == RoomType.GROUP;
};
function openMessageView(id) {
messageIdView.value = id;
message.value = room?.messages.find((message) => message.id == id);
}
</script>
<template>
@@ -39,10 +47,12 @@ const shouldDisplayComposer = () => {
:key="index"
:msg="message"
:members="room?.members"
@open-message-view="(id) => openMessageView(id)"
/>
</div>
<div id="composer" v-if="shouldDisplayComposer()">COMPOSER</div>
</div>
<MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
</div>
</template>

2
front/src/views/sidebar/accounts/Accounts.vue
View File

@@ -14,7 +14,7 @@
<script>
import { mapState } from "vuex";
import Account from "./Account";
import AddAccountModal from "../../modals/AddAccountModal";
import AddAccountModal from "@/components/modals/AddAccountModal";
import store from "@/store/store";
export default {