natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix comments

This commit is contained in:
Kainoa Kanter 2023-04-07 23:13:01 -07:00
parent 2e9ae4b695
commit 980bf31ce0
8 changed files with 282 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -28,7 +28,7 @@
"e2e": "start-server-and-test start:test http://localhost:61812 cy:run", "e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
"mocha": "pnpm --filter backend run mocha", "mocha": "pnpm --filter backend run mocha",
"test": "pnpm run mocha", "test": "pnpm run mocha",
"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format", "format": "pnpm rome format packages/**/* --write ; pnpm --filter client run format",
"clean": "pnpm node ./scripts/clean.js", "clean": "pnpm node ./scripts/clean.js",
"clean-all": "pnpm node ./scripts/clean-all.js", "clean-all": "pnpm node ./scripts/clean-all.js",
"cleanall": "pnpm run clean-all" "cleanall": "pnpm run clean-all"

38
packages/client/src/components/MkMention.vue
View File

@ -1,25 +1,45 @@
<template> <template>
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop> <MkA
// #v-ifdef VITE_CAPACITOR v-if="url.startsWith('/')"
v-user-preview="canonical"
class="akbvjaqn"
:class="{ isMe }"
:to="url"
:style="{ background: bgCss }"
@click.stop
>
<!-- #v-ifdef VITE_CAPACITOR -->
<img <img
:class="$style.icon" :class="$style.icon"
:src="`${$i.instanceUrl}/avatar/@${username}@${host}`" :src="`${$i.instanceUrl}/avatar/@${username}@${host}`"
alt="" alt=""
/> />
// #v-else <!-- #v-else -->
<img class="icon" :src="`/avatar/@${username}@${host}`" alt=""> <img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
// #v-endif <!-- #v-endif -->
<span class="main"> <span class="main">
<span class="username">@{{ username }}</span> <span class="username">@{{ username }}</span>
<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span> <span
v-if="host != localHost || $store.state.showFullAcct"
class="host"
>@{{ toUnicode(host) }}</span
>
</span> </span>
</MkA> </MkA>
<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop> <a
v-else
class="akbvjaqn"
:href="url"
target="_blank"
rel="noopener"
:style="{ background: bgCss }"
@click.stop
>
<span class="main"> <span class="main">
<span class="username">@{{ username }}</span> <span class="username">@{{ username }}</span>
<span class="host">@{{ toUnicode(host) }}</span> <span class="host">@{{ toUnicode(host) }}</span>
</span> </span>
</a> </a>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

173
packages/client/src/components/MkSignin.vue
View File

@ -1,12 +1,14 @@
<template> <template>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<form class="eppvobhk" :class="{ signing }" @submit.prevent="onSubmit"> <form class="eppvobhk" :class="{ signing }" @submit.prevent="onSubmit">
<div class="normal-signin"> <div class="normal-signin">
Instance Instance
<MkSelect v-model="instanceUrl" large :model-value="instances[0]?.url"> <MkSelect
<option value="other"> v-model="instanceUrl"
Select other instance large
</option> :model-value="instances[0]?.url"
>
<option value="other">Select other instance</option>
<option <option
v-for="(instance, i) in instances" v-for="(instance, i) in instances"
:key="instance.url" :key="instance.url"
@ -48,42 +50,43 @@
href="https://misskey.io/notes/99l9jqqun2" href="https://misskey.io/notes/99l9jqqun2"
target="_blank" target="_blank"
style="color: var(--link); text-align: center" style="color: var(--link); text-align: center"
>How to create a access token</a> >How to create a access token</a
</form> >
// #v-else </form>
<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> <!-- #v-else -->
<form
class="eppvobhk _monolithic_"
:class="{ signing, totpLogin }"
@submit.prevent="onSubmit"
>
<div class="auth _section _formRoot"> <div class="auth _section _formRoot">
<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div> <div
v-show="withAvatar"
class="avatar"
:style="{
backgroundImage: user ? `url('${user.avatarUrl}')` : null,
marginBottom: message ? '1.5em' : null,
}"
></div>
<MkInfo v-if="message"> <MkInfo v-if="message">
{{ message }} {{ message }}
</MkInfo> </MkInfo>
<div v-if="!totpLogin" class="normal-signin"> <div v-if="!totpLogin" class="normal-signin">
<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange"> <MkInput
v-model="username"
class="_formBlock"
:placeholder="i18n.ts.username"
type="text"
pattern="^[a-zA-Z0-9_]+$"
:spellcheck="false"
autofocus
required
data-cy-signin-username
@update:modelValue="onUsernameChange"
>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>
</MkInput> </MkInput>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
</MkInput>
<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 1rem auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
</div>
<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
<div v-if="user && user.securityKeys" class="twofa-group tap-group">
<p>{{ i18n.ts.tapSecurityKey }}</p>
<MkButton v-if="!queryingKey" @click="queryKey">
{{ i18n.ts.retry }}
</MkButton>
</div>
<div v-if="user && user.securityKeys" class="or-hr">
<p class="or-msg">{{ i18n.ts.or }}</p>
</div>
<div class="twofa-group totp-group">
<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
<template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
</MkInput>
<MkInput <MkInput
v-if="!user || (user && !user.usePasswordLessLogin)" v-if="!user || (user && !user.usePasswordLessLogin)"
v-model="password" v-model="password"
@ -116,6 +119,73 @@
>{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton >{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton
> >
</div> </div>
<div
v-if="totpLogin"
class="2fa-signin"
:class="{ securityKeys: user && user.securityKeys }"
>
<div
v-if="user && user.securityKeys"
class="twofa-group tap-group"
>
<p>{{ i18n.ts.tapSecurityKey }}</p>
<MkButton v-if="!queryingKey" @click="queryKey">
{{ i18n.ts.retry }}
</MkButton>
</div>
<div v-if="user && user.securityKeys" class="or-hr">
<p class="or-msg">{{ i18n.ts.or }}</p>
</div>
<div class="twofa-group totp-group">
<p style="margin-bottom: 0">
{{ i18n.ts.twoStepAuthentication }}
</p>
<MkInput
v-if="user && user.usePasswordLessLogin"
v-model="password"
type="password"
:with-password-toggle="true"
required
>
<template #label>{{ i18n.ts.password }}</template>
<template #prefix
><i class="ph-lock ph-bold ph-lg"></i
></template>
</MkInput>
<MkInput
v-if="!user || (user && !user.usePasswordLessLogin)"
v-model="password"
class="_formBlock"
:placeholder="i18n.ts.password"
type="password"
:with-password-toggle="true"
required
data-cy-signin-password
>
<template #prefix
><i class="ph-lock ph-bold ph-lg"></i
></template>
<template #caption
><button
class="_textButton"
type="button"
@click="resetPassword"
>
{{ i18n.ts.forgotPassword }}
</button></template
>
</MkInput>
<MkButton
class="_formBlock"
type="submit"
primary
:disabled="signing"
style="margin: 1rem auto"
>{{
signing ? i18n.ts.loggingIn : i18n.ts.login
}}</MkButton
>
</div>
<div <div
v-if="totpLogin" v-if="totpLogin"
class="2fa-signin" class="2fa-signin"
@ -176,12 +246,39 @@
</div> </div>
</div> </div>
<div class="social _section"> <div class="social _section">
<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ph-twitter-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Twitter' }) }}</a> <a
<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ph-github-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'GitHub' }) }}</a> v-if="meta && meta.enableTwitterIntegration"
<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ph-discord-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Discord' }) }}</a> class="_borderButton _gap"
:href="`${apiUrl}/signin/twitter`"
><i
class="ph-twitter-logo ph-bold ph-lg"
style="margin-right: 4px"
></i
>{{ i18n.t("signinWith", { x: "Twitter" }) }}</a
>
<a
v-if="meta && meta.enableGithubIntegration"
class="_borderButton _gap"
:href="`${apiUrl}/signin/github`"
><i
class="ph-github-logo ph-bold ph-lg"
style="margin-right: 4px"
></i
>{{ i18n.t("signinWith", { x: "GitHub" }) }}</a
>
<a
v-if="meta && meta.enableDiscordIntegration"
class="_borderButton _gap"
:href="`${apiUrl}/signin/discord`"
><i
class="ph-discord-logo ph-bold ph-lg"
style="margin-right: 4px"
></i
>{{ i18n.t("signinWith", { x: "Discord" }) }}</a
>
</div> </div>
</form> </form>
// #v-endif <!-- #v-endif -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

4
packages/client/src/components/MkSigninDialog.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<XModalWindow <XModalWindow
ref="dialog" ref="dialog"
:width="400" :width="400"
@close="onClose" @close="onClose"
@closed="emit('closed')" @closed="emit('closed')"
> >
<template #header>Login</template> <template #header>Login</template>
<MkSignin :auto-set="autoSet" :message="message" @login="onLogin" /> <MkSignin :auto-set="autoSet" :message="message" @login="onLogin" />

6
packages/client/src/components/global/MkEmoji.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/> <img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" <img v-else-if="char && !useOsNativeEmojis" class="mk-emoji"
// #v-ifdef VITE_CAPACITOR :src="char2filePath(char) || url"
:src="char2filePath(char)"
// #v-else
:src="url"
// #v-endif
:alt="alt" :title="alt" decoding="async"/> :alt="alt" :title="alt" decoding="async"/>
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span> <span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
<span v-else>{{ emoji }}</span> <span v-else>{{ emoji }}</span>

33
packages/client/src/pages/timeline.vue
View File

@ -67,22 +67,22 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch, ref, onMounted } from 'vue'; import { computed, watch, ref, onMounted } from "vue";
import { Virtual } from 'swiper'; import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from "swiper/vue";
import XTutorial from '@/components/MkTutorialDialog.vue'; import XTutorial from "@/components/MkTutorialDialog.vue";
import XTimeline from '@/components/MkTimeline.vue'; import XTimeline from "@/components/MkTimeline.vue";
import XPostForm from '@/components/MkPostForm.vue'; import XPostForm from "@/components/MkPostForm.vue";
import { scroll } from '@/scripts/scroll'; import { scroll } from "@/scripts/scroll";
import * as os from '@/os'; import * as os from "@/os";
import { defaultStore } from '@/store'; import { defaultStore } from "@/store";
import { i18n } from '@/i18n'; import { i18n } from "@/i18n";
import { instance } from '@/instance'; import { instance } from "@/instance";
import { $i } from '@/account'; import { $i } from "@/account";
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from "@/scripts/device-kind";
import 'swiper/scss'; import "swiper/scss";
import 'swiper/scss/virtual'; import "swiper/scss/virtual";
// #v-ifdef VITE_CAPACITOR // #v-ifdef VITE_CAPACITOR
import { Camera } from "@capacitor/camera"; import { Camera } from "@capacitor/camera";
// #v-endif // #v-endif
@ -374,7 +374,6 @@ if (!permissionState.camera) {
Camera.requestPermissions({ permissions: ["photos", "camera"] }); Camera.requestPermissions({ permissions: ["photos", "camera"] });
} }
// #v-endif // #v-endif
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

36
packages/client/src/pages/welcome.entrance.a.vue
View File

@ -1,16 +1,16 @@
<template> <template>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<div class="rsqzvsbo"> <div class="rsqzvsbo">
// #v-else <!-- #v-else -->
<div v-if="meta" class="rsqzvsbo"> <div v-if="meta" class="rsqzvsbo">
// #v-endif <!-- #v-endif -->
<div class="top"> <div class="top">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<!-- aaa --> <!-- aaa -->
// #v-else <!-- #v-else -->
<MkFeaturedPhotos class="bg"/> <MkFeaturedPhotos class="bg"/>
<XTimeline class="tl"/> <XTimeline class="tl"/>
// #v-endif <!-- #v-endif -->
<div class="shape1"></div> <div class="shape1"></div>
<div class="shape2"></div> <div class="shape2"></div>
<img src="/client-assets/misskey.svg" class="misskey"/> <img src="/client-assets/misskey.svg" class="misskey"/>
@ -28,30 +28,30 @@
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/> <MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
</div> </div>
<div class="main"> <div class="main">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<!-- aaa --> <!-- aaa -->
// #v-else <!-- #v-else -->
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/> <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
// #v-endif <!-- #v-endif -->
<button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button> <button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
<div class="fg"> <div class="fg">
<h1> <h1>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<span class="text">Calckey Mobile</span> <span class="text">Calckey Mobile</span>
// #v-else <!-- #v-else -->
<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"> <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
<span v-else class="text">{{ instanceName }}</span> <span v-else class="text">{{ instanceName }}</span>
// #v-endif <!-- #v-endif -->
</h1> </h1>
<div class="about"> <div class="about">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<div class="desc">🌎 Calckey is an open source, decentralized social media platform that's free forever! 🚀</div> <div class="desc">🌎 Calckey is an open source, decentralized social media platform that's free forever! 🚀</div>
// #v-else <!-- #v-else -->
<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
// #v-endif <!-- #v-endif -->
</div> </div>
<div class="action"> <div class="action">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<MkButton inline rounded data-cy-signin @click="signin()">Login</MkButton> <MkButton inline rounded data-cy-signin @click="signin()">Login</MkButton>
<MkSelect v-model="lang"> <MkSelect v-model="lang">
<template #label>{{ i18n.ts.uiLanguage }}</template> <template #label>{{ i18n.ts.uiLanguage }}</template>
@ -66,11 +66,11 @@
{{ x[1] }} {{ x[1] }}
</option> </option>
</MkSelect> </MkSelect>
// #v-else <!-- #v-else -->
<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton> <MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
<MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton> <MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
<MkButton inline rounded style="margin-left: 12px; margin-top: 12px;" onclick="window.location.href='/explore'">Explore</MkButton> <MkButton inline rounded style="margin-left: 12px; margin-top: 12px;" onclick="window.location.href='/explore'">Explore</MkButton>
// #v-endif <!-- #v-endif -->
</div> </div>
</div> </div>
<div v-if="instances" class="federation"> <div v-if="instances" class="federation">

6
packages/client/src/pages/welcome.vue
View File

@ -1,12 +1,12 @@
<template> <template>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<XEntrance /> <XEntrance />
// #v-else <!-- #v-else -->
<div v-if="meta"> <div v-if="meta">
<XSetup v-if="meta.requireSetup"/> <XSetup v-if="meta.requireSetup"/>
<XEntrance v-else/> <XEntrance v-else/>
</div> </div>
// #v-endif <!-- #v-endif -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>