No OneTemporary
Actions

Size

42 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 598735d9ff..3c2099ccac 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,769 +1,775 @@
	@import './_variables.scss';

	#app {
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

	.app-bg-wrapper {
	position: fixed;
	z-index: -1;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 50%;
	}

	i {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	background-color: rgba(0,0,0,0.15);
	align-content: flex-start;
	}

	.text-center {
	text-align: center;
	}

	body {
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	font-size: 14px;
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	max-width: 100vw;
	overflow-x: hidden;
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	button {
	user-select: none;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
	box-shadow: var(--buttonShadow);
	font-size: 14px;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	}

	&:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&.pressed {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg)
	}
	}

	label.select {
	padding: 0;

	}

	input, textarea, .select {
	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	padding: 8px .5em;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;

	+ &::placeholder {
	+ color: $fallback--lightText;
	+ color: var(--inputText, $fallback--lightText);
	+ opacity: 0.7;
	+ }
	+
	&:disabled, &[disabled=disabled] {
	cursor: not-allowed;
	opacity: 0.5;
	}

	.icon-down-open {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	line-height: 28px;
	z-index: 0;
	pointer-events: none;
	}

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	margin: 0;
	padding: 0 2em 0 .2em;
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	width: 100%;
	z-index: 1;
	height: 28px;
	line-height: 16px;
	}

	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio],
	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	display: inline-block;
	content: '✔';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

	option {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	i[class*=icon-] {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon)
	}


	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.item {
	flex: 1;
	line-height: 50px;
	height: 50px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	.nav-icon {
	margin-left: 0.4em;
	}

	&.right {
	justify-content: flex-end;
	}
	}

	.auto-size {
	flex: 1
	}

	.nav-bar {
	padding: 0;
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;

	.logo {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	z-index: -1;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: $fallback--fg;
	background-color: var(--topBarText, $fallback--fg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	height: 100%;
	object-fit: contain;
	display: block;
	flex: 0;
	}
	}

	.inner-nav {
	margin: auto;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	height: 50px;

	a, a i {
	color: $fallback--link;
	color: var(--topBarLink, $fallback--link);
	}
	}
	}

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	&::after, & {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&::after {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	pointer-events: none;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	}
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	display: flex;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: .6em .6em;
	text-align: left;
	line-height: 28px;
	color: var(--panelText);
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	align-items: baseline;
	box-shadow: var(--panelHeaderShadow);

	.title {
	flex: 1 0 auto;
	font-size: 1.3em;
	}

	.faint {
	background-color: transparent;
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	.alert {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	button {
	flex-shrink: 0;
	}

	button, .alert {
	// height: 100%;
	line-height: 21px;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	margin-left: .25em;
	min-width: 1px;
	align-self: stretch;
	}

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);


	.faint {
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	box-shadow: var(--topBarShadow);

	.back-button {
	display: block;
	max-width: 99px;
	transition-property: opacity, max-width;
	transition-duration: 300ms;
	transition-timing-function: ease-out;

	i {
	margin: 0 1em;
	}

	&.hidden {
	opacity: 0;
	max-width: 5px;
	}
	}
	}

	.menu-button {
	display: none;
	position: relative;
	}

	.alert-dot {
	border-radius: 100%;
	height: 8px;
	width: 8px;
	position: absolute;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	margin-left: 6px;
	margin-top: -6px;
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	.panel-switcher {
	display: none;
	width: 100%;
	height: 46px;

	button {
	display: block;
	flex: 1;
	max-height: 32px;
	margin: 0.5em;
	padding: 0.5em;
	}
	}

	@media all and (min-width: 800px) {
	body {
	overflow-y: scroll;
	}

	nav {
	.back-button {
	display: none;
	}
	}

	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}
	.badge {
	display: inline-block;
	border-radius: 99px;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0;

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

	.alert {
	margin: 0.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	min-height: 28px;
	line-height: 28px;

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}
	}

	.faint {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.faint-link {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);

	&:hover {
	text-decoration: underline;
	}
	}

	@media all and (min-width: 800px) {
	.logo {
	opacity: 1 !important;
	}
	}

	.item.right {
	text-align: right;
	}

	.visibility-tray {
	font-size: 1.2em;
	padding: 3px;
	cursor: pointer;

	.selected {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}

	div {
	padding-top: 5px;
	}
	}

	.visibility-notice {
	padding: .5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

	@keyframes modal-background-fadein {
	from {
	background-color: rgba(0, 0, 0, 0);
	}
	to {
	background-color: rgba(0, 0, 0, 0.5);
	}
	}

	.modal-view {
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: auto;
	animation-duration: 0.2s;
	background-color: rgba(0, 0, 0, 0.5);
	animation-name: modal-background-fadein;
	}

	.button-icon {
	font-size: 1.2em;
	}

	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}
	15% {
	transform: translateX(0.375rem);
	}
	30% {
	transform: translateX(-0.375rem);
	}
	45% {
	transform: translateX(0.375rem);
	}
	60% {
	transform: translateX(-0.375rem);
	}
	75% {
	transform: translateX(0.375rem);
	}
	90% {
	transform: translateX(-0.375rem);
	}
	100% {
	transform: translateX(0);
	}
	}

	@media all and (max-width: 800px) {
	.mobile-hidden {
	display: none;
	}

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}

	.menu-button {
	display: block;
	margin-right: 0.8em;
	}
	}

	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0px;
	width: 100%;
	}
	}

	.btn.btn-default {
	min-height: 28px;
	}
	diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
	index ab6cd64d9e..cdba681f46 100644
	--- a/src/components/registration/registration.js
	+++ b/src/components/registration/registration.js
	@@ -1,73 +1,76 @@
	import { validationMixin } from 'vuelidate'
	import { required, sameAs } from 'vuelidate/lib/validators'
	import { mapActions, mapState } from 'vuex'

	const registration = {
	mixins: [validationMixin],
	data: () => ({
	user: {
	email: '',
	fullname: '',
	username: '',
	password: '',
	confirm: ''
	},
	captcha: {}
	}),
	validations: {
	user: {
	email: { required },
	username: { required },
	fullname: { required },
	password: { required },
	confirm: {
	required,
	sameAsPassword: sameAs('password')
	}
	}
	},
	created () {
	if ((!this.registrationOpen && !this.token) \|\| this.signedIn) {
	this.$router.push({name: 'root'})
	}

	this.setCaptcha()
	},
	computed: {
	token () { return this.$route.params.token },
	...mapState({
	registrationOpen: (state) => state.instance.registrationOpen,
	signedIn: (state) => !!state.users.currentUser,
	isPending: (state) => state.users.signUpPending,
	serverValidationErrors: (state) => state.users.signUpErrors,
	termsOfService: (state) => state.instance.tos
	- })
	+ }),
	+ bioPlaceholder () {
	+ return this.$t('registration.bio_placeholder').join('<br />')
	+ }
	},
	methods: {
	...mapActions(['signUp', 'getCaptcha']),
	async submit () {
	this.user.nickname = this.user.username
	this.user.token = this.token

	this.user.captcha_solution = this.captcha.solution
	this.user.captcha_token = this.captcha.token
	this.user.captcha_answer_data = this.captcha.answer_data

	this.$v.$touch()

	if (!this.$v.$invalid) {
	try {
	await this.signUp(this.user)
	this.$router.push({name: 'friends'})
	} catch (error) {
	console.warn('Registration failed: ' + error)
	}
	}
	},
	setCaptcha () {
	this.getCaptcha().then(cpt => { this.captcha = cpt })
	}
	}
	}

	export default registration
	diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
	index e22b308df0..a24b8ee41e 100644
	--- a/src/components/registration/registration.vue
	+++ b/src/components/registration/registration.vue
	@@ -1,209 +1,234 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	{{$t('registration.registration')}}
	</div>
	<div class="panel-body">
	<form v-on:submit.prevent='submit(user)' class='registration-form'>
	<div class='container'>
	<div class='text-fields'>
	<div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }">
	<label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label>
	<input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')">
	</div>
	<div class="form-error" v-if="$v.user.username.$dirty">
	<ul>
	<li v-if="!$v.user.username.required">
	<span>{{$t('registration.validations.username_required')}}</span>
	</li>
	</ul>
	</div>

	<div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
	<label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
	<input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
	</div>
	<div class="form-error" v-if="$v.user.fullname.$dirty">
	<ul>
	<li v-if="!$v.user.fullname.required">
	<span>{{$t('registration.validations.fullname_required')}}</span>
	</li>
	</ul>
	</div>

	<div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
	<label class='form--label' for='email'>{{$t('registration.email')}}</label>
	<input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
	</div>
	<div class="form-error" v-if="$v.user.email.$dirty">
	<ul>
	<li v-if="!$v.user.email.required">
	<span>{{$t('registration.validations.email_required')}}</span>
	</li>
	</ul>
	</div>

	<div class='form-group'>
	<label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
	- <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="$t('registration.bio_placeholder')"></textarea>
	+ <div class="textarea-wrapper">
	+ <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio'></textarea>
	+ <span v-if="!user.bio" class="textarea-placeholder" v-html="bioPlaceholder"></span>
	+ </div>
	</div>

	<div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
	<label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label>
	<input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
	</div>
	<div class="form-error" v-if="$v.user.password.$dirty">
	<ul>
	<li v-if="!$v.user.password.required">
	<span>{{$t('registration.validations.password_required')}}</span>
	</li>
	</ul>
	</div>

	<div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
	<label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label>
	<input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
	</div>
	<div class="form-error" v-if="$v.user.confirm.$dirty">
	<ul>
	<li v-if="!$v.user.confirm.required">
	<span>{{$t('registration.validations.password_confirmation_required')}}</span>
	</li>
	<li v-if="!$v.user.confirm.sameAsPassword">
	<span>{{$t('registration.validations.password_confirmation_match')}}</span>
	</li>
	</ul>
	</div>

	<div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
	<label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>

	<template v-if="captcha.type == 'kocaptcha'">
	<img v-bind:src="captcha.url" v-on:click="setCaptcha">

	<sub>{{$t('registration.new_captcha')}}</sub>

	<input :disabled="isPending"
	v-model='captcha.solution'
	class='form-control' id='captcha-answer' type='text' autocomplete="off">
	</template>
	</div>

	<div class='form-group' v-if='token' >
	<label for='token'>{{$t('registration.token')}}</label>
	<input disabled='true' v-model='token' class='form-control' id='token' type='text'>
	</div>
	<div class='form-group'>
	<button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button>
	</div>
	</div>

	<div class='terms-of-service' v-html="termsOfService">
	</div>
	</div>
	<div v-if="serverValidationErrors.length" class='form-group'>
	<div class='alert error'>
	<span v-for="error in serverValidationErrors">{{error}}</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</template>

	<script src="./registration.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';
	$validations-cRed: #f04124;

	.registration-form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;

	.container {
	display: flex;
	flex-direction: row;
	//margin-bottom: 1em;
	}

	.terms-of-service {
	flex: 0 1 50%;
	margin: 0.8em;
	}

	.text-fields {
	margin-top: 0.6em;
	flex: 1 0;
	display: flex;
	flex-direction: column;
	}

	textarea {
	- min-height: 100px;
	+ min-height: 130px;
	+ }
	+
	+ .textarea-wrapper {
	+ position: relative;
	+
	+ .textarea-placeholder {
	+ position: absolute;
	+ top: 0;
	+ left: 0;
	+ bottom: 0;
	+ right: 0;
	+ pointer-events: none;
	+ padding: 4px 7px;
	+ color: $fallback--lightText;
	+ color: var(--inputText, $fallback--lightText);
	+ opacity: 0.7;
	+ }
	+
	+ textarea {
	+ width: 100%;
	+ height: 100%;
	+ }
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.3em 0.0em 0.3em;
	line-height:24px;
	margin-bottom: 1em;
	}

	.form-group--error {
	animation-name: shakeError;
	animation-duration: .6s;
	animation-timing-function: ease-in-out;
	}

	.form-group--error .form--label {
	color: $validations-cRed;
	color: var(--cRed, $validations-cRed);
	}

	.form-error {
	margin-top: -0.7em;
	text-align: left;

	span {
	font-size: 12px;
	}
	}

	.form-error ul {
	list-style: none;
	padding: 0 0 0 5px;
	margin-top: 0;

	li::before {
	content: "• ";
	}
	}

	form textarea {
	line-height:16px;
	resize: vertical;
	}

	.captcha {
	max-width: 350px;
	margin-bottom: 0.4em;
	}

	.btn {
	margin-top: 0.6em;
	height: 28px;
	}

	.error {
	text-align: center;
	}
	}

	@media all and (max-width: 800px) {
	.registration-form .container {
	flex-direction: column-reverse;
	}
	}
	</style>
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index 01fe2fba21..77c054c215 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,427 +1,431 @@
	{
	"chat": {
	"title": "Chat"
	},
	"features_panel": {
	"chat": "Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"generic_error": "An error occured",
	"optional": "optional"
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"cancel": "Cancel"
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion"
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next"
	},
	"nav": {
	"about": "About",
	"back": "Back",
	"chat": "Local Chat",
	"friend_requests": "Follow Requests",
	"mentions": "Mentions",
	"dms": "Direct Messages",
	"public_tl": "Public Timeline",
	"timeline": "Timeline",
	"twkn": "The Whole Known Network",
	"user_search": "User Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it...",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications"
	},
	"post_status": {
	"new_status": "Post new status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown"
	},
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning": "This post will only be visible to all the mentioned users.",
	"posting": "Posting",
	"scope": {
	"direct": "Direct - Post to mentioned users only",
	"private": "Followers-only - Post to followers only",
	"public": "Public - Post to public timelines",
	"unlisted": "Unlisted - Do not post to public timelines"
	}
	},
	"registration": {
	"bio": "Bio",
	"email": "Email",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	- "bio_placeholder": "e.g.\nHi, I'm Lain\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	+ "bio_placeholder": [
	+ "e.g.",
	+ "Hi, I'm Lain.",
	+ "I’m an anime girl living in suburban Japan. You may know me from the Wired."
	+ ],
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password"
	}
	},
	"settings": {
	"app_name": "App name",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"autoload": "Enable automatic loading when scrolled to the bottom",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (Notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"blocks_tab": "Blocks",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_password": "Change Password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_avatar": "Your current avatar",
	"current_password": "Current password",
	"current_profile_banner": "Your current profile banner",
	"data_import_export_tab": "Data Import / Export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete Account",
	"delete_account_description": "Permanently delete your account and all your messages.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_export_processing": "Processing, you'll soon be asked to download your file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"max_thumbnails": "Maximum amount of thumbnails per post",
	"hide_isp": "Hide instance-specific panel",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide filtered statuses",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos directly in the media viewer",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & Bio",
	"new_password": "New password",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Likes",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"show_admin_badge": "Show Admin badge in my profile",
	"show_moderator_badge": "Show Moderator badge in my profile",
	"nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh Token",
	"valid_until": "Valid Until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause streaming when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile Background",
	"profile_banner": "Profile Banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_link_preview": "Enable reply-link preview on mouse hover",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"post_status_content_type": "Post status content type",
	"stop_gifs": "Play-on-hover GIFs",
	"streaming": "Enable automatic streaming of new posts when scrolled to the top",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"notifications": "Notifications",
	"enable_web_push_notifications": "Enable web push notifications",
	"style": {
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity"
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"badge": "Badge background",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text"
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"postCode": "Monospaced text in a post (rich text)"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	}
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error_fetching": "Error fetching updates",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses"
	},
	"status": {
	"reply_to": "Reply to",
	"replies_list": "Replies:"
	},
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deny": "Deny",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_again": "Send request again?",
	"follow_unfollow": "Unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"its_you": "It's you!",
	"media": "Media",
	"mute": "Mute",
	"muted": "Muted",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"statuses": "Statuses",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking...",
	"block_progress": "Blocking...",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting...",
	"mute_progress": "Muting..."
	},
	"user_profile": {
	"timeline_title": "User Timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload Media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"user_settings": "User Settings"
	},
	"upload":{
	"error": {
	"base": "Upload failed.",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Mon, Aug 10, 4:24 AM (1 d, 20 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724871
Default Alt Text: (42 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions